Responsive Design Miratech
-
Upload
serge-esteves -
Category
Documents
-
view
231 -
download
0
Transcript of Responsive Design Miratech
-
7/30/2019 Responsive Design Miratech
1/47
www.miratech.fr
Le Responsive Design
http://miratech.fr/http://www.miratech.fr/mailto:[email protected]:[email protected]://miratech.fr/mailto:[email protected]://www.miratech.fr/ -
7/30/2019 Responsive Design Miratech
2/47
Livre Blanc - Mars 2013
Le Responsive Design
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/ -
7/30/2019 Responsive Design Miratech
3/47
Livre Blanc - Mars 2013
Le Responsive Design
3Qu'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 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
-
7/30/2019 Responsive Design Miratech
4/47
Livre Blanc - Mars 2013
Le Responsive Design
4Qu'est-ce que le "Responsive Design" ?
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
-
7/30/2019 Responsive Design Miratech
5/47
Livre Blanc - Mars 2013
Le Responsive Design
5Qu'est-ce que le "Responsive Design" ?
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/ -
7/30/2019 Responsive Design Miratech
6/47
Livre Blanc - Mars 2013
Le Responsive Design
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/30/2019 Responsive Design Miratech
7/47
Livre Blanc - Mars 2013
Le Responsive Design
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.
-
7/30/2019 Responsive Design Miratech
8/47
Livre Blanc - Mars 2013
Le Responsive Design
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
-
7/30/2019 Responsive Design Miratech
9/47
Livre Blanc - Mars 2013
Le Responsive Design
9Les blocs de contenu
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.
-
7/30/2019 Responsive Design Miratech
10/47
Livre Blanc - Mars 2013
Le Responsive Design
10Les blocs de contenu
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.
-
7/30/2019 Responsive Design Miratech
11/47
Livre Blanc - Mars 2013
Le Responsive Design
11Les blocs de contenu
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/
-
7/30/2019 Responsive Design Miratech
12/47
Livre Blanc - Mars 2013
Le Responsive Design
12Les blocs de contenu
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/
-
7/30/2019 Responsive Design Miratech
13/47
Livre Blanc - Mars 2013
Le Responsive Design
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/
-
7/30/2019 Responsive Design Miratech
14/47
Livre Blanc - Mars 2013
Le Responsive Design
14Les menus pour terminaux mobiles
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.
-
7/30/2019 Responsive Design Miratech
15/47
Livre Blanc - Mars 2013
Le Responsive Design
15Les menus pour terminaux mobiles
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
Facilement identifiable
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.
-
7/30/2019 Responsive Design Miratech
16/47
Livre Blanc - Mars 2013
Le Responsive Design
16Les menus pour terminaux mobiles
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/
Libre de la place dans le header
Facilement identifiable
Elgant
Compltement personnalisable
Assez lourd
Problme de compatibilit
Peut tre droutant
Dpendance JavaScript
-
7/30/2019 Responsive Design Miratech
17/47
Livre Blanc - Mars 2013
Le Responsive Design
17Les menus pour terminaux mobiles
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/
-
7/30/2019 Responsive Design Miratech
18/47
Livre Blanc - Mars 2013
Le Responsive Design
18Les menus pour terminaux mobiles
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 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.
-
7/30/2019 Responsive Design Miratech
19/47
Livre Blanc - Mars 2013
Le Responsive Design
19Les menus pour terminaux mobiles
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 enhauteur
Problme de compatibilit
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).
-
7/30/2019 Responsive Design Miratech
20/47
Livre Blanc - Mars 2013
Le Responsive Design
20Les menus pour terminaux mobiles
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/
-
7/30/2019 Responsive Design Miratech
21/47
Livre Blanc - Mars 2013
Le Responsive Design
21Les menus pour terminaux mobiles
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 enhauteur
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 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.
-
7/30/2019 Responsive Design Miratech
22/47
Livre Blanc - Mars 2013
Le Responsive Design
22Les menus pour terminaux mobiles
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 desfonctionnalits 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 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.
-
7/30/2019 Responsive Design Miratech
23/47
Livre Blanc - Mars 2013
Le Responsive Design
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).
-
7/30/2019 Responsive Design Miratech
24/47
Livre Blanc - Mars 2013
Le Responsive Design
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/
-
7/30/2019 Responsive Design Miratech
25/47
Livre Blanc - Mars 2013
Le Responsive Design
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).
-
7/30/2019 Responsive Design Miratech
26/47
Livre Blanc - Mars 2013
Le Responsive Design
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/
-
7/30/2019 Responsive Design Miratech
27/47
Livre Blanc - Mars 2013
Le Responsive Design
27Les lments cliquables
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 -
7/30/2019 Responsive Design Miratech
28/47
Livre Blanc - Mars 2013
Le Responsive Design
28Les lments cliquables
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
-
7/30/2019 Responsive Design Miratech
29/47
Livre Blanc - Mars 2013
Le Responsive Design
29Les lments cliquables
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
-
7/30/2019 Responsive Design Miratech
30/47
Livre Blanc - Mars 2013
Le Responsive Design
30Les lments cliquables
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)
-
7/30/2019 Responsive Design Miratech
31/47
Livre Blanc - Mars 2013
Le Responsive Design
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).
-
7/30/2019 Responsive Design Miratech
32/47
Livre Blanc - Mars 2013
Le Responsive Design
32Les fonctionnalits des terminaux mobiles
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.
-
7/30/2019 Responsive Design Miratech
33/47
Livre Blanc - Mars 2013
Le Responsive Design
33Les fonctionnalits des terminaux mobiles
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
-
7/30/2019 Responsive Design Miratech
34/47
Livre Blanc - Mars 2013
Le Responsive Design
34Les fonctionnalits des terminaux mobiles
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
-
7/30/2019 Responsive Design Miratech
35/47
Livre Blanc - Mars 2013
Le Responsive Design
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
-
7/30/2019 Responsive Design Miratech
36/47
Livre Blanc - Mars 2013
Le Responsive Design
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.
-
7/30/2019 Responsive Design Miratech
37/47
Livre Blanc - Mars 2013
Le Responsive Design
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
-
7/30/2019 Responsive Design Miratech
38/47
Livre Blanc - Mars 2013
Le Responsive Design
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)
-
7/30/2019 Responsive Design Miratech
39/47
Livre Blanc - Mars 2013
Le Responsive Design
39Ladaptation du contenu
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"
-
7/30/2019 Responsive Design Miratech
40/47
Livre Blanc - Mars 2013
Le Responsive Design
40Ladaptation du contenu
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
-
7/30/2019 Responsive Design Miratech
41/47
Livre Blanc - Mars 2013
Le Responsive Design
41Ladaptation du contenu
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
-
7/30/2019 Responsive Design Miratech
42/47
Livre Blanc - Mars 2013
Le Responsive Design
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.
-
7/30/2019 Responsive Design Miratech
43/47
Livre Blanc - Mars 2013
Le Responsive Design
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/
-
7/30/2019 Responsive Design Miratech
44/47
Livre Blanc - Mars 2013
Le Responsive Design
44Les limites du Responsive Design
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/
-
7/30/2019 Responsive Design Miratech
45/47
Livre Blanc - Mars 2013
Le Responsive Design
45Les limites du Responsive Design
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).
-
7/30/2019 Responsive Design Miratech
46/47
Livre Blanc - Mars 2013
Le Responsive Design
46Les limites du Responsive Design
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
-
7/30/2019 Responsive Design Miratech
47/47
Livre Blanc - Mars 2013
Le Responsive Design
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