responsive design miratech

7/30/2019 Responsive Design Miratech

1/47

www.miratech.fr

[email protected]

Le Responsive Design
http://miratech.fr/http://www.miratech.fr/mailto:[email protected]:[email protected]://miratech.fr/mailto:[email protected]://www.miratech.fr/


2/47

Livre Blanc - Mars 2013


2Qu'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 sontrservs". 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 ouillustrations de ce document, par quelque procdure que ce soit, constituerait unecontrefaon sanctionne par le Code Pnal.
http://www.miratech.fr/http://www.miratech.fr/http://www.miratech.fr/http://www.miratech.fr/


3/47




Miratech est une entreprise dergonomie web et de conception centre utilisateurs.

Les ingnieurs, ergonomes, dveloppeurs et graphistes de Miratech interviennent sur tousles types dinterfaces numriques : sites web, intranets, logiciels, applications et sitesmobiles, etc.

Nos services sorganisent en trois ples :

Etude : Mesure de lefficacit des interfaces (eye tracking, A/B testing, testsutilisateurs)

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.

Jeremie Eskenazi - CEO de MiratechAntoine Pez - Chef de projet User Experience

Solne Robert - Chef de projet User Experience

Quelques chiffresen 2013

4500 utilisateurs tests

150 Projets internationaux

62% de croissance

3 labos quips dont 1mobile

8 ans d'existence


4/47




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

Qu'est-ce que le "Responsive Design" ? ............................................................................ 5Pourquoi le Responsive Design ? ...................................................................................... 6

GUIDELINES .............................................................................................................. 8Les blocs de contenu ......................................................................................................... 8

Penser en bloc ............................................................................................................................................... 8Conserver un ordre logique ........................................................................................................................... 9Adapter les blocs .............................................................. ................................................................. .......... 11

Les menus pour terminaux mobiles ..................................................................................13Prsentation du menu en haut de page ...................................................................................................... 13Menu en liste droulante .............................................................................................................. 15Dploiement du menu ("Toggle") ............................................................................................................... 16Menu droulant par la gauche.................................................................................................................... 17Menu avec ancre vers le footer ................................................................................................................... 19Menu uniquement dans le footer ................................................................................................................ 20Supprimer l'accs au menu ......................................................................................................................... 22

Les visuels ........................................................................................................................23Supprimer les visuels trop importants ......................................................................................................... 23Adapter les icnes d'un site ......................................................... .............................................................. .. 25

Les lments cliquables ....................................................................................................26Rendre explicite les lments cliquables ..................................................................................................... 26Etendre les zones d'interaction ................................................................................................................... 28Adapter le nombre de fonctionnalits prsentes ...................................................... ................................ 30

Les fonctionnalits des terminaux mobiles ........................................................................31Golocalisation et tlphonie ..................................................................................................................... 31Attention aux animations .......................... ................................................................. ................................ 32Gestion du clavier tactile et autres fonctions .............................................................................................. 33

Le dveloppement ............................................................................................................35En bref ......................................................................................................................................................... 35Grille relative ............................................................................................................................................... 35Media-queries ............................................................................................................................................. 36Penser Responsive Design ........................................................................................................................... 36

ETUDE D'UN CAS CONCRET ................................................................................. 37Prsentation .....................................................................................................................37Ladaptation du contenu....................................................................................................38

Menu "toggle" ............................................................................................................................................. 38Gestion des visuels ...................................................................................................................................... 39Longueur de page ....................................................................................................................................... 40Interactions ................................................................................................................................................. 41

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

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


5/47




Qu'est-ce que le "Responsive Design" ?Le Responsive Design, aussi nomm Responsive Web Design, dsigne lensemble desmthodes et des techniques permettant lutilisation optimale dun mme site web sur touttype de terminaux.

Un site conu en Responsive Design pourra tre aussi bien consult sur smartphone que surordinateur, en passant par la TV ou la tablette tactile (Figure 1). L'ide est de proposer unerorganisation dynamique du site en fonction de la largeur de l'cran sur lequel il estconsult.

Historiquement, on attribue Ethan Marcotte, webdesigner et dveloppeur amricain, le 1erarticle 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/

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


6/47



6Pourquoi 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 changedynamiquement grce aux feuilles de style (CSS3).

