Test

www.miratech.
fr
contact@miratech.fr
Le Responsive Design

Livre Blanc - 2013

2 Qu'est-ce que le "Responsive Design" ?

Droits de reproduction et de diffusion

La reproduction ou la diffusion du contenu de ce document est autorise uniquement dans
un cadre pdagogique et sous rserve du respect des trois conditions suivantes :
Gratuit de la diffusion
Respect de l'intgrit des documents reproduits : pas de modification ni altration
daucune sorte
Citation claire et lisible de la source sous la forme suivante. Par exemple : "ce
document provient de Miratech : www.miratech.fr . Les droits de reproduction sont
rservs". L'adresse Internet du site de Miratech doit imprativement figurer dans la
rfrence

Toute reprsentation, diffusion ou reproduction non autorise d'une ou plusieurs pages ou
illustrations de ce document, par quelque procdure que ce soit, constituerait une
contrefaon sanctionne par le Code Pnal.

Livre Blanc - 2013

Miratech est une entreprise dergonomie web et de conception centre utilisateurs.
Les ingnieurs, ergonomes, dveloppeurs et graphistes de Miratech interviennent sur tous
les types dinterfaces numriques : sites web, intranets, logiciels, applications et sites
mobiles...
Nos services sorganisent en ples :
Etude : Mesure de lefficacit des interfaces (eye tracking, A/B testing, tests
utilisateurs)
Conception : Ralisation dinterfaces avec des mthodes centres utilisateurs
Dveloppement de sites et dapplications web et mobiles
Recette applicative mobile : Tests de qualification et recette des sites et applis
mobiles
Miratech est un pionnier du Responsive Design.

Jeremie Eskenazi - CEO de Miratech
Antoine Pez - Chef de projet User Experience
Solne Robert - Chef de projet User Experience

Miratech
en 2013

4500 utilisateurs tests

150 Projets internationaux

62% de croissance en 2012

3 labos quips dont 1
mobile

8 ans d'existence
Livre Blanc - 2013

A PROPOS DE MIRATECH ....................................................................................... 3
INTRODUCTION ........................................................................................................ 5
Qu'est-ce que le "Responsive Design" ? ............................................................................ 5
Pourquoi le Responsive Design ? ...................................................................................... 6
GUIDELINES .............................................................................................................. 8
Les blocs de contenu ......................................................................................................... 8
Penser en bloc ............................................................................................................................................... 8
Conserver un ordre logique ........................................................................................................................... 9
Adapter les blocs ......................................................................................................................................... 11
Les menus pour terminaux mobiles ..................................................................................13
Prsentation du menu en haut de page ...................................................................................................... 13
Menu en liste droulante <select> .............................................................................................................. 15
Dploiement du menu ("Toggle") ............................................................................................................... 16
Menu droulant par la gauche.................................................................................................................... 17
Menu avec ancre vers le footer ................................................................................................................... 19
Menu uniquement dans le footer ................................................................................................................ 20
Supprimer l'accs au menu ......................................................................................................................... 22
Les visuels ........................................................................................................................23
Supprimer les visuels trop importants ......................................................................................................... 23
Adapter les icnes d'un site ......................................................................................................................... 25
Les lments cliquables ....................................................................................................26
Rendre explicite les lments cliquables ..................................................................................................... 26
Etendre les zones d'interaction ................................................................................................................... 28
Adapter le nombre de fonctionnalits prsentes ...................................................................................... 30
Les fonctionnalits des terminaux mobiles ........................................................................31
Golocalisation et tlphonie ..................................................................................................................... 31
Attention aux animations ........................................................................................................................... 32
Gestion du clavier tactile et autres fonctions .............................................................................................. 33
Le dveloppement ............................................................................................................35
En bref ......................................................................................................................................................... 35
Grille relative ............................................................................................................................................... 35
Media-queries ............................................................................................................................................. 36
Penser Responsive Design ........................................................................................................................... 36
ETUDE D'UN CAS CONCRET ................................................................................. 37
Prsentation .....................................................................................................................37
Ladaptation du contenu ....................................................................................................38
Menu "toggle" ............................................................................................................................................. 38
Gestion des visuels ...................................................................................................................................... 39
Longueur de page ....................................................................................................................................... 40
Interactions ................................................................................................................................................. 41
Un dveloppement Responsive ? .....................................................................................42
Les limites du Responsive Design ....................................................................................43
CONCLUSION ......................................................................................................... 47
POUR LA SUITE ...................................................................................................... 47
Livre Blanc - 2013


Qu'est-ce que le "Responsive Design" ?
Le Responsive Design, aussi nomm Responsive Web Design, dsigne lensemble des
mthodes et des techniques permettant lutilisation optimale dun mme site web sur tout
type de terminaux.
Un site conu en Responsive Design pourra tre aussi bien consult sur smartphone que sur
ordinateur, en passant par la TV ou la tablette tactile (Figure 1). L'ide est de proposer une
rorganisation dynamique du site en fonction de la largeur de l'cran sur lequel il est
consult.
Historiquement, on attribue Ethan Marcotte, webdesigner et dveloppeur amricain, le 1
er

article sur le sujet du Responsive Web Design (le 25 mai 2010, sur le blog A List Apart ).
1

Figure 1 - Le site de Miratech est dvelopp en Responsive Design - http://miratech.fr/

1
Source : A List Apart - http://alistapart.com/article/responsive-web-design/
Livre Blanc - 2013

