Le Responsive Web design est une approche de conception Web qui vise à l’élaboration de sites offrant une expérience de lecture et de navigation optimales pour l’utilisateur quelle que soit sa gamme d’appareil (téléphones mobiles, tablettes, liseuses, moniteurs d’ordinateur de bureau).
Consacré « mot-clé de l’année 2013 » par le célèbre magazine Mashable, le Responsive Web design (RWD) est aujourd’hui incontournable dans nos projets web (et dans les cahiers des charges de nos clients)… mais demeure toujours aussi confus et insaisissable même chez les professionnels !
Voici donc une petite introduction pour mieux comprendre ce phénomène..
Une expérience utilisateur « Responsive » réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages.
Le terme de « Responsive Web design » a été introduit par Ethan Marcotte dans un article de A List Apart publié en mai 2010.
Il décrira par la suite sa théorie et pratique du responsive dans son ouvrage « Responsive Web Design » publié en 2011. Celle-ci se limite à des adaptations côté client (grilles flexibles en pourcentages, images fluides et CSS3 Media Queries).
Site dédié, application ou responsive ?
Nous disposons actuellement de trois moyens pour véhiculer le contenu web sur des appareils connectés : un site dédié, une application native et une version responsive de site web.
Sachez que chaque solution a des avantages et des inconvénients : selon vos besoins et contraintes (notamment de budget et de délais), il pourra être parfaitement pertinent d’opter pour l’une ou l’autre.
Un site dédié
Un projet de site dédié consiste à concevoir deux ou plusieurs entités différentes selon le dispositif visé : un site principal, un site pour smartphones, un site pour tablettes, etc.
Généralement, un test initial côté serveur détecte le type d’appareil et renvoie vers une adresse web dédiée (m.monsite.com par exemple).
Les avantages des sites web dédiés sont :
- La possibilité d’affiner précisément la structure du site et ses contenus en regard du périphérique utilisé
- La possibilité de cibler et de s’adapter à des fonctionnalités variées (notamment le touch)
- Peut être une alternative « rapide », en attendant une refonte complète (et responsive) de son site web
Mais un site dédié n’est pas exempt d’inconvénients :
- Le contenu dupliqué (« duplicate content »)
- La maintenance de plusieurs versions de site et de plusieurs adresses web (moins facilement indexables par un moteur de recherche)
- La détection côté serveur (« UA sniffing ») souvent biaisée ou non à jour
Une application native
Une application native est un produit développé spécifiquement dans divers « langages » (iOS, Android, WindowsPhone) et qui se télécharge et se référence au sein d’un « Store » (AppStore, Google Play, Windows store).
Cela lui confère certains avantages :
- La prise en charge facilitée de fonctionnalités natives (touch, accéléromètre, notifications, GPS, etc.)
- Un installation possible sur son périphérique
- Une totale « acclimatation » au périphérique (ergonomie, performances, densité de pixels)
- La présence de sa marque sur l’AppStore (pour ne citer que lui) et de pouvoir disposer d’un « raccourci » sur le smartphone de l’utilisateur
… Mais aussi certains inconvénients :
- Un développement spécifique dans plusieurs langages (propres à iOS, Android, WindowsPhone, etc.)
- Le coût du développement, des licences, et de la maintenance pour chaque système d’exploitation
- Un contenu non indexable par un moteur de recherche web classique
- La mise à jour de l’application nécessite une action de l’utilisateur
Une version responsive
À l’heure où des centaines de tailles et formats d’écrans différents se connectent à chaque instant, la méthode du Responsive Web design apparaît comme la « solution de facilité » en vertu de son objectif principal:
s’adapter à tout type d’appareil de manière transparente pour l’utilisateur
- Des coûts et des délais généralement inférieurs aux techniques citées précédemment
- Une maintenance de projet facilitée (une seule feuille de style, un seul fichier HTML, etc.)
- Une mise à jour transparente et un déploiment multi-plateformes
- Le Responsive peut être envisagé après la conception initiale du site (même si ce n’est pas l’idéal)
L’un des avantages indéniables depuis quelques temps est que Google met en avant les sites « adaptés au mobile » au sein de ses résultats de recherche :
Les inconvénients ne sont cependant pas nuls :
- De bonnes connaissances techniques, et une veille technologique constante, sont indispensables
- Il est nécessaire de prévoir des tests nombreux et variés tout au long du projet (« device labs », simulateurs)
- Il est difficile de contourner les limites ergonomiques et de performances des navigateurs web
- Faire du responsive, c’est… plus long que de ne rien faire (25% du temps supplémentaire)
Au final, le Responsive Web design n’est qu’un moyen parmi d’autres de parvenir à ses objectifs mais ne doit pas être considéré comme la seule éventualité ni comme une « solution magique » à tous les problèmes.
D’ailleurs, il est fréquent qu’un cumul de différentes méthodes soit employé : par exemple un site à la fois dédié et responsive, ou un site responsive garni de certaines détections côté serveur (on parle alors de RESS), etc.
Le site mediaqueri.es est une excellente ressource pour découvrir d’autres sites web responsive à travers un annuaire.