Pour savoir si un site a t dvelopp en Responsive Design, il suffit de modifier la taille dunavigateur 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
http://miratech.fr/http://miratech.fr/http://miratech.fr/


7/47



7Pourquoi le Responsive Design ?

Avec le Responsive Design, l'exprience utilisateur est grandement amliore :

La conception en Responsive Design permet d'viter le dveloppement spcifiquedune version mobile.

L'utilisateur retrouve les mmes informations partout et a le sentiment d'avoir un sitevraiment 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 lesterminaux.

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 tousles 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 penserpar "bloc de contenu"

Les menus pour terminaux mobiles : prsentation de 7 faons diffrentesd'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 etrgles gnrales d'ergonomie sur mobile

Les fonctionnalits des terminaux mobiles : prcisions sur les fonctionnalitsspcifiques 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 lesguidelines prcdentes.


8/47



8Les blocs de contenu

Les blocs de contenuPenser 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 interactionsannexes

Bloc "index", constitu des dernires informations ou des produits que le site veutmettre 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 gaucheou droit du site en vue sur ordinateur

Bloc "produit", pour un site e-commerce, constitu au moins d'une image, d'unedescription, 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


9/47




Conserver un ordre logique

Figure 3 - Le site Css-tricks transite de 3 colonnes une seule sur la version mobile en gardant le mmeordre 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 bleuet "footer" en orange. Le bloc "menu" n'est pas reprsent ici, il sera dtaill plus tard.


10/47




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 lesblocs en fonction de la taille de lcran.

Plus gnralement, il faut conserver un ordre logique sur tous les formats pour ne pas perdreles utilisateurs.


11/47




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 uneaugmentation 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'articlesur 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/


12/47




Ceci est valable pour tous les sites : il faut adapter le contenu.

Bien que la visualisation du site Alsacreations soit trs agrable sur ordinateur, ilest 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 lgrementla taille de la police sur smartphone. Le confort de navigation est donc conservpour 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, untexte trop petit sur ordinateur pourra tre difficilement vu sur smartphone. Il fautgrer les deux cas sparment.

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

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


13/47



13Les menus pour terminaux mobiles

Les menus pour terminaux mobilesEtant 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, endtaillant leurs points forts et points faibles.

