Responsive Design Miratech

Le Responsive Design
www.miratech.fr contact@miratech.fr
Livre Blanc - Mars 2013
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.
Qu'est-ce que le "Responsive Design" ?
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, etc. Nos services sorganisent en trois ples : Etude : Mesure de lefficacit des interfaces (eye tracking, A/B testing, tests utilisateurs) Conception : Ralisation dinterfaces adaptes aux comportements des utilisateurs Dveloppement : Dveloppement de sites et dapplications mobile et tablette
Miratech est prsent un acteur important dans le domaine du Responsive Design.
Quelques chiffres en 2013

4500 utilisateurs tests 150 Projets internationaux 62% de croissance 3 labos quips dont 1 mobile 8 ans d'existence
Jeremie Eskenazi - CEO de Miratech Antoine Pez - Chef de projet User Experience Solne Robert - Chef de projet User Experience
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 CONTACT ................................................................................................................ 47

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 1er 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/
Source : A List Apart - http://alistapart.com/article/responsive-web-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
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.
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
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.
Le Responsive Design 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.
10
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/
11
Le Responsive Design 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/
12
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/
13
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.
14
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 Facilement identifiable 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. Les menus pour terminaux mobiles
15
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/
Libre de la place dans le header Facilement identifiable Elgant Compltement personnalisable
Assez lourd Problme de compatibilit Peut tre droutant Dpendance JavaScript
16
Le Responsive Design 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/
17
Libre de la place dans le header Facilement identifiable Elgant Compltement personnalisable Permet l'intgration de trs grand menu
Assez lourd Problme de compatibilit 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.
18
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/
Libre de la place dans le header Facile mettre en place Facilement identifiable Compltement personnalisable Pas de dpendance JavaScript
Trs droutant Pas d'adquation avec les normes Utilisation de beaucoup d'espace en hauteur Problme de compatibilit
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).
19
Le Responsive Design 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/
20
Libre de la place dans le header Facile mettre en place Compltement personnalisable Pas de dpendance JavaScript
Trs droutant Trs peu identifiable Pas d'adquation avec les normes Utilisation de beaucoup d'espace en hauteur Problme de compatibilit
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.
21
Supprimer l'accs au menu
Figure 14 - Sur mobile, le menu de authentic jobs n'apparait plus - http://www.authenticjobs.com/
Libre de la place dans le header Facile mettre en place Pas de dpendance JavaScript
Supprime du contenu et des fonctionnalits sur mobile Trs droutant Pas du tout identifiable Pas d'adquation avec les normes 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. Les menus pour terminaux mobiles
22
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).
Les visuels
23
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/
Les visuels
24
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).
Les visuels
25
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/
26
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 ?
27
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 hauteur2. 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.
Guideline Apple http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Charact eristics/Characteristics.html#//apple_ref/doc/uid/TP40006556-CH7-SW1
28
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
29
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)
30
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).
31
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.
32
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
33
Figure 27 - Trois crans de formulaires sur smartphone
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.
34
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. 960 pixels
Contenu 1
Contenu 2
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.
Le dveloppement
35
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.
Le dveloppement
36
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
Prsentation
37
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)
38
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.
"Guides et assistances"
"Top des marques"
Figure 32 - Les visuels ne sont pas tous bien adapts sur le site topachat
39
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
40
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
41
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.
Un dveloppement Responsive ?
42
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 - http://www.google.fr/
43
Le Responsive Design 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/
44
Le Responsive Design 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).
45
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
46
Le Responsive Design 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. Doiton 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 devices cibls
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
47

Responsive Design Miratech

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Responsive Design Miratech

Hochgeladen von

Copyright:

Verfügbare Formate

Le Responsive Design

Livre Blanc - Mars 2013

Droits de reproduction et de diffusion

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

Livre Blanc - Mars 2013

Miratech est prsent un acteur important dans le domaine du Responsive Design.

Quelques chiffres en 2013

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

Livre Blanc - Mars 2013

A PROPOS DE MIRATECH ....................................................................................... 3 INTRODUCTION ........................................................................................................ 5

Les menus pour terminaux mobiles ..................................................................................13

Les visuels ........................................................................................................................23

Les lments cliquables ....................................................................................................26

Les fonctionnalits des terminaux mobiles ........................................................................31

ETUDE D'UN CAS CONCRET................................................................................. 37

Un dveloppement Responsive ? .....................................................................................42 Les limites du Responsive Design ....................................................................................43

CONCLUSION ......................................................................................................... 47 CONTACT ................................................................................................................ 47

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

Livre Blanc - Mars 2013

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

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

Source : A List Apart - http://alistapart.com/article/responsive-web-design/

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

Livre Blanc - Mars 2013

Pourquoi le Responsive Design ?

Pourquoi le Responsive Design ?

Livre Blanc - Mars 2013

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

Pourquoi le Responsive Design ?

Livre Blanc - Mars 2013

Les blocs de contenu

Voici quelques exemples de blocs pouvant apparaitre dans votre site :

Les blocs de contenu

Livre Blanc - Mars 2013

Conserver un ordre logique

Les blocs de contenu

Livre Blanc - Mars 2013

Les blocs de contenu

Livre Blanc - Mars 2013

Adapter les blocs

Les blocs de contenu

Livre Blanc - Mars 2013

Figure 7 - Le site Alsacreations sur mobile est trop long - http://www.alsacreations.com/

Les blocs de contenu

Livre Blanc - Mars 2013

Les menus pour terminaux mobiles

Prsentation du menu en haut de page

Les menus pour terminaux mobiles

Livre Blanc - Mars 2013

Les menus pour terminaux mobiles

Livre Blanc - Mars 2013

Menu en liste droulante <select>

Libre de la place dans le header Facilement identifiable Bonne compatibilit

Manque de personnalisation Peut tre droutant Dpendance lgre JavaScript

Livre Blanc - Mars 2013

Dploiement du menu ("Toggle")

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

Libre de la place dans le header Facilement identifiable Elgant Compltement personnalisable

Assez lourd Problme de compatibilit Peut tre droutant Dpendance JavaScript

Les menus pour terminaux mobiles

Livre Blanc - Mars 2013

Menu droulant par la gauche

Les menus pour terminaux mobiles

Livre Blanc - Mars 2013