Le document présente des guidelines sur le design web responsive (RWD), qui consiste à adapter un site unique à différents types d'appareils (ordinateur, tablette, mobile) avec une mise en page fluide en fonction de l'espace d'affichage. Il aborde des concepts comme les points de rupture, l'importance de la performance et des tests, ainsi que des exemples concrets de succès, notamment dans le commerce en ligne. Enfin, il souligne l'importance d'une approche utilisateur (UX) et d'une collaboration pluridisciplinaire lors de la mise en œuvre du RWD.

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

2. 2
Agence leader pour un monde tactile
2

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

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. STARBUCKS.COM
BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013
Outil de simulation RWD : ami.responsivedesign.is
5

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. CONTENT FIRST
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013
16

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. 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. ETAPES CLÉS
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013
19

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. 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. D’UN FRAMEWORK RWD
À PHOTOSHOP
(ET VICE VERSA)
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013
22

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. MISES EN PAGE FLEXIBLES :
ADAPTER LES POSITIONNEMENTS
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013
33

34. MISES EN PAGE FLEXIBLES :
ADAPTER LES FORMES DES COMPOSANTS
Sur desktop
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013
Sur mobile
34

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. 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. 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. SEO
ET ANALYTICS
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013
38

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. MESURE D’AUDIENCE ET STATISTIQUES (ANALYTICS)
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013
40

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. 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. Le meilleur de la mode adapté à tous les types d’écrans
http://www.galerieslafayette.com
BACKELITE
043

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. 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. 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. 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. NOS PLUS BELLES RÉFÉRENCES

49. Contactez nous
Backelite
7 rue de Bucarest 75008 Paris
Tél : 01 73 00 28 00
contact@backelite.com