Ces exemples sont tirs des excellents sites Design Spartan (http://designspartan.com) etBrad 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/


14/47




Facile mettre en place

Facilement identifiable

Compltement personnalisable

Pas de dpendance JavaScript

Utilisation de beaucoup despace enhauteur (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 changementsde code. Ainsi, en restant dans le "header" ou en tte du site, le menu est trs facilementidentifiable tout en restant personnalisable en termes de design. Un autre avantage est quele 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 dlicatl'ajout de nouvelle section ou la lecture du menu avec une autre typographie (comme celapeut arriver sur les tlphones Android).

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


15/47




Menu en liste droulante

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 , 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 typede menu doit ncessairement tre situ dans le "header" ce qui lui permet d'tre facilementidentifiable l'aide de l'icne ou du libell associ. Enfin, l'utilisation du permet unebonne compatibilit puisque tous les navigateurs mobiles intgrent nativement uneinteraction optimise avec les listes droulantes.

Cependant le menu utilisera forcement l'affichage du navigateur par dfaut. On fait doncabstraction des couleurs et de la typographie.

Enfin le JavaScript est ncessaire pour modifier un menu de type liste, ce qui peut parfoisposer des problmes de compatibilit.


16/47




Nous conseillons de choisir ce type de formatage de menu trs efficace pour laplupart 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


17/47




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

L'ouverture de ce menu est effectue de manire lgante puisqu'une animation permet unepersonnalisation bien plus grande.

Par contre, lanimation d'ouverture de menu peut ralentir la page. De plus, la typographie oul'utilisation de JavaScript peuvent poser des problmes de compatibilit. Enfin, commeprcdemment, il est ncessaire d'associer un bouton affordant pour rvler la prsenced'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 undesign 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/


18/47






Elgant


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 laffichagedun 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 nepas convenir tous les terminaux.


19/47




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 enhauteur


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


20/47




Ce menu est ainsi personnalisable et ne dpend pas de JavaScript. Si l'intitul ou l'icne dumenu 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 aussiapparaitre.

Nous ne conseillons surtout pas de choisir ce type de formatage de menus, tropsusceptible de dsorienter l'utilisateur. En effet, une fois arriv sur le menu en bas de page, ilest difficile de revenir en arrire puisqu'aucun indicateur prcis n'indique la position del'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 leheader - http://pea.rs/


21/47








Trs droutant

Trs peu identifiable


Utilisation de beaucoup d'espace enhauteur


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 lerend 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 safonction premire : tre vu pour accder la navigation du site. De plus, il est toujours trs

mal trouv par les utilisateurs.


22/47




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 desfonctionnalits 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 nombreuxproblmes... 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 perdnormment 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 lanavigation 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.


23/47



23Les visuels

Les visuelsSupprimer 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 plusattractive 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 dimagesou vidos de poids rduits afin dtre charges plus rapidement

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

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


24/47



24Les 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/


25/47



25Les 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 comprhensiondes libells quils accompagnent. Ces icnes ont donc t totalement supprims dans laversion 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 ensupprimant les libells associs.

Cette pratique est fortement dconseille car les utilisateurs peuvent mal interprter lesicnes qui lui sont prsents. Elle peut tre utilise uniquement pour des icnes trsstandards, connus par la population cible du site (par exemple, licne disquette poursauvegarder).


26/47



26Les lments cliquables

Les lments cliquablesRendre 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 actiona 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 interactionspossibles quel que soit le support.

Dans lexemple qui suit(Figure 18), le menu prsent sur ordinateur subit des modificationsexplicites :

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/


27/47




Ce type de guidage nexiste plus sur les interfaces tactiles et doit donc tre remplac par unquivalent 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 delinterface 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 ?
http://miratech.fr/blog/tests-utilisateurs-applications-sites-mobiles.htmlhttp://miratech.fr/blog/tests-utilisateurs-applications-sites-mobiles.html


28/47




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 deserreurs de manipulation.

Pour prserver lutilisabilit, il est ncessaire que toutes les zones dinteractions soientagrandies pour les interfaces tactiles.

Afin d'avoir un bouton qui soit utilisable, nous conseillons d'avoir une interaction mesurant auminimum 44 points de largeur et de hauteur2. Le point est une unit indpendante de la taillede l'cran. Par exemple, il correspond 2 pixels sur iPhone 4 (avec cran Retina) contre 1pixel sur les iPhones de gnration prcdente.

Dans l'exemple suivant, le bloc est constitu de nombreux liens trop petits (Figure 20). Cesliens 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 sonttrop petits - http://www.alsacreations.com/

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

2

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


29/47




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


30/47




Adaptez vos interactions aux diffrentes versions.

Ne partez pas forcment de la vue smartphone pour crer vos lments cliquables. Lerisque est de grossir lexcs ces interactions et dobtenir un rsultat qui parait ridiculementgros 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 uneversion smartphone. De plus, certains contenus ne sont plus pertinents sur smartphone, telsque des longs dossiers ou formulaires.

Exemples :

La souscription au Boston Globe a t supprime sur smartphone (Figure 23). Cettefonctionnalit 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 mobilitsituation de mobilit (

Figure 24)


31/47



31Les 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 lesversions mobiles - http://www.starbucks.fr/

Les fonctionnalits des terminaux mobilesGolocalisation 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 ettablettes.

Dans lexemple du site spigotdesign.com, la fonction Find us (nous trouver) esttransforme en un lien vers lapplication de Google Maps, qui utilise alors les donnes degolocalisation (Figure 25). Cette fonction peut permettre de fournir un itinraire lutilisateuren 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).


32/47




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 utilispar 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 justifiepar un rel but.

Certaines animations esthtiques peuvent souligner limage de marque, mais peuvent aucontraire la ternir si elles ralentissent la navigation.

Les carrousels peuvent tre intressants mais doivent absolument pouvoir tre contrls parles utilisateurs : une fonction de pause et de navigation sont obligatoires.


33/47




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 delecture 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 trerduit 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 auzoom 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 : lelibell est rappel dans le champ


34/47




Enfin pensez aux diffrents types de smartphones et de navigateurs.

Sur iPhone, le navigateur Chrome ne laissera que 33% de l'cran accessible pour lapage Internet (Figure 28)

Sur Android, mme les plus importants smartphones comme le Samsung GalaxyNote 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


35/47



35Le dveloppement

Le dveloppementEn bref

Le Responsive Design se base sur 2 technologies : les feuilles de style en CSS3 et leJavaScript.

Le JavaScript permet d'ajouter de l'interaction dans la page, comme des fondus ou duchangement 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). Onva tablir des tailles relatives pour nos lments par rapport cette grille. Par exemple, unsite ayant une largeur de 960 pixels peut tre dcoup en 12 colonnes de 70 pixels avec unespace 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 enpourcentage de chaque contenu. Ici le contenu 1 occupe 75% de la page et le contenu 2occupe 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


