Le responsive design

responsive design

Je publie aujourd’hui un dernier compte-rendu d’une conférence à laquelle j’ai assisté au salon E-marketing 2013. Le sujet est le « Responsive design », exposé par l’agence Miratech.

Le contenu de cette conférence était riche en informations. Aussi, je vais tenter de structurer ce CR en quatre points :

  1. Qu’est-ce que le responsive design ?
  2. Le responsive design en pratique
  3. Etude de cas : un site responsive design raté
  4. Les limites du responsive design

Commençons donc le compte-rendu de ce sujet passionnant qu’est le responsive design.

1. Qu’est-ce que le responsive design ?

 

A / Présentation

  • Voici une définition qu’on pourrait donner au responsive design : un format de site Internet qui s’adapte « intelligemment » sur l’ensemble des supports de communication : desktop, tablettes, mobile.
  • Ethan Marcotte a été la première personne à avoir abordé le terme du « responsive design »
  • Exemples de sites en responsive design : Miratech.fr, TheBostonGlobe.com

B/ Avantages du responsive design

  • Une expérience utilisateur améliorée
  • Une version unique pour le site Web
  • Les contraintes réduites en matière SEO

C/ Inconvénients

  • Un travail forcément bien plus important à effectuer en amont, lors  de la création du site
  • Des connaissances techniques poussées impératifs : CSS media queries, grilles fluides (codage en pourcentage), images et vidéos redimensionnables

 

2. Le responsive design en pratique

 

A / La présentation des menus

En ce qui concerne les bonnes pratiques, on peut énumérer les dispositions suivantes :

  • Garder la présentation du menu en haut de page
  • Créer un menu en liste déroulante <Select>
  • Déployer un menu en <Toggle> : pour exemple, voir Starbucks.fr
  • Positionner le menu déroulant à gauche : pour exemple, voir m.Facebook.com
  • Supprimer l’accès au menu : certains blogs peuvent se prêter à cette best practice

Concernant les mauvaises pratiques, il y en a surtout une à bannir : le fait de positionner le menu uniquement en footer, en pensant que l’internaute ira forcément en bas de page en faisant défiler l’écran.

B / Les bonnes pratiques ergonomiques : le contenu

On peut lister les best practices suivantes :

  • Adapter les visuels au support utilisé. Si nécessaire, procéder à la suppression de l’image selon le terminal. Pour exemple, voir : WWF.org
  • Gérer des blocs de contenus cohérents
  • Réduire le nombre de colonnes

Concernant les mauvaises pratiques, on peut en répertorier deux :

  • Par souci de gain de place, ne jamais remplacer les textes uniquement par des icônes. L’idée qu’on peut avoir d’une icône seule n’est pas forcément la même dans l’esprit de l’internaute. Mieux vaut donc garder le texte pleinement écrit.
  • Eviter de garder tous les contenus sur le mobile pour ne pas faire de pages trop longues.

C / Les bonnes pratiques ergonomiques : la navigation

Plutôt que des bonnes ou mauvaises pratiques, il s’agit là surtout de respecter certains critères pour faciliter au mieux la navigation de l’internaute :

  • Tenir compte de l’affordance : c’est la capacité de suggérer la fonction d’un élément.
  • Ne pas oublier que le doigt sera toujours moins précis que la souris. Par exemple, un menu déroulant type Web sera toujours plus difficile à utiliser sur un terminal tactile.
  • Garder en tête que les contextes d’utilisation sont différents entre le Web et le mobile. Il faut donc penser à adapter les objectifs selon la spécificité de l’utilisation. Par exemple, sur les sites e-Commerce de produits high-tech, se poser la question de diffuser les guides d’emploi sur les terminaux mobile
  • Penser à intégrer les nouvelles fonctionnalités des smartphones pour améliorer l’expérience utilisateur. Un exemple simple est le fait de rendre cliquable un évènement, qui créerait un rdv sur l’agenda du smartphone.

 

3. Etude de cas : un site responsive raté, le cas de « Top Achat »

Parmi les nombreuses remarques effectuées par Miratech, on peut retenir les points suivants :

  • Le menu est plutôt correct
  • Le scroll en version mobile est beaucoup trop important
  • Les zones de pointage sont très restreintes, notamment sur le footer
  • Le tunnel de conversion n’est pas responsive, ce qui est bien dommage lorsqu’on s’est donné tant de mal à réaliser un site responsive… et surtout qu’on a réussi à amener l’internaute jusqu’à ce point crucial de transformation !

 

4. Les limites du responsive design

Le responsive design est idéal pour les sites de présentation de contenu et qui proposent un nombre de fonctionnalités limitées. Pour des sites web trop complexes, mieux vaut passer par une interface totalement différente (site mobile ou application).

Par exemple, le site e-Commerce Amazon, le réseau social Facebook ou encore Google avec ses différents services préfèrent la création de sites mobiles ou applications. Ce qui peut se comprendre vu la complexité des services que ces acteurs peuvent proposer à leurs internautes.

 

Voilà donc la fin de ce compte-rendu de la conférence de l’agence Miratech lors du salon E-marketing 2013. Encore une fois, ce compte-rendu n’est qu’une simple mise en propre des notes que j’ai pu prendre lors de l’intervention de cette agence et non la présentation dans sa globalité.

Vous pouvez également télécharger ici un document reprenant l’intégralité de mes notes.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>