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

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, 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.


4

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 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.

6

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.

Source : infographie Splio, 2012

7

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).

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

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…)


9

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.

Source : chiffres monde nov ‘13, Statcounter

10

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

11

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


12

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


13

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


14

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%

15

CONTENT FIRST

16

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)


17

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)


18

ETAPES CLÉS

19

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


Prototypage

20

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)


21

D’UN FRAMEWORK RWD
À PHOTOSHOP
(ET VICE VERSA)

22

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

23

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
•

•

Utiliser vos équipes actuelles et votre savoir
faire
24
Gagnez du temps sur la partie test

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

25

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.


26

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


27

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


768 px – 1000 px

< 767 px

28

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


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

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

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.

31

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…)


32

MISES EN PAGE FLEXIBLES :
ADAPTER LES POSITIONNEMENTS


33

ADAPTER LES FORMES DES COMPOSANTS

Sur desktop


Sur mobile

34

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

35

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


36

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)


37

SEO
ET ANALYTICS

38

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


39

MESURE D’AUDIENCE ET STATISTIQUES (ANALYTICS)


40

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


41

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


42

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 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

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

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

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

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

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

Ähnlich wie Responsive Web Design : best practices et retour d'expérience de Backelite et les Galeries Lafayette (20)

Mehr von Idean France

Mehr von Idean France (20)

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