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

Retour

Commentaires

Ce billet vous fait réagir ? N'hésitez pas à ajouter votre pierre à l'édifice ! Ajouter un commentaire

Derniers articles

Soumettre des bugs

Qu'il s'agisse de votre propre site ou que vous soyez simplement un de ses utilisateurs, soumettre des bugs améliore la qualité des sites web. Découvrez comment soumettre des bugs de qualité afin de permettre une résolution rapide. Suite de l'article

Sélection des commentaires

Les partisans de la liberté d'expression vont bondir, nous pensons qu'il est nécessaire de sélectionner les commentaires, voyons comment et pourquoi. Suite de l'article

Se tromper en web design

Vous l'avez peut-être remarqué, même les plus grands pondent régulièrement des maquettes de site inefficaces et ante-ergonomiques. Voici notre explication. Suite de l'article

Commentaires récents

Nous sommes d'accord, Lorem Ipsum, c'est mal ;-). J'ai la chance de ne pas faire de sous-traitance avec des entreprises que je ne connais pas. Je travaille avec un réseau de partenaires avec lesquels je suis très proche. Du coup, ... par Froidure Nicolas Suite


Je vais me permettre de te citer Nicolas, ce sera plus simple pour montrer nos points d'accord et de désaccord. Même si au fond, tu vas voir qu'on est d'accord, il y a juste un point à éclaircir (tout à la fin pour le méga suspen... par Emmanuel Suite


"empêcher le client de se concentrer sur le texte quand on lui présente une maquette" Bien au contraire ! Le texte et la maquette sont indissociables. Surtout en matière de webdesign où le contenu est l'axe central de la création. ... par Froidure Nicolas Suite

Nous contacter

SARL Elitwork
10, rue Antoine DEQUEANT
62860 Oisy le Verger
Tél. : 03 21 59 62 24
E-mail

Restons en contact

Profitez de notre veille en choississant parmi les nombreux canaux de diffusion que nous vous proposons.

Nos outils

Tremplin Numérique : Agence web spécialisée en référencement SEO à Paris et partout en France.
BBComposer : Cet éditeur permet de rédiger du contenu de haute qualité pour vos sites Internet grâce au respect de la sémantique du HTML.
CanImage : Editez facilement vos images avant de les ajouter à votre site Internet directement à l'intérieur de Firefox.