RESPONSIVE
WEB DESIGN
7 rue de Bucarest 75008 Paris - +33 1 73 00 28 00 – contact@backelite.com - www.backelite.com
2

Agence leader pour un monde tactile

2
SPÉCIFICITÉS
DU RWD
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

3
DÉFINITION
Présenter un site unique à des navigateurs web utilisés sur n’importe quel type
de terminal : PC, tablette, mob...
STARBUCKS.COM

BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013

Outil de simulation RWD : ami.responsivedesign.is

5
UN COUP D’ŒIL AUX TERMINAUX : SMARTPHONES
Les smartphones phares d’hier :
Ecrans de moins de 4 pouces
Résolutions d’écran ...
POINTS DE BASCULE
CSS3 Media Queries
= Breakpoints
= Point de rupture
= Point de bascule

Exemple :

Le RWD consiste à pré...
POINTS DE BASCULE
CSS3 Media Queries
= Breakpoints
= Point de rupture
= Point de bascule

Exemple :

On ne gère généraleme...
L’ENJEU D’UN SITE RESPONSIVE
Concevoir une expérience optimale
pour l’environnement cible (terminaux, OS, navigateurs et r...
RESPONSIVE WEB DESIGN
LA COMPATIBILITÉ

IE6
IE7
Exclus du RWD
< 0,5%
0,7%

IE8
RWD dégradé
9,6%

IE9+

5+
3.6+
RWD-ready

...
PERFORMANCE
Performance effective (temps de chargement total de la page et de ses
ressources)

Performance ressentie (laps...
AUTRES APPROCHES
Approche adaptive, Responsive Server-Side (RESS)
Côté serveur
Gain de performance
Adaptations plus profon...
SITE UNIQUE VS MULTI-SITES
RWD et le RESS sont applicables à n’importe quel
type de site
La stratégie de contenu doit être...
ANTICIPER L’IMPACT D’UNE MIGRATION
VERS LE RESPONSIVE
Analyse de l’audience et des statistiques du site existant
-

Impact...
QUELQUES EXEMPLES CONCRETS

E-commerce : O’neill clothing (http://www.oneillclothing.com)
Redesign Responsive simple sur u...
CONTENT FIRST
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

16
LE RISQUE DE LA REFONTE
Copier-coller de l’existant…
Trop de texte
Trop d’images
Trop de fonctionnalités par page

…non ad...
COMMENT STRUCTURER LE CONTENU
Adopter une approche mobile-first

Hiérarchiser
Ne garder que l’essentiel
Découper / structu...
ETAPES CLÉS
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

19
LE PROCESSUS ITÉRATIF IDÉAL PAR GABARIT
Gabarit 1
Validation
Stabilisation
Cadrage

Structure de
l’information

Conception...
LE BINÔME INTÉGRATEUR-GRAPHISTE
Dialoguer
Echanger avec l’intégrateur en phase de conception
Travailler avec l’intégrateur...
D’UN FRAMEWORK RWD
À PHOTOSHOP
(ET VICE VERSA)
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

22
FRAMEWORKS
Zurb Foundation 5

Twitter Bootstrap 3

Oui (depuis v4)

Oui (depuis v3)

Fluide, 12 colonnes

Fluide, 12 colon...
WOPE

Une solution de développement pour
construire des sites web et mobiles universels
•

•
•

Une expérience utilisateur...
WOPE 6

Gère désormais n’importe quel type de HTML
Une bibliothèque de widgets graphiques compatible PC
Un framework Respo...
COMMENT APPRÉHENDER
DANS PHOTOSHOP…
Une structure HTML commune à différentes mises en page
Une grille générale de 12 colon...
CAS PRATIQUE…
Le site Responsive Web Design des Galeries Lafayette
Ou… Tout ce que le graphiste doit garder en tête lors d...
UNE GRILLE DE 12 COLONNES

La grille est structurée en 12 colonnes, quelque soit la largeur de la page.
Construire la mise...
UNITÉ DE MESURE
= 1 COLONNE
Le graphiste doit prendre en compte
la colonne comme unité de
mesure dont la largeur varie en
...
UNITÉ DE MESURE
= 1 COLONNE

Chaque composant est structuré en 12 colonnes.
Dans Photoshop, transformer chaque composant
s...
RESPECTER LE FLUX HTML
1

2

3

1
2

4

5

3

4
5

6

6
7

8

9

7
8

10

9
10

L’ordre des contenus doit être respecté su...
FACTORISATION

desktop

mobile

Créer des bibliothèques de
composants pour garder une
cohérence dans la charte et
illustre...
MISES EN PAGE FLEXIBLES :
ADAPTER LES POSITIONNEMENTS

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

33
MISES EN PAGE FLEXIBLES :
ADAPTER LES FORMES DES COMPOSANTS

Sur desktop

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 201...
MISES EN PAGE FLEXIBLES :
ADAPTER LES DIMENSIONS
Pour un terminal tactile, il est
nécessaire de prévoir des liens et
des b...
GESTION DES IMAGES
Les images concentrent toutes les problématiques liées au
RWD…
Résolution d’affichage et qualité
Lisibi...
LA RECETTE D’UN GABARIT
Valoriser la recette
Pendant et en fin de projet

Sur les plans créatifs et techniques
Par navigat...
SEO
ET ANALYTICS
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

38
SEARCH ENGINE OPTIMIZATION (SEO)
« Google recommends webmasters follow the
industry best practice of using responsive web
...
MESURE D’AUDIENCE ET STATISTIQUES (ANALYTICS)

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

40
MESURE D’AUDIENCE ET STATISTIQUES (ANALYTICS)

Google Nexus 4

iPhone 5

Google Galaxy Nexus
Sony Xperia Z
Samsung Galaxy ...
CONCLUSION
Privilégier une approche UX
Cadrage en amont
Réflexion sur les contenus et les utilisateurs
Approche pluridisci...
Le meilleur de la mode adapté à tous les types d’écrans
http://www.galerieslafayette.com
BACKELITE

043
LE MEILLEUR DE LA MODE
ADAPTÉ À TOUS LES TYPES
D’ÉCRANS
Le groupe Galeries Lafayette est un acteur majeur du
commerce en F...
OBJECTIFS
CLÉS
• Refonte du site e-commerce
en Responsive Web Design pour une expérience
utilisateur homogène sur tous les...
PRINCIPAUX
ENJEUX DU SITE
•
•
•
•
•

Accès rapide à l’ensemble du catalogue produit sur
tous les écrans
Consultation de fi...
RÉSULTATS

CA x3 sur tablette,
CA x4 sur mobile,
Taux de conversion en augmentation sur
desktop, et encore plus sur tablet...
NOS PLUS BELLES RÉFÉRENCES
Contactez nous
Backelite
7 rue de Bucarest 75008 Paris
Tél : 01 73 00 28 00
contact@backelite.com
Prochain SlideShare
Chargement dans…5
×

Responsive Web Design : best practices et retour d'expérience de Backelite et les Galeries Lafayette

7 363 vues

Publié le

Retour d'expérience sur le Responsibe Web Design par l'agence Backelite: spécificités et enjeux du RWD, les best practices, étapes clés d'un projet, approche content first, framework, cas pratique et témoignages des Galeries Lafayette

Publié dans : Technologie
0 commentaire
18 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
7 363
Sur SlideShare
0
Issues des intégrations
0
Intégrations
660
Actions
Partages
0
Téléchargements
38
Commentaires
0
J’aime
18
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Responsive Web Design : best practices et retour d'expérience de Backelite et les Galeries Lafayette

  1. 1. RESPONSIVE WEB DESIGN 7 rue de Bucarest 75008 Paris - +33 1 73 00 28 00 – contact@backelite.com - www.backelite.com
  2. 2. 2 Agence leader pour un monde tactile 2
  3. 3. SPÉCIFICITÉS DU RWD BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 3
  4. 4. DÉFINITION Présenter un site unique à des navigateurs web utilisés sur n’importe quel type de terminal : PC, tablette, mobile voire d’autres. Une adaptation de la mise en page et des éléments optimale suivant l’espace d’affichage du navigateur. Un seul contenu pour tous les terminaux, une seule arborescence de pages. Penser résolution de mise en page plutôt que terminal. Cette adaptation est faite sur le terminal client par du code CSS et JavaScript. BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 4
  5. 5. STARBUCKS.COM BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 Outil de simulation RWD : ami.responsivedesign.is 5
  6. 6. UN COUP D’ŒIL AUX TERMINAUX : SMARTPHONES Les smartphones phares d’hier : Ecrans de moins de 4 pouces Résolutions d’écran autour de 320px Résolution utilisée pour la mise en page (CSS pixels) : de 320px à 384px Et ceux d’aujourd’hui : Ecrans de 4 à 6,3 pouces Résolutions d’écran de 720px à 1080px Résolution utilisée pour la mise en page (CSS pixels) : de 320px à 384px Densité de pixels supérieure, permettant l’utilisation d’images « retina » Les tailles et les résolutions d’écrans plus importantes des terminaux récents ne nécessitent pas de traitement particulier pour la mise en page du site, seulement pour les images. Mais les variations, même légères, exigent une mise en page fluide. BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 6
  7. 7. POINTS DE BASCULE CSS3 Media Queries = Breakpoints = Point de rupture = Point de bascule Exemple : Le RWD consiste à prévoir différentes mises en page : celles-ci sont activées suivant l’espace disponible. Les navigateurs s’insèrent dans une des zones définies par les points de bascule qui utilisent la fonctionnalité CSS3 Media Queries. Les points de bascule majeurs signifient des changements de mise en page conséquents, les mineurs sont utilisés pour des ajustements. BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 Source : infographie Splio, 2012 7
  8. 8. POINTS DE BASCULE CSS3 Media Queries = Breakpoints = Point de rupture = Point de bascule Exemple : On ne gère généralement pas les résolutions inférieures à 320px (largeur d’un iPhone). BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 En général, le site web ne se redimensionne plus de façon fluide à partir d’une certaine résolution : on centre ensuite le contenu. On remarque que la zone autour du point de rupture situé à 768px peut gérer les smartphones en mode paysage et les tablettes en mode portrait => On ne pas se baser sur la résolution pour identifier le type de terminal Source : infographie Splio, 2012 8
  9. 9. L’ENJEU D’UN SITE RESPONSIVE Concevoir une expérience optimale pour l’environnement cible (terminaux, OS, navigateurs et résolutions) qui s’adaptera au mieux dans les autres cas qui s’adaptera au mieux sur les terminaux de demain Autres points contribuant au contexte le contexte d’utilisation (posture) performance (vitesse/type de connexion, terminal) le mode d’interaction (souris, clavier, tactile, télécommande…) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 9
  10. 10. RESPONSIVE WEB DESIGN LA COMPATIBILITÉ IE6 IE7 Exclus du RWD < 0,5% 0,7% IE8 RWD dégradé 9,6% IE9+ 5+ 3.6+ RWD-ready Sur mobile, les plateformes supportées commencent à Android 2.3, Windows Phone 7.5 et BlackBerry 7. La compatibilité cible est donc un facteur déterminant pour l’évaluation de la pertinence d’un projet RWD. BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 Source : chiffres monde nov ‘13, Statcounter 10
  11. 11. PERFORMANCE Performance effective (temps de chargement total de la page et de ses ressources) Performance ressentie (laps de temps écoulé jusqu’à l’affichage de la première partie de la page, plus important que la performance effective pour capter l’attention de l’utilisateur) Intégration avec infrastructure existante : cache, CDN… Source : Etude Akamai menée sur 500 sites Responsive mi-2013 BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 11
  12. 12. AUTRES APPROCHES Approche adaptive, Responsive Server-Side (RESS) Côté serveur Gain de performance Adaptations plus profondes Détection du User-Agent Rarement utilisé pour un site unique visant tous les types de terminaux Adaptations mineures possibles côté client BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 12
  13. 13. SITE UNIQUE VS MULTI-SITES RWD et le RESS sont applicables à n’importe quel type de site La stratégie de contenu doit être le critère de choix Les coûts de développement et de maintenance sont également à prendre en compte BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 13
  14. 14. ANTICIPER L’IMPACT D’UNE MIGRATION VERS LE RESPONSIVE Analyse de l’audience et des statistiques du site existant - Impact potentiel de la compatibilité non-universelle du Responsive (encore plus suivant le type de site : e-commerce, institutionnel, etc.) Peut donner des indications ou des priorités sur la cible principale Compatibilité de l’éco-système - Quel back-office ? Quelle régie de pub ? Quel prestataire de paiement ? Evaluation de la compatibilité de chaque tiers avec une approche Responsive Adapter tôt sa solution d’analytics au RWD ou en changer - Fonctionnalité de regroupement par résolution ou par user-agent Être capable d’évaluer les évolutions de chaque canal séparément pour comparer aux dispositifs historiques BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 14
  15. 15. QUELQUES EXEMPLES CONCRETS E-commerce : O’neill clothing (http://www.oneillclothing.com) Redesign Responsive simple sur une base Magento, aucune indication d’un site mobile existant. Chiffre d’Affaires Taux de transformation iPhone : + 101,2% iPhone : + 65,7% Android : + 591,4% Android : + 407,3% Desktop + tablettes : + 41,1% Desktop + tablettes : + 20,3% Media : Time Inc. (http://www.time.com) Site web mobile existant mais peu optimisé Trafic tablette + smartphone : de 15 à 25% du trafic global Nombre moyen de pages visitées sur mobile : + 23% Bounce rate mobile : - 26% Visiteurs uniques : + 15% Temps passé sur une page : + 7,5% BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 15
  16. 16. CONTENT FIRST BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 16
  17. 17. LE RISQUE DE LA REFONTE Copier-coller de l’existant… Trop de texte Trop d’images Trop de fonctionnalités par page …non adapté au mobile. Difficultés de : Performance Hiérarchisation Repérage et navigation Affichage des contenus (images) Manipulation (saisie de formulaires) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 17
  18. 18. COMMENT STRUCTURER LE CONTENU Adopter une approche mobile-first Hiérarchiser Ne garder que l’essentiel Découper / structurer le contenu Limiter le nombre de fonctionnalités sur une même page Adapter L’accès à certaines fonctionnalités L’affichage de certains contenus La taille et le positionnement des éléments Ne pas supprimer de contenu : le mobile ignore certains éléments (par ex les images de fond) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 18
  19. 19. ETAPES CLÉS BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 19
  20. 20. LE PROCESSUS ITÉRATIF IDÉAL PAR GABARIT Gabarit 1 Validation Stabilisation Cadrage Structure de l’information Conception Wireframes Prototypage Validation pour dév Maquettes graphiques Intégration Développement Gabarit 2 Conception Wireframes BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 Prototypage 20
  21. 21. LE BINÔME INTÉGRATEUR-GRAPHISTE Dialoguer Echanger avec l’intégrateur en phase de conception Travailler avec l’intégrateur au fur et à mesure du montage pour affiner le design si besoin Tester très tôt Tester le plus tôt et le plus souvent possible les maquettes intégrées sur des terminaux et navigateurs représentatifs S’adapter Améliorer la méthode de conception au fil de l’eau Capitaliser sur le montage des premiers gabarits finalisés pour décliner ensuite (factorisation, réutilisation des composants) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 21
  22. 22. D’UN FRAMEWORK RWD À PHOTOSHOP (ET VICE VERSA) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 22
  23. 23. FRAMEWORKS Zurb Foundation 5 Twitter Bootstrap 3 Oui (depuis v4) Oui (depuis v3) Fluide, 12 colonnes Fluide, 12 colonnes 2 4 4 (en em) 3 (en px) Composants/Widgets Oui Oui Modulaire Oui Oui Support d’IE8 Non Oui Framework CSS SASS LESS Responsive images Oui Non Mobile-first Grille Nb de modes de grille Points de bascule par défaut Approche « no framework » Une combinaison de développements spécifiques et de composants spécialisés Une « stack » spécifique et adaptée à un projet Potentiellement plus difficile à mettre en place et à maintenir BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 23
  24. 24. WOPE Une solution de développement pour construire des sites web et mobiles universels • • • Une expérience utilisateur applicative grâce à l’utilisation de JS/CSS3/HTML5 Une adaptation automatique pour tous les mobiles et les tablettes Outils de Responsive Web Design (février 2014) pour cibler également le desktop Améliorez les performances de votre site • • • Technologie unique côté serveur Optimisation du code et retaillage des images Utilisation du cache Et réduire les coûts • BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 • Utiliser vos équipes actuelles et votre savoir faire 24 Gagnez du temps sur la partie test
  25. 25. WOPE 6 Gère désormais n’importe quel type de HTML Une bibliothèque de widgets graphiques compatible PC Un framework Responsive utilisant la grille fluide de Twitter Bootstrap 3 customisée pour un meilleur rendu sur desktop Un outil automatisé d’optimisation des performances d’un site Responsive : ressources, images BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 25
  26. 26. COMMENT APPRÉHENDER DANS PHOTOSHOP… Une structure HTML commune à différentes mises en page Une grille générale de 12 colonnes Une imbrication de composants structurés en 12 colonnes Des mises en page flexibles L’approche RWD et le choix d’un framework (Foundation 4 pour le cas pratique galerieslafayette.com) oblige le graphiste à appréhender ces différents points lors de la conception. BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 26
  27. 27. CAS PRATIQUE… Le site Responsive Web Design des Galeries Lafayette Ou… Tout ce que le graphiste doit garder en tête lors de la conception BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 27
  28. 28. UNE GRILLE DE 12 COLONNES La grille est structurée en 12 colonnes, quelque soit la largeur de la page. Construire la mise en page de chaque point de bascule en anticipant la fluidité de la mise en page entre ces points. > 1000 px BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 768 px – 1000 px < 767 px 28
  29. 29. UNITÉ DE MESURE = 1 COLONNE Le graphiste doit prendre en compte la colonne comme unité de mesure dont la largeur varie en fonction de la résolution d’affichage. Adieu le raisonnement en pixel. On parle donc en nombre d’unités / colonnes pour donner des indications de mesure et de placement dans X unités. On garde le pixel lorsque l’on veut une dimension très précise, en particulier pour les padding BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 4 colonnes Largeur 100% 4 colonnes Aligné à gauche 4 colonnes Aligné à droite 3 colonnes Centré 3 colonnes Centré 3 colonnes Centré 3 colonnes Centré 29
  30. 30. UNITÉ DE MESURE = 1 COLONNE Chaque composant est structuré en 12 colonnes. Dans Photoshop, transformer chaque composant structurant en objet dynamique pour le travailler de façon indépendante et le diviser en 12 colonnes peut s’avérer très utile. Le plug-in GuideGuide est essentiel pour diviser facilement chaque objet dynamique en 12 colonnes. 30
  31. 31. RESPECTER LE FLUX HTML 1 2 3 1 2 4 5 3 4 5 6 6 7 8 9 7 8 10 9 10 L’ordre des contenus doit être respecté sur les différentes mises en page. Si l’on change le positionnement d’un élément sur mobile, cela aura un impact sur le desktop et sur tablette, et vice versa. BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 31
  32. 32. FACTORISATION desktop mobile Créer des bibliothèques de composants pour garder une cohérence dans la charte et illustrer les adaptations nécessaires de certains éléments en passant d’une résolution à une autre. Ces bibliothèques peuvent être classées par thème (navigation, boutons, images, icôn es…) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 32
  33. 33. MISES EN PAGE FLEXIBLES : ADAPTER LES POSITIONNEMENTS BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 33
  34. 34. MISES EN PAGE FLEXIBLES : ADAPTER LES FORMES DES COMPOSANTS Sur desktop BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 Sur mobile 34
  35. 35. MISES EN PAGE FLEXIBLES : ADAPTER LES DIMENSIONS Pour un terminal tactile, il est nécessaire de prévoir des liens et des boutons plus accessibles (plus gros, plus espacés) Une solution est de créer des boutons plus gros pour les tablettes et le mobile. Il s’agit alors de trouver un juste milieu entre des éléments qui ne sembleront pas « grossiers » (car grossis) sur desktop tout en restant lisible et accessible sur support tactile. Surface moyenne accessible au doigt 40 px BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 35
  36. 36. GESTION DES IMAGES Les images concentrent toutes les problématiques liées au RWD… Résolution d’affichage et qualité Lisibilité : sujet, texte intégré dans l’image Direction artistique : recadrage, cropping Balise img HTML mal adaptée, utiliser PictureFill Problématique de SEO : la technique d’image Responsive doit rester performante pour le référencement La chaîne de production des images doit être revue dans son intégralité Format de l’image Compressions et qualités optimisées Dissociation du texte de l’image et affichage en CSS BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 36
  37. 37. LA RECETTE D’UN GABARIT Valoriser la recette Pendant et en fin de projet Sur les plans créatifs et techniques Par navigateur : les bugs sont souvent liés à la plateforme et la version d’OS La plupart des utilisateurs utilisent le navigateur par défaut de leur terminal Un environnement de recette adéquat « War room » : réunions de recette et de correction immédiate par le binôme développeur-graphiste Laboratoire de test (collection de vrais terminaux mobiles pour tester les comportements et anomalies propres à des terminaux spéciaux) Délégation de l’exécution des tests (cellule de tests) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 37
  38. 38. SEO ET ANALYTICS BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 38
  39. 39. SEARCH ENGINE OPTIMIZATION (SEO) « Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices. » Google Webmaster Central blog, juin 2013 BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 39
  40. 40. MESURE D’AUDIENCE ET STATISTIQUES (ANALYTICS) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 40
  41. 41. MESURE D’AUDIENCE ET STATISTIQUES (ANALYTICS) Google Nexus 4 iPhone 5 Google Galaxy Nexus Sony Xperia Z Samsung Galaxy SIII/SIV iPhone 3/4 iPad Données d’exemple BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 41
  42. 42. CONCLUSION Privilégier une approche UX Cadrage en amont Réflexion sur les contenus et les utilisateurs Approche pluridisciplinaire, travail collaboratif Recette soignée Le RWD perpétue la promesse d’universalité du Web BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 42
  43. 43. Le meilleur de la mode adapté à tous les types d’écrans http://www.galerieslafayette.com BACKELITE 043
  44. 44. LE MEILLEUR DE LA MODE ADAPTÉ À TOUS LES TYPES D’ÉCRANS Le groupe Galeries Lafayette est un acteur majeur du commerce en France opérant dans les secteurs de la mode, du luxe et de la beauté, de l’horlogerie bijouterie, du loisir et de la maison, et de l’alimentation. BACKELITE 044
  45. 45. OBJECTIFS CLÉS • Refonte du site e-commerce en Responsive Web Design pour une expérience utilisateur homogène sur tous les écrans • Renforcer l’image de modernité des Galeries Lafayette • Booster les ventes sur le canal digital BACKELITE LA RÉPONSE DE BACKELITE  Méthodologie UX, conception et réalisation de gabarits clés  Accompagnement dans la durée une fois le site mis en ligne, et transfert de compétences  Planning réactif  Approche tarifaire optimisée 045
  46. 46. PRINCIPAUX ENJEUX DU SITE • • • • • Accès rapide à l’ensemble du catalogue produit sur tous les écrans Consultation de fiches produit Commande Gestion cross-canal du panier Accès au compte client BACKELITE 046
  47. 47. RÉSULTATS CA x3 sur tablette, CA x4 sur mobile, Taux de conversion en augmentation sur desktop, et encore plus sur tablette et mobile L’accompagnement de Backelite a tenu ses promesses, les équipes ont tenu leurs engagements, voire un peu plus ! Thierry Leforestier, direction internet & e-commerce Galeries Lafayette
  48. 48. NOS PLUS BELLES RÉFÉRENCES
  49. 49. Contactez nous Backelite 7 rue de Bucarest 75008 Paris Tél : 01 73 00 28 00 contact@backelite.com

×