Le responsive web design : nouvelle mode ou futur proche ?
Depuis peu et poussé par le web mobile, le responsive web design devient un effet de mode. Découvrons cette nouvelle technique qui promet de nouveaux horizons.
On ne compte plus la littérature disponible sur le web entre l'intérêt de créer un seul site pour tous les supports (mobile, desktop, tv), ou alors de créer un site spécifique pour chaque support. Longtemps, c'est la deuxième solution qui été choisie, mais aujourd'hui la balance semble pencher de l'autre côté, grâce aux techniques du responsive web design.
Un site spécifique
Avant le coup de fouet appliqué sur les fesses du W3C par les nouveaux éditeurs de navigateur (Firefox puis Webkit), la solution la plus répandue était de réaliser un site pour les ordinateurs de bureau, puis un autre séparément pour les appareils mobiles. L'avantage était que les processus de création étaient simplifiés, il n'y avait pas besoin de monter en abstraction pour avoir quelque chose de fonctionnel sur tous les périphériques. Le problème est que cela coûtait très cher et qu'il n'était pas rare de devoir faire plusieurs sites différents pour les appareils mobiles (cf: feu wml). Bref, bien que cette solution soit toujours utilisée (surtout pour les sites à fort trafic et au budget conséquent), on sent bien une volonté des intégrateurs (nous les premiers) d'échapper à ce piège pour parvenir à une interface qui puisse s'adapter à tous les appareils mobiles.
Un responsive web design (ou une interface adaptable)
Qu'est-ce que c'est ?
Le concept de responsive web design a été introduit grâce à l'adoption des media queries au sein des spécifications CSS3. L'idée est d'appliquer des règles CSS à certains appareils en fonction de leur taille d'écran ou de leur type. De cette manière, une interface qui utilise le responsive web design peut être affichée sur divers matériels et même subir des redimensionnements ou retournements d'écran et s'adapter à ces derniers pour optimiser l'utilisation de l'espace d'affichage disponible.
Les avantages sont clairs : meilleure expérience utilisateur, temps de développement réduis, optimisation des ressources serveur etc... Ce site web, par exemple, propose une feuille de style pour les mobiles et une autre pour les ordinateurs de bureau tout en gardant la même source HTML.
Les inconvénients sont l'abandon du support des vieux appareils mobiles (Windows Phone 6-7, Nokia bas de gamme etc...) et la nécessité de penser le projet en amont pour le mobile (mais ce n'est pas vraiment un inconvénient pour qui met déjà en œuvre les bonnes pratiques de conception).
Mise en œuvre
Il existe plusieurs possibilités pour mettre en œuvre un design responsive.
Se baser uniquement sur un changement de feuille de style
C'est la technique la plus simple. A utiliser en priorité pour les sites web. L'idée est de n'utiliser les media queries que sur les éléments link qui pointent vers les CSS. L'avantage est que grâce aux commentaires conditionnels, on parvient à isoler les vielle version d'Internet Explorer qui ne comprennent pas ces media queries et qui risquent de faire une soupe de CSS avec toutes ces feuilles de style.
Exemple pour ce site :
Utiliser les media queries dans les feuilles de style et au sein des scripts
Cette methode est plus souple et plus facile à maintenir. Elle a cependant l'inconvénient d'être incompatible avec les anciennes versions des navigateurs. Nous l'utilisons pour les applications web qui n'ont pas vocation a être utilisés avec les vieux navigateurs comme Internet Explorer. Cela nous permet d'être sûrs qu'au final, nos applications seront compatibles avec tous les navigateurs sur tous les appareils. Il faut cependant maîtriser le parc utilisé, c'est essentiellement au sein d'entreprises que nous pouvons mettre cela en oeuvre.
Il faut cependant faire attention, le responsive web design ne concerne pas que les styles. Par exemple, on doit aussi adapter l'interface utilisateur au type de navigation (écran tactile, molette, souris, clavier ?), les mouse over ne devraient pas être utilisés sur un appareil tactile (dans les faits, cela fonctionne, mais mal). La librairie ModernizR permet de détecter les écrans tactiles (Modernizr.touch).
Nous avons écrit une application de gestion pour une entreprise utilisant tous ces principes sans limites imposées par des navigateurs viellissant. Un vrai bonheur !
Pour être compatible avec les anciens navigateurs, on peut si on le souhaite utiliser une des nombreuses librairies disponibles. Nous ne le faisons pas pour des raisons d'expérience utilisateur. Supporter IE6/7 en ajoutant des milliers de lignes de codes Javascript dans un navigateur réputé pour ses piètres performances c'est faire croire à l'utilisateur qu'il peut garder son navigateur et bénéficier des dernières avancées alors que ça n'est pas le cas, tout en ralentissant les autres utilisateurs dont les navigateurs sont modernes et prévus pour fonctionner sans ces milliers de lignes de codes supplémentaires.
Bref
Le responsive web design est prometteur, son boulet est Internet Explorer, cependant, cela risque de changer avec les derniers efforts fournis par Microsoft pour mettre à jour leur navigateur. Malheureusement, les utilisateurs de Windows XP, Vista et 7 seront les grands oubliés. Heureusement, Internet Explorer perd du terrain de jour en jour et le responsive web design deviendra la norme !
Aller plus loin
- Pour le fun, visualisez la session de lightning talks à Paris Web 2011 dont l'une des interventions résume avec humour ce casse tête.
- Un article complet sur une autre vision du responsive web design.
- Une vidéo Paris Web sur la création d'interfaces pour le mobile.
- Un article de Google sur le sujet.
Publié par Nicolas Froidure le Mercredi 25 Avril 2012 à 10:09:31
Commentaires
Ce billet vous fait réagir ? N'hésitez pas à ajouter votre pierre à l'édifice ! Ajouter un commentaire