quoi de neuf

Plus personne ne doute aujourd'hui de l'usage des smartphones et des tablettes tactiles dans la consommation de l'information. L'usage de ces périphériques mobiles à exploser ces dernières années et dépasse largement la barre des 50% en terme de support utilisé pour naviguer sur le web. Avec l’émergence de ces nouveaux supports, l’importance de rendre son site accessible pour ce large panel de périphériques devient non négligeable voir obligatoire si l'on souhaite maximiser l'impact de sa communication digitale auprès des internautes. Tactilité, débit internet, terminal et résolution d’écran sont les contraintes actuelles du développement de sites internet.

Suite à ses constatations, une nouvelle approche dans la conception des sites web à fait son apparition au milieu des années 2010 dans un article publié par Ethan Marcotte, le "Responsive Web Design". Il décrira par la suite sa théorie et pratique dans l'ouvrage "Responsive Web Design" publié en 2011. Deux années plus tard, le "Responsive Web Design" fût élu "mot-clé de l'année 2013" par le magazine Mashable. Concrètement, que représente cette nouvelle approche dans la conception d'un site web ?

Le "Responsive Web Design" (RWD) est une approche de conception dans la réalisation d'un site internet. Ce nouveau concept vise à élaborer des sites web optimisant la lecture et la navigation pour les utilisateurs quelle que soit le support utilisé. L'objectif premier est donc de maximiser l'expérience d'un utilisateur sur n'importe quel type de support. Cette adaptation sera totalement transparente pour l'utilisateur final. La méthode du "Responsive Web Design" apparaît donc comme la solution miracle et incontournable pour répondre avec facilité à cette contrainte de tailles et de formats d'écrans variés accédant à l'information.

Avant de détailler cette nouvelle approche, nous allons faire la distinction entre les sites web statiques, liquides, adaptatifs et responsives :
- Un design statique fait référence à des dimensions figées quelle que soit la surface de l'écran.
- Un site web liquide, ou fluide, est un site web dont toutes les largeurs et dimensions sont définies en unité variables.
- Un design adaptatif est une amélioration d'un design statique.
- Un site web responsive est une amélioration d'un site web liquide associé à l'emploi des méthodes de "Media Queries".

Le "Responsive Web Design" est une approche incontournable si l'on souhaite conserver une présence sur le web. Quelles sont les avantages et les inconvénients de cette approche ?

Développer son site internet en "Responsive Web Design" présente les avantages suivants :
- Une seule et unique version du site internet.
- Des coûts et des délais généralement inférieurs à la réalisation de plusieurs sites dédiés (mobile, tablet, desktop, …).
- Une mise à jour transparente.
- Un déploiement multi-support facilité.
- Un site adapté au mobile est maintenant mis en avant par Google dans ses résultats de recherche.

Cette nouvelle approche n’est cependant pas exempte d’inconvénients :
- Elle nécessite plus de compétences techniques car elle demande la prise en compte d'un nombre plus conséquent de paramètres.
- Une veille technologique constante est indispensable.
- Il est nécessaire de prévoir de nombreux tests et variés tout au long du projet.
- Développer un design responsive demande plus de temps (prévoir 25% de temps supplémentaire).
- Les contraintes d'un design responsive peut entraîner un manque d'originalité.
- Le temps de téléchargement peut être plus lent car des ressources non utilisées pourraient être téléchargées si la conception n'a pas été optimisée.

Le "Responsive Web Design" est un moyen parmi d’autres de répondre à ses objectifs mais ne doit pas être considéré comme la seule solution envisageable. La conception d'une application native ou d'une application web peut s'avérer être une solution plus adéquate dans certains cas.

Dans un prochain article, nous parlerons également d’une nouvelle approche étroitement liée à l’approche du "Responsive Web Design", le "Mobile First Design".

Plus d'information > developers.google.com/web...