36/47



36Le 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 larorganisation des blocs en fonction de la largeur de l'cran. De plus, les media-queriespermettent 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 relleadaptation 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 lesmodifications sont principalement lies la modification des feuilles de style (CSS3). Lecode HTML reste identique et ne perturbe donc pas l'accessibilit, par rapport undveloppement standard.


37/47



37Prsentation

PrsentationPour illustrer les bonnes pratiques et piges viter, voici l'analyse dun cas concret : le sitetopachat.com.

Le contenu trs riche de ce site e-commerce rend la tentative dadaptation du site enResponsive Design ardue. Ltude de ce site rvle donc la fois les piges viter, maisgalement les limites du Responsive Design.

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

Figure 30 : Les trois versions du site topachat.com


38/47



38Ladaptation du contenu

Ladaptation du contenuMenu "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 laprsence de la petite flche (indiquant lutilisateur quil est possible de dplier laliste dlments)


39/47




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 importantavec une connexion faible.

Les images de produit ont t conserves et ont une taille suffisamment grande. Les imagesdes marques de la section "Top des marques" sont suffisamment visibles, mais occupent unespace trop important. Il aurait t plus judicieux de cacher cette section sous un lienspcifique (Figure 32).

Les visuels des "guides et assistances" sont bien trop encombrants, surtout sur la versionmobile (Figure 32). De plus, la taille du texte n'a pas t adapte au smartphone, le rendantdifficilement lisible.

Figure 32 - Les visuels ne sont pas tous bien adapts sur le site topachat

"Guides et assistances"

"Top des marques"


40/47




Longueur de page

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

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

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


41/47




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 configurerdiffrents filtres laide de listes droulantes ou de champs de saisie(Figure 34). Comme lemontre lillustration, ces diffrents filtres ont t rarrangs, repositionns mais non adaptsau tactile. Les zones de pointage sont trs restreintes, et sont difficilement utilisable, ellesengendrent 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


42/47



42Un 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 despiges. Le rsultat est le suivant : une version sur ordinateur dgrade et une version mobilenon finalise. Cette situation montre bien que l'on ne peut pas raliser un site abouti sansune 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 sitee-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 dezoomer la main)

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


43/47



43Les limites du Responsive Design

Les limites du Responsive DesignLtude de cas prsente prcdemment soulve la question suivante : tous les sitespeuvent-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 unnombre de fonctionnalits limit. Mais pour certains sites, ladaptation est complexe, allantjusqu 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 chacundvelopp des versions mobiles de leur site (Figure 37).

Figure 37 : Le site classique et le site mobile de Google - http://www.google.fr/


44/47




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

Figure 38 - La version mobile de Google Figure 39 - Utilisation des donnes degolocalisation du smartphone

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

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


45/47




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

Figure 41 : Adaptation des fonctionnalits de Google Mapshttps://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 quiont 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 desfonctionnalits prsentes sur la colonne de gauche sont caches par dfaut (Figure 43).


46/47




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


47/47



Certaines modifications entre les versions des diffrents sites prsents dans cette partieauraient pu tre apportes dans le cadre dune adaptation en Responsive. Toutefois, uneversion ddie a t prfre en raison des bouleversements oprs dans la structure dusite.

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 sicertains napparaissentpas 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 desnouvelles interfaces, le Web est partout et il doit tre adaptable et adapt ! Le responsiveDesign permet en outre de rpondre aux problmatiques de maintenance et derfrencement.

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 lagolocalisation ? A qui s'adresse la version du site sur ordinateur et sur smartphone ? Queltype 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" sontles 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

responsive design miratech

Documents