6 Pourquoi le Responsive Design ?
Pourquoi le Responsive Design ?
Les sites web sont consults sur des supports multiples, avec des tailles et rsolutions
diffrentes (Figure 2).
Afin de s'adapter tous ces terminaux, il est ncessaire de :
Proposer autant de versions du site que de priphriques
Prendre en compte le format paysage ou portrait pour les appareils mobiles
Maintenir plusieurs versions du site
Rfrencer les diffrentes versions
Le Responsive Design rpond l'ensemble de ces problmatiques.
En se basant sur la largeur de l'cran du terminal, la zone daffichage est change
dynamiquement grce aux feuilles de style (CSS3).
Pour savoir si un site a t dvelopp en Responsive Design, il suffit de modifier la taille du
navigateur et dobserver si le contenu se rorganise automatiquement (par exemple :
miratech.fr ).

Figure 2 - Les dix tailles d'crans les plus populaires en 2012 -
http://www.mobify.com/blog/global-screen-size-diversity
Livre Blanc - 2013

7 Pourquoi le Responsive Design ?

Avec le Responsive Design, l'exprience utilisateur est grandement amliore :
La conception en Responsive Design permet d'viter le dveloppement spcifique
dune version mobile.
L'utilisateur retrouve les mmes informations partout et a le sentiment d'avoir un site
vraiment adapt.
Les contraintes lies au cot de maintenance sont allges puisqu'une seule mise
jour fonctionne pour tous les terminaux.
Un meilleur rfrencement est possible car l'adresse du site est unique pour tous les
terminaux.
Il est ncessaire de passer du temps sur la mise en place d'un site en Responsive Design.
La phase de conception en amont est trs importante pour avoir un support abouti sur tous
les formats. Des connaissances techniques et ergonomiques pousses sont indispensables :
il ne suffit pas de "dplacer des blocs".

La suite de ce document va prsenter plusieurs guidelines propos des sujets suivants :

Les blocs de contenus : cest l'essence mme du Responsive Design, il faut penser
par "bloc de contenu"

Les menus pour terminaux mobiles : prsentation de 7 faons diffrentes
d'organiser son menu pour les appareils mobiles

Les visuels : explications propos de l'adaptation des visuels pour une vue mobile

Les lments cliquables : adaptation des lments d'interaction pour vue mobile et
rgles gnrales d'ergonomie sur mobile

Les fonctionnalits des terminaux mobiles : prcisions sur les fonctionnalits
spcifiques aux appareils mobiles et piges viter

Le dveloppement en Responsive Design

Enfin ce livre blanc prsentera un cas concret sur un site e-commerce rcapitulant les
guidelines prcdentes.

Livre Blanc - 2013

8 Les blocs de contenu

Les blocs de contenu
Penser en bloc
L'ide principale du Responsive Design est base sur des blocs.
Les blocs reprsentent un contenu ayant une hauteur et une largeur spcifique.

Voici quelques exemples de blocs pouvant apparaitre dans votre site :

Bloc "header", constitu du logo, du nom du site et d'ventuelles interactions
annexes

Bloc "index", constitu des dernires informations ou des produits que le site veut
mettre en valeur

Bloc "menu", permettant daccder aux pages principales du site. Voir la partie
suivante, Les menus pour terminaux mobiles pour plus d'informations

Bloc "annexe", constitu d'informations annexes et souvent situ sur le ct gauche
ou droit du site en vue sur ordinateur

Bloc "produit", pour un site e-commerce, constitu au moins d'une image, d'une
description, d'un prix et d'informations complmentaires

Bloc "commentaires" des consommateurs ou des visiteurs

Bloc "footer", constitu des liens secondaires du site et bien souvent du plan du site

Livre Blanc - 2013

Conserver un ordre logique

Figure 3 - Le site Css-tricks transite de 3 colonnes une seule sur la version mobile en gardant le mme
ordre de lecture - http://css-tricks.com/

Les blocs du site css-tricks (Figure 3) sont organiss diffremment sur les 3 vues :
ordinateur, tablette et smartphone.
Le bloc "header" est repr en violet, "index" en vert, "annexe1" en rouge, "annexe2" en bleu
et "footer" en orange. Le bloc "menu" n'est pas reprsent ici, il sera dtaill plus tard.

Livre Blanc - 2013

L'exemple suivant montre un site e-commerce avec un seul bloc annexe (Figure 4) :

Figure 4 - Le site Suitsupply a une structuration cohrente de nombreux sites e-commerce -
http://eu.suitsupply.com/on/demandware.store/Sites-INT-Site/en/Home-Show

La structure des blocs doit tre cohrente pour tous les terminaux. Suitsupply rordonne les
blocs en fonction de la taille de lcran.
Plus gnralement, il faut conserver un ordre logique sur tous les formats pour ne pas perdre
les utilisateurs.

Livre Blanc - 2013

Adapter les blocs
L'affichage des blocs pour un site "Responsive" doit tre adapt aux diffrents terminaux.
La version ordinateur est plus large. Elle a souvent plus de colonnes que les autres versions.
Les blocs doivent donc tre dplacs pour des crans plus petits.
La largeur de la page est rduite sur appareil mobile et sera compense par une
augmentation de la hauteur.
De plus il faut slectionner les blocs rellement pertinents sur smartphone.

L'exemple suivant (Figure 5) illustre ces deux points en montrant la grande taille de l'article
sur smartphone et la rduction des commentaires, cachs par dfaut.

Figure 5 - Css-tricks a choisi de rduire les commentaires sur sa version smartphone -
http://css-tricks.com/wrapup-of-navigation-in-lists/
Livre Blanc - 2013

