Responsive Web Design

Le Responsive Web Design, c’est la capacité d’un site internet à s’adapter à toutes les tailles d’écran.

En 2016, on compte près de 25 millions d'utilisateurs mobile qui passent de plus en plus de temps sur leur SmartPhone ou leur Tablette pour se renseigner, choisir et même faire leurs achats pendant qu'ils se déplacent ou qu'il se reposent en famille.

Chaque appareil est utilisé de manière différente : smartphone dans les transports en rentrant du travail, ordinateur au bureau durant la journée, tablette sur son canapé, e-reader dans son lit…

À chaque appareil correspond aussi des contraintes d’utilisabilité : tactile, débit Internet lent, écran sans couleur... Les écrans sont certainement la variante majeure : différents par leur taille, leur densité ou le rapport largeur/longueur : entre 2,8 pouces et 34 pouces, le rendu d’un site n'est pas le même selon le support utilisé.

Quelle approche ?

Si l'on met de coté toutes contraintes de coûts et de délais, l’idéal pour l’utilisateur serait une expérience sur mesure pour chaque terminal. Cela impose de développer une palette de différentes versions de sites ou d’applications prenant finement en compte les contraintes et atouts techniques ainsi que le contexte d’usage de chaque appareil.

Si l’utilisation du service varie selon le terminal – usages différents sur mobile que sur ordinateur par exemple (géolocalisation, utilisation de l’appareil photo…) – on préfèrera créer des versions distinctes qui répondent au mieux à l’utilisateur. Nous pouvons même aller jusqu'à imaginer une ou plusieurs applications qui optimiseront l’expérience utilisateur (consultation offline, animations, gestuelles, possibilités hardware…).

Si les utilisations et les contenus sont les mêmes quels que soient les terminaux, le Responsive design est une approche plus pertinente qui permettra au site d'être plus réactif et plus homogène. Avec le Responsive design, la même base de code permet de couvrir tous les périphériques Web. C’est le CSS et Javascript qui permettent l’adaptation. Cela permet de réduire considérablement le temps de maintenance, d'ajustement ou d’écriture du contenu.

Le Responsive Web Design pour les sites marchands

Dans le cas des sites marchands, nous recommandons d'adopter le Responsive Web Design parce que généralement les objectifs sont les mêmes quel que soit le contexte.

Qu'ils soient sur leur tablette ou sur leur ordinateur, les clients cherchent des informations et achètent leur produit ou service. Il est même très important que l'expérience soit la même pour qu'ils ne soient pas perturbés par de trop grandes variations.

En revanche, il est possible que l'utilisation mobile implique de nouveaux services ou une organisation différente des priorités.

Par exemple, les sites marchands des ESF mettent la priorité sur leur offre produit (cours de ski) quand les clients commandent depuis leur lieu d'habitation. En revanche, lorsqu'ils sont dans la station de ski, ce sont les informations pratiques telles que la Météo, les lieux de rendez-vous, les horaires et les promotions qui doivent être mises en avant sur le terminal. 

"Mobile First", surtout une nouvelle démarche de conception

La notion de Responsive Web Design (RWD ou conception de sites web adaptatifs) regroupe différents principes et technologies qui forment une approche de conception de sites web dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation. L'utilisateur peut ainsi consulter le même site web à travers une large gamme d'appareils (moniteurs d'ordinateur, smartphones, tablettes, TV,...).

Dans un design à géométrie variable, il est généralement plus facile de commencer la conception à partir de l'environnement qui a le plus de contraintes pour ensuite exploiter les possibilités de l'environnement le moins contraignant. 

Ainsi, la notion de "Mobile First" peut-être considérée comme un mode de pensée dans lequel on privilégie la construction d'une interface ergonomique pour terminaux mobiles avant de définir l'ergonomie pour un terminal "desktop". Cette démarche à pour objectif d'améliorer l'expérience utilisateur.

L'élaboration d'une interface ergonomique sous la contrainte d'un faible espace d'affichage force à épurer au maximum les éléments visibles par l'utilisateur final. Une tendance que l'on retrouve de plus en plus dans l'ergonomie des interfaces web et qui exploite mieux les possibilités ergonomiques des technologies web modernes.

Dans la pratique ?

Un site pensé en RWD utilise la technologie CSS3 media queries pour adapter la mise en page à l'environnement de consultation grâce à une grille fluide dans laquelle se placent les différents contenus de la page.
  • Media queries permet à la page d'utiliser des règles CSS différentes en fonction des caractéristiques du terminal de consultation. Le plus communément il s'agit des règles appliquées en fonction de la largeur du terminal. Ces différentes largeurs sont appelées "points de rupture" et correspondent à un besoin de modifier la mise en page à partir d'un certain seuil critique pour faciliter la navigation et la lecture du contenu.
  • Le concept de grille fluide consiste en un dimensionnement relatif des différents blocs de la page. Les unités relatives comme les pourcentages ou les EMs sont assez adaptées pour cela, beaucoup plus que les unités absolues comme les pixels ou les points. 
  • Les images ayant un besoin de flexibilité sont également redimensionnées en unité relative, afin de prévenir un éventuel débordement du contenu en dehors de son élément conteneur.
Création graphique : Marc Vandamme