Ceci est valable pour tous les sites : il faut adapter le contenu.
Bien que la visualisation du site Alsacreations soit trs agrable sur ordinateur, il
est difficilement consultable sur smartphone (Figure 7). Les pages sont trop
longues.

En Responsive Design, le formatage du contenu doit aussi tre diffrent.
La diminution de la largeur des blocs augmente le nombre de retours la ligne.
Le site css-tricks (Figure 6) a choisi de solutionner ceci en diminuant lgrement
la taille de la police sur smartphone. Le confort de navigation est donc conserv
pour l'utilisateur.

Figure 6 - La taille du texte est diffrente selon la version du site (chelle 1 pour 1) -
http://css-tricks.com/

Cependant, il faut aussi faire attention ne pas configurer la taille que sur
smartphone puisque le texte pourrait tre trop grand sur ordinateur. A l'inverse, un
texte trop petit sur ordinateur pourra tre difficilement vu sur smartphone. Il faut
grer les deux cas sparment.

Le Responsive Design ne se limite donc pas au simple dplacement de blocs
pour tre pertinent.

Figure 7 - Le site Alsacreations sur mobile est trop long

- http://www.alsacreations.com/

Livre Blanc - 2013

13 Les menus pour terminaux mobiles
Les menus pour terminaux mobiles
Etant donn la petite taille des crans mobiles, il est ncessaire de repenser les menus
initialement dvelopps pour ordinateur.
Dans cette partie, plusieurs types de menus adapts au mobile sont illustrs et prsents, en
dtaillant leurs points forts et points faibles.
Ces exemples sont tirs des excellents sites Design Spartan (http://designspartan.com) et
Brad Frost (http://bradfrostweb.com/blog).

Prsentation du menu en haut de page

Figure 8 - The Happy Bit conserve son menu en haut de page - http://thehappybit.com/

Livre Blanc - 2013


Facile mettre en place
Facilement identifiable
Compltement personnalisable
Pas de dpendance JavaScript
Utilisation de beaucoup despace en
hauteur (prcieux sur un mobile)
Pas extensible
Problmes de compatibilit

La prsentation du menu en haut de page est une des solutions les plus simples (Figure 8).
Ce type de menu permet une mise en place trs facilite puisqu'il y a peu de changements
de code. Ainsi, en restant dans le "header" ou en tte du site, le menu est trs facilement
identifiable tout en restant personnalisable en termes de design. Un autre avantage est que
le JavaScript n'intervient pas ce qui facilite la compatibilit.
Ce type de mise en page rduit considrablement la place du site en version smartphone.
Ainsi, le menu est gnralement ajust et format d'une certaine faon, ce qui rend dlicat
l'ajout de nouvelle section ou la lecture du menu avec une autre typographie (comme cela
peut arriver sur les tlphones Android).

Nous conseillons de choisir ce type de formatage de menu pour les sites possdant un menu
de taille limite (infrieur 5 items), tels que les sites vitrines ou les blogs.

Livre Blanc - 2013

Menu en liste droulante <select>

Figure 9 - Le site Smashing convertit ses 2 menus en une liste droulante -
http://www.smashingmagazine.com/

Libre de la place dans le header
Bonne compatibilit
Manque de personnalisation
Peut tre droutant
Dpendance lgre JavaScript

La transformation du menu en liste droulante, grce la commande <select>, est une trs
bonne faon d'adapter les menus (Figure 9).
Un menu important peut tre intgr sans prendre trop de place.
De plus, la maintenance est facilite car des items peuvent tre facilement ajouts. Ce type
de menu doit ncessairement tre situ dans le "header" ce qui lui permet d'tre facilement
identifiable l'aide de l'icne ou du libell associ. Enfin, l'utilisation du <select> permet une
bonne compatibilit puisque tous les navigateurs mobiles intgrent nativement une
interaction optimise avec les listes droulantes.
Cependant le menu utilisera forcement l'affichage du navigateur par dfaut. On fait donc
abstraction des couleurs et de la typographie.
Enfin le JavaScript est ncessaire pour modifier un menu de type liste, ce qui peut parfois
poser des problmes de compatibilit.
Livre Blanc - 2013

Nous conseillons de choisir ce type de formatage de menu trs efficace pour la
plupart des sites. Il intgre une bonne compatibilit avec un dveloppement minimal, tout
en permettant une maintenance efficace et une gestion de la place intressante.

Dploiement du menu ("Toggle")

Figure 10 - Starbucks intgre un menu "Toggle"- http://www.starbucks.fr/

Elgant
Assez lourd
Problme de compatibilit
Peut tre droutant
Dpendance JavaScript

Livre Blanc - 2013

La mise en place d'un menu "toggle", ou menu bascule (Figure 10), ressemble beaucoup
celui prsent prcdemment. En effet, il libre de la place dans l'en-tte du site et reste
facilement identifiable.
L'ouverture de ce menu est effectue de manire lgante puisqu'une animation permet une
personnalisation bien plus grande.
Par contre, lanimation d'ouverture de menu peut ralentir la page. De plus, la typographie ou
l'utilisation de JavaScript peuvent poser des problmes de compatibilit. Enfin, comme
prcdemment, il est ncessaire d'associer un bouton affordant pour rvler la prsence
d'un menu, surtout si la prsentation diffre de la version ordinateur ou tablette.

Nous conseillons de choisir ce type de formatage de menu pour les sites ayant un
design raffin. Ce menu permet d'avoir une prsentation trs lgante et personnalise,
mais qui peut ne pas convenir tous les terminaux.

Menu droulant par la gauche

Figure 11 - Facebook intgre un menu droulant par la gauche sur mobile - https://fr-fr.facebook.com/

Livre Blanc - 2013


Elgant
Permet l'intgration de trs grand menu
Assez lourd
Peut tre facilement droutant
Dpendance JavaScript

Le menu droulant par la gauche est utilis par Facebook (Figure 11). Il permet laffichage
dun menu trs important sans perturber l'exprience utilisateur.
Cependant, ce menu est bien plus lourd que le prcdent et prsentera de nombreux
problmes de compatibilit.

Ce menu permet d'avoir une prsentation trs lgante et personnalise, mais qui peut ne
pas convenir tous les terminaux.

Livre Blanc - 2013

Menu avec ancre vers le footer

Figure 12 - Grey Goose utilise le systme d'ancrage sur le footer pour faire apparaitre son menu -
http://www.greygoose.com/our-vodkas/original-vodka#navigation/

Trs droutant
Pas d'adquation avec les normes
Utilisation de beaucoup d'espace en
hauteur

Un menu intgrant une ancre vers le footer, c'est dire redirigeant vers le bas du site au clic
sur un bouton menu, est une solution simple mettre en place (Figure 12).
Livre Blanc - 2013

Ce menu est ainsi personnalisable et ne dpend pas de JavaScript. Si l'intitul ou l'icne du
menu est suffisamment clair, le menu sera alors facilement identifiable.
Cependant l'utilisateur sera trs perturb de trouver un menu en bas de page. Ceci rompt
avec toutes les normes existantes et la longueur des sites pour smartphones n'arrange rien.
Enfin un espace important sera occup et des problmes de compatibilit pourront aussi
apparaitre.

Nous ne conseillons surtout pas de choisir ce type de formatage de menus, trop
susceptible de dsorienter l'utilisateur. En effet, une fois arriv sur le menu en bas de page, il
est difficile de revenir en arrire puisqu'aucun indicateur prcis n'indique la position de
l'utilisateur. Ce type dinteraction est mal compris des utilisateurs.

Menu uniquement dans le footer

Figure 13 - Pears intgre un menu situ dans le footer pour smartphone, sans interaction possible dans le
header - http://pea.rs/
Livre Blanc - 2013


Trs droutant
Trs peu identifiable
Utilisation de beaucoup d'espace en
hauteur

Le formatage de menu uniquement dans le footer prsente les mmes dfauts que le
prcdent (Figure 13).
En plus, il n'y a aucune interaction possible dans le header pour trouver le menu, ce qui le
rend trs peu identifiable. Ceci est extrmement droutant pour les utilisateurs,
particulirement dans des sites mobiles ayant une trs grande hauteur de page.

Nous ne conseillons pas du tout ce type de formatage de menus. Il retire au menu sa
fonction premire : tre vu pour accder la navigation du site. De plus, il est toujours trs
mal trouv par les utilisateurs.

Livre Blanc - 2013

Supprimer l'accs au menu

Figure 14 - Sur mobile, le menu de authentic jobs n'apparait plus - http://www.authenticjobs.com/

Supprime du contenu et des
fonctionnalits sur mobile
Trs droutant
Pas du tout identifiable
Maintenance plus complique

La suppression pure et simple du menu (Figure 14) permet de s'affranchir de nombreux
problmes... premire vue. Au niveau du dveloppement, toute la procdure est simplifie.
De plus, le gain de place est vident, ce qui est avantageux pour une version smartphone.
Cependant ce choix de dveloppement n'est pas sans consquence. L'utilisateur perd
normment de fonctions entre la version ordinateur ou tablette et celle pour smartphone.
Malgr le fait que le site ait l'air plus simple, la maintenance est plus complique puisque la
navigation sur smartphone est diffrente de celle sur ordinateur.

La suppression du menu est un rel parti pris, nutiliser que pour les sites ayant un contenu
ou un nombre de fonctionnalit trs rduits.
Dans les autres cas, la volont de simplicit est louable mais l'exprience utilisateur en ptit.
Livre Blanc - 2013

23 Les visuels
Les visuels
Supprimer les visuels trop importants
La prsentation des images doit tre adapte au support utilis.
Sur ordinateur les images donnent du dynamisme la page et la rendent beaucoup plus
attractive pour les utilisateurs.
En revanche sur les smartphones lespace disponible est plus rduit.

De plus, la navigation en situation de mobilit engendre des besoins diffrents :
Laccs direct au contenu recherch devient primordial
Les utilisateurs auront moins tendance sattarder sur des photos sur un petit cran
de smartphone que sur un cran dordinateur
Les connexions plus faibles en situation de mobilit ncessitent lutilisation dimages
ou vidos de poids rduits afin dtre charges plus rapidement

Il est donc ncessaire de supprimer les images de trop grande taille sur la version
smartphone.

Les deux sites prsents ci-dessous sont de bons exemples o les visuels de la version
ordinateur ont t retirs de la version mobile (Figure 15, Figure 16).

Livre Blanc - 2013

24 Les visuels

Figure 15 - Le site de la WWF supprime l'image principale en vue mobile - http://3200tigres.wwf.fr/

Figure 16 - Touchtech voit son image d'accueil disparaitre en version smartphone -
http://touchtech.co.nz/

Livre Blanc - 2013

25 Les visuels
Adapter les icnes d'un site
Les icnes prsents sur le site peuvent tre amens tre adapts, voire supprims en
fonction de la place quils occupent et de leur importance.
Dans lexemple qui suit (Figure 17), les icnes du menu ont surtout une fonction
dcorative : les symboles utiliss napportent pas de vritable aide la comprhension
des libells quils accompagnent. Ces icnes ont donc t totalement supprims dans la
version smartphone.

Figure 17 - Sur le site de fork, les icnes sont supprims en vue mobile - http://www.fork-cms.com/

Dans un souci de gain despace, il parait tentant de conserver uniquement les icnes en
supprimant les libells associs.
Cette pratique est fortement dconseille car les utilisateurs peuvent mal interprter les
icnes qui lui sont prsents. Elle peut tre utilise uniquement pour des icnes trs
standards, connus par la population cible du site (par exemple, licne disquette pour
sauvegarder).
Livre Blanc - 2013

26 Les lments cliquables
Les lments cliquables
Rendre explicite les lments cliquables
Les spcificits de chaque support impliquent des modes dinteractions diffrents.
Lutilisation de la souris sur lordinateur permet dinformer lutilisateur et de le guider.

Exemples :
La transformation du curseur en sablier fait comprendre lutilisateur que son action
a bien t prise en compte, et quil doit patienter
Lutilisation de la fonction survol de la souris permet dindiquer les liens
Le vrai challenge du Responsive Design est dindiquer lutilisateur les interactions
possibles quel que soit le support.

Dans lexemple qui suit (Figure 18), le menu prsent sur ordinateur subit des modifications
explicites :
Le curseur se transforme en main
Lors du survol, il y a une transformation de la couleur de longlet concern

Figure 18 - Le menu subit des modifications visuelles au survol de la souris - http://forefathersgroup.com/
Livre Blanc - 2013


Ce type de guidage nexiste plus sur les interfaces tactiles et doit donc tre remplac par un
quivalent permettant dindiquer les interactions possibles : elles doivent tre affordantes.
Laffordance est un concept cl en ergonomie qui dsigne la capacit dun lment
suggrer sa propre utilisation.
Sur l'exemple ci-dessous, le menu prend la forme de plusieurs boutons en vue smartphone,
qui suggre lutilisateur la possibilit de cliquer dessus (Figure 19).

Figure 19 - Le site Forefathers a modifi son menu pour les versions mobiles -
http://forefathersgroup.com/

Il est primordial que lutilisateur comprenne trs facilement avec quels lments de
linterface il peut interagir, et de quelle faon.
Sur ce sujet, nous recommandons la lecture de la publication de Miratech :
Comment faire une appli ou un site mobile qui marche ?

Livre Blanc - 2013

Etendre les zones d'interaction
La souris est un dispositif de pointage trs prcis. Au contraire, les doigts, utiliss sur les
interfaces tactiles, ont une prcision bien moindre et entrainent trs frquemment des
erreurs de manipulation.
Pour prserver lutilisabilit, il est ncessaire que toutes les zones dinteractions soient
agrandies pour les interfaces tactiles.
Afin d'avoir un bouton qui soit utilisable, nous conseillons d'avoir une interaction mesurant au
minimum 44 points de largeur et de hauteur
2
. Le point est une unit indpendante de la taille
de l'cran. Par exemple, il correspond 2 pixels sur iPhone 4 (avec cran Retina) contre 1
pixel sur les iPhones de gnration prcdente.

Dans l'exemple suivant, le bloc est constitu de nombreux liens trop petits (Figure 20). Ces
liens sont peu adapts au smartphone et sont difficilement cliquables.

Figure 20 - Le bloc "annexe" de la vue mobile de Alsacreations peut mener des erreurs, les liens sont
trop petits - http://www.alsacreations.com/

Dans les exemples suivants, les boutons ont t largement tendus afin de pouvoir tre
taps plus facilement et rduire le risque derreur (Figure 21, Figure 22). Les zones
d'interaction occupent toute la largeur de lcran du smartphone.

2
Guideline Apple -
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Charact
eristics/Characteristics.html#//apple_ref/doc/uid/TP40006556-CH7-SW1
Livre Blanc - 2013


Figure 21 - Earth hour a modifi son menu pour qu'il soit plus facilement cliquable en version mobile -
http://earthhour.fr

Figure 22 - Pour Alsacreations, les boutons du menu prennent toute la largeur de l'cran sur smartphone
- http://alsacreations.com

Livre Blanc - 2013

Adaptez vos interactions aux diffrentes versions.
Ne partez pas forcment de la vue smartphone pour crer vos lments cliquables. Le
risque est de grossir lexcs ces interactions et dobtenir un rsultat qui parait ridiculement
gros lorsquil est consult sur ordinateur.

Adapter le nombre de fonctionnalits prsentes
Le nombre de fonctionnalits prsentes doit tre adapt au support.
Le retrait d'lments peut tre ncessaire pour conserver une navigation simple sur une
version smartphone. De plus, certains contenus ne sont plus pertinents sur smartphone, tels
que des longs dossiers ou formulaires.

Exemples :
La souscription au Boston Globe a t supprime sur smartphone (Figure 23). Cette
fonctionnalit est moins susceptible dtre utilise en situation de mobilit
Starbucks n'a conserv que la fonction "Trouver une boutique" qui peut tre utile en situation de mobilit
situation de mobilit (
Figure 24)

Livre Blanc - 2013

31 Les fonctionnalits des terminaux mobiles
Figure 23 - Boston Globe a supprim des boutons de son menu en vue smartphone -
http://bostonglobe.com/

Figure 24 - Le site de Starbucks a supprim le lien "Service client" sur son menu secondaire pour les
versions mobiles - http://www.starbucks.fr/

Les fonctionnalits des terminaux mobiles
Golocalisation et tlphonie
Alors que certaines fonctionnalits sont supprimes sur version mobile, dautres peuvent
apparatre.
La golocalisation est un exemple de fonctionnalit spcifique lie aux smartphones et
tablettes.

Dans lexemple du site spigotdesign.com, la fonction Find us (nous trouver) est
transforme en un lien vers lapplication de Google Maps, qui utilise alors les donnes de
golocalisation (Figure 25). Cette fonction peut permettre de fournir un itinraire lutilisateur
en fonction de sa position.
La fonction dappel direct est une seconde fonctionnalit propre aux smartphones qui permet
damliorer lutilisabilit du site, comme la mis en avant le site spigotdesign.com (Figure 25).
Livre Blanc - 2013


Figure 25 - Le site spigot a ajout les fonctions "Call us" et "Find us" sur la vue pour terminaux mobiles -
http://spigotdesign.com/

N'ajoutez pas de la golocalisation s'il n'y a aucun intrt cela. Ceci ne serait pas utilis
par le public et surchargerait alors inutilement le site.

Attention aux animations
Les animations sur ordinateur permettent de dynamiser les pages mais ont tendance
ralentir le chargement sur smartphone. Leur utilisation est donc dlicate et doit tre justifie
par un rel but.
Certaines animations esthtiques peuvent souligner limage de marque, mais peuvent au
contraire la ternir si elles ralentissent la navigation.
Les carrousels peuvent tre intressants mais doivent absolument pouvoir tre contrls par
les utilisateurs : une fonction de pause et de navigation sont obligatoires.

Livre Blanc - 2013

Gestion du clavier tactile et autres fonctions
Le clavier tactile prend beaucoup de place sur lcran des smartphones.
Par exemple, le navigateur Safari sur iPhone 3GS, 4 ou 4S permet d'obtenir une taille de
lecture du site gale 42% de l'cran lorsque le clavier tactile est ouvert.

Figure 26 - La page Google vue sur le navigateur Safari de l'iPhone 4S

Lors d'un remplissage de formulaire, l'cran disponible pour visualiser la page peut tre
rduit jusqu' un tiers de la taille.
Une attention particulire doit tre porte sur plusieurs points :
Il faut pouvoir visualiser un formulaire dans un espace d'environ 200 pixels
Les libells ne doivent pas se situer gauche du champ pour un smartphone (d au
zoom sur le champ de remplissage de la majorit des navigateurs)
Il faut rappeler le libell lintrieur ou juste au dessus du champ

Lexemple suivant (Figure 27) prsente trois cas de figure :
Le premier cran prsente un formulaire d'un site qui n'est pas en Responsive Design
: on ne sait pas quoi correspondent les champs
Le deuxime cran montre un site en Responsive Design qui a conserv les champs
gauche pour son formulaire : on distingue alors trs mal les libells
Le troisime cran suit une bonne pratique ergonomique sur smartphone : le
libell est rappel dans le champ

Livre Blanc - 2013


Enfin pensez aux diffrents types de smartphones et de navigateurs.
Sur iPhone, le navigateur Chrome ne laissera que 33% de l'cran accessible pour la
page Internet (Figure 28)
Sur Android, mme les plus importants smartphones comme le Samsung Galaxy
Note II ne laissent qu'entre 40% et 50% de l'cran visible selon les fonctionnalits

Figure 28 - Le navigateur Chrome et le navigateur Safari sur iPhone.
Figure 27 - Trois crans de formulaires sur smartphone
Livre Blanc - 2013

35 Le dveloppement
Le dveloppement
En bref

Le Responsive Design se base sur 2 technologies : les feuilles de style en CSS3 et le
JavaScript.
Le JavaScript permet d'ajouter de l'interaction dans la page, comme des fondus ou du
changement de contenu dynamique.
Le CSS3 permet de dvelopper :
le systme de grille relative
le systme de media-queries

Grille relative
L'ide principale est de structurer son site par rapport une grille prtablie (Figure 29). On
va tablir des tailles relatives pour nos lments par rapport cette grille. Par exemple, un
site ayant une largeur de 960 pixels peut tre dcoup en 12 colonnes de 70 pixels avec un
espace de 10 pixels.

Figure 29 - Exemple de grille

Il faut donc adapter le contenu cette grille afin de faciliter la relativit, c'est dire la taille en
pourcentage de chaque contenu. Ici le contenu 1 occupe 75% de la page et le contenu 2
occupe 24% de la page (le reste correspondant aux espaces non-occups). Ceci est la base
du Responsive Design puisque l'on ne rflchit plus en termes de pixels.
960 pixels
Contenu 1 Contenu 2
Livre Blanc - 2013

36 Le dveloppement

Media-queries
La technologie "media-queries" permet d'adapter des feuilles de style aux terminaux utiliss.
On peut ainsi crer des "points de rupture" ou "breakpoints" qui vont permettre la
rorganisation des blocs en fonction de la largeur de l'cran. De plus, les media-queries
permettent d'affecter de nombreuses options certains terminaux, comme la taille du texte,
la gestion des images ou encore la modification des menus.
Ainsi la mise en place de media-queries allie une grille dynamique permet une relle
adaptation du site tout type de support.

Penser Responsive Design
Pour avoir l'approche Responsive en dveloppant, il faut :
Travailler sur des donnes relatives
Avoir une grille bien dfinie
Rflchir la structuration du site en amont
Vrifier le rendu sur diffrentes tailles d'crans pour valider l'adaptation tous
Eviter d'intgrer du Flash qui exclut une grande partie des utilisateurs

Par ailleurs, en termes d'accessibilit, le Responsive Design est intressant puisque les
modifications sont principalement lies la modification des feuilles de style (CSS3). Le
code HTML reste identique et ne perturbe donc pas l'accessibilit, par rapport un
dveloppement standard.

Livre Blanc - 2013

37 Prsentation

Prsentation
Pour illustrer les bonnes pratiques et piges viter, voici l'analyse dun cas concret : le site
topachat.com.
Le contenu trs riche de ce site e-commerce rend la tentative dadaptation du site en
Responsive Design ardue. Ltude de ce site rvle donc la fois les piges viter, mais
galement les limites du Responsive Design.

Dans l'illustration suivante, on voit qu'il y a une relle volont d'adaptation du thme du site
sur les diffrentes plateformes (Figure 30).

Figure 30 : Les trois versions du site topachat.com
Livre Blanc - 2013

38 Ladaptation du contenu
Ladaptation du contenu
Menu "toggle"

Figure 31 - Le menu du site topachat volue selon les versions -
http://www.topachat.com/accueil/index.php

Le site topachat a choisi un menu "toggle", particulirement bien adapt (Figure 31) :
Il vite de trop rduire la taille des libells du menu
Les zones d'interaction sont suffisamment grandes
La charte graphique de ce menu est en cohrence avec le site
Le bouton utilis pour appeler le menu fait preuve d'une grande affordance par la
prsence de la petite flche (indiquant lutilisateur quil est possible de dplier la
liste dlments)

Livre Blanc - 2013

Gestion des visuels
Le grand visuel prsent en haut de la page daccueil n'est pas visible sur smartphone. Il a
t supprim afin de librer de lespace et dviter un temps de chargement trop important
avec une connexion faible.
Les images de produit ont t conserves et ont une taille suffisamment grande. Les images
des marques de la section "Top des marques" sont suffisamment visibles, mais occupent un
espace trop important. Il aurait t plus judicieux de cacher cette section sous un lien
spcifique (Figure 32).
Les visuels des "guides et assistances" sont bien trop encombrants, surtout sur la version
mobile (Figure 32). De plus, la taille du texte n'a pas t adapte au smartphone, le rendant
difficilement lisible.

Figure 32 - Les visuels ne sont pas tous bien adapts sur le site topachat
"Guides et assistances"
"Top des marques"
Livre Blanc - 2013


Longueur de page
Le critre portant sur la longueur de page na pas t respect (Figure 33). Il
semble que les concepteurs aient tent de laisser tous les lments du site sur la
version smartphone. Il en rsulte une page extrmement longue qui ncessite un
scroll dmesur de la part de lutilisateur.

Par exemple la prsence des trop nombreux guides et assistants alourdit
beaucoup la version smartphone alors quelle est trs peu susceptible dtre
consulte en situation de mobilit (Figure 32).

Figure 33 - La page d'accueil du site topachat.com est trop longue sur smartphone
Livre Blanc - 2013

Interactions
Dune faon plus gnrale, la navigation na pas t repense pour le mobile.

Par exemple au cours de la recherche dun article, lutilisateur est amen configurer
diffrents filtres laide de listes droulantes ou de champs de saisie (Figure 34). Comme le
montre lillustration, ces diffrents filtres ont t rarrangs, repositionns mais non adapts
au tactile. Les zones de pointage sont trs restreintes, et sont difficilement utilisable, elles
engendrent un taux derreur lev.

Figure 34 - Les zones d'interaction avec les filtres ne sont pas adaptes sur mobile

On voit ainsi deux aspects extrmes :
D'un ct, il y a des zones bien trop grandes gchant l'espace disponible
De l'autre, des parties sont clairement inaccessibles

Livre Blanc - 2013

42 Un dveloppement Responsive ?
Un dveloppement Responsive ?
Au final, le site topachat a simplement dplac des blocs.
Linterface sur ordinateur a t transpose sur smartphone en tombant dans la plupart des
piges. Le rsultat est le suivant : une version sur ordinateur dgrade et une version mobile
non finalise. Cette situation montre bien que l'on ne peut pas raliser un site abouti sans
une bonne connaissance de la conception Responsive.
Pire encore, tout le site n'est pas dvelopp de la mme faon. Les deux icones du header
(Figure 35) envoient vers deux pages qui ne sont pas dveloppes en Responsive Design
(Figure 36). Ce qui est grave ici, c'est qu'on affecte le tunnel d'achat, soit le cur de ce site
e-commerce. En n'amliorant pas ces pages, c'est le processus d'achat qui est mis en pril.

Figure 35 - Les deux icnes de topachat reprsentant les pages "Mon compte" et "Panier"

Figure 36 - Les fentres "Mon profil" et "Panier" ne sont pas adaptes au smartphone (obligation de
zoomer la main)

Ce site de e-commerce s'est lanc dans le Responsive Design, ce qui est louable tant
donn la quantit d'articles qu'il contient. Mais il rat sa conversion.
Livre Blanc - 2013

43 Les limites du Responsive Design
Les limites du Responsive Design

Ltude de cas prsente prcdemment soulve la question suivante : tous les sites
peuvent-ils tre adapts en Responsive Design ?
Techniquement, il nexiste pas de contraintes empchant le dveloppement en Responsive.
La pertinence dun tel dveloppement doit donc tre value en amont.
Le Responsive Design est idal pour les sites de prsentation de contenu qui proposent un
nombre de fonctionnalits limit. Mais pour certains sites, ladaptation est complexe, allant
jusqu la ncessit de concevoir des versions trs diffrentes pour chaque famille dcran.
Dans ces cas, la version mobile na souvent plus grand-chose voir avec le site ordinateur.
Dans de tels cas, la charge du travail dadaptation est telle quil semble prfrable de
concevoir un site ddi pour les mobile (et/ou une application).
Les grands noms dInternet qui possdent les ressources ncessaires ont chacun
dvelopp des versions mobiles de leur site (Figure 37).

Figure 37 : Le site classique et le site mobile de Google

Livre Blanc - 2013

Le site Google par exemple propose dans sa version mobile des fonctionnalits diffrentes
rpondant aux besoins engendrs par la mobilit (Figure 38, Figure 39).

Figure 38 - La version mobile de Google

Figure 39 - Utilisation des donnes de
golocalisation du smartphone

Les donnes de localisation sont utilises afin de fournir lutilisateur des informations
pertinentes et rpondant ses besoins immdiats. Dans Google Maps, la version mobile
identifie directement le lieu o se situe l'utilisateur (Figure 40).

Figure 40 - Les deux sites de Google map - https://maps.google.fr/
Livre Blanc - 2013

Plus gnralement, lapplication Google Maps adapte les fonctionnalits mises en avant au
contexte dutilisation (Figure 41).

Figure 41 : Adaptation des fonctionnalits de Google Maps
https://maps.google.fr/maps?hl=fr&tab=wl&authuser=0

De mme, le site de Facebook prsente des pages trs charge sur la version ordinateur qui
ont t repenses pour la version mobile (Figure 42).

Figure 42 : les pages d'accueil des sites ordinateur et mobile de Facebook - https://www.facebook.com
Le bloc fil des actualits a t supprim pour allger la version mobile et lensemble des
fonctionnalits prsentes sur la colonne de gauche sont caches par dfaut (Figure 43).
Livre Blanc - 2013


Figure 43 : principales diffrences entre les pages d'accueil des 2 versions

Enfin le site mobile intgre de nouvelles fonctionnalits comme la fonction A proximit
qui utilise les donnes de golocalisation des smartphones (Figure 44).

Figure 44 : Ajout de la fonctionnalit "A proximit" sur la version mobile
Livre Blanc - 2013

Certaines modifications entre les versions des diffrents sites prsents dans cette partie
auraient pu tre apportes dans le cadre dune adaptation en Responsive. Toutefois, une
version ddie a t prfre en raison des bouleversements oprs dans la structure du
site.
Enfin le Responsive Design engendre souvent le chargement inutile dun code HTML/CSS.
Le code tant similaire pour tous les supports, tous les lments sont tlchargs, mme si
certains napparaissent pas lcran des smartphones.
Le dveloppement dune version spcifique allge permet de rsoudre ce problme.

Le Responsive Design est un processus de dveloppement d'avenir. Avec la multiplicit des
nouvelles interfaces, le Web est partout et il doit tre adaptable et adapt ! Le responsive
Design permet en outre de rpondre aux problmatiques de maintenance et de
rfrencement.
Concevoir en Responsive Design ne se limite pas qu'au dplacement des blocs de contenu.
Il faut avoir une rflexion pousse sur les buts de chaque terminal auquel on s'adresse. Doit-
on fournir toutes les fonctionnalits du site sur smartphone ? Peut-on profiter de la
golocalisation ? A qui s'adresse la version du site sur ordinateur et sur smartphone ? Quel
type de public est cibl ?
Aprs avoir tudi toutes ces questions, il faut viter plusieurs piges :
Faire attention la longueur de la page sur les versions mobiles
Choisir un formatage de menu efficace (la liste droulante ou le menu "toggle" sont
les plus intressants)
Slectionner les visuels conserver
Prter attention aux zones d'interactions tactiles
Bien grer les lments intgrs dans les navigateurs mobiles
Valider les choix de dveloppement selon les terminaux cibls

Miratech vous aide sur vos projets de responsive design :
Conception et dveloppement de votre site, en tenant compte des bonnes
pratiques et en utilisant des mthodes de conception centre utilisateurs
Recette de votre site en responsive design (voir ci-dessous)
Livre Blanc - 2013

La recette d'un site responsive est souvent complexe. Les terminaux mobiles voluent
constamment. De nouvelles versions arrivent chaque mois avec de nouvelles
caractristiques techniques.
Taille de l'cran, OS, puissance des processeurs, fonctionnalits... tout change. C'est ce
qu'on appelle la "fragmentation technologiques" des terminaux mobiles.
Dans ces conditions, comment s'assurer que votre site responsive fonctionne sur tous
les quipements ? Comment valider si votre site ou votre application est conforme au
cahier des charges ?
Miratech propose de tester votre service mobile sur la plupart des quipements mobiles
du march dans le cadre de son offre de recette mobile.

Ecrivez-nous pour vos projets web et mobiles ou simplement pour nous dire que vous
avez apprci la lecture de ce livre blanc !
Cline Denis - contact@miratech.fr - 01.53.34.65.59

Test

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Test

Încărcat de

Drepturi de autor:

Formate disponibile

www.miratech.

S-ar putea să vă placă și