Les internautes accèdent de plus en plus à du contenu via les mobiles, les tablettes et sur d’autres supports comme les TV par exemple. Pour le consommateur, ces terminaux offrent des expériences différentes de navigation : des sites web aux rendus différents et des expériences parfois frustrantes, surtout lorsque l’on doit zoomer avec un smartphone. Devant la multitude de formats possibles, les utilisateurs n’accèdent et ne profitent généralement pas idéalement du site web qu’il consulte, même si vous avez pensé à prévoir des designs différents pour certains terminaux. Le responsive web design répond à cette tendance actuelle de consommation des contenus web sur différents supports et a pour objectif de proposer à l’utilisateur une expérience de navigation identique, quel que soit le terminal utilisé.
En effet en 2011, le marché est là et ne cesse de croître : 38 millions d’internautes, 18.3 millions de mobinautes et 1,5 million de tablettes en France. Autant de nouveaux segments de marché que les entreprises ne doivent pas perdre ! Les entreprises qui désirent maximiser leurs audiences afin d’augmenter leurs revenus, doivent donc désormais composer avec des consommateurs exigeants en matière de services web : leur expérience utilisateur doit être excellente sur tous les supports. Pour ce faire, de nombreuses possibilités s’offrent à elle.
Les marques et les objectifs du Responsive web design sont concomitants et s’inscrivent dans les normes web du W3C, en tous cas pour l’accessibilité du web par tous et partout. Le responsive web design répond donc à un objectif de maximisation des audiences et à l’augmentation de l’accessibilité des services web sur tout les supports. C’est à dire qu’il permet par la conception du design et de l’ergonomie à adapter le site web à toutes les résolutions existantes et notamment aux nouvelles résolutions qui fleurissent.
Nous allons voir dans cet article quelles sont les bases du responsive web design et sa composante technique différente du design classique.
Le responsive web design a une composante technique beaucoup plus forte que le design « traditionnel ». Il va s’aider des dernières normes de l’HTML5 et du W3C tel que le CSS3, les médias queries et les grilles flexibles. Le designer prend donc une place plus importante au sein de l’équipe et s’impliquera énormément avec l’ergonome et le concepteur web.
C’est donc une évolution du métier de designer qui devra posséder des compétences techniques plus fortes qu’auparavant.
Prenons tout d’abord un exemple d’un site avec un responsive web design : http://colly.com/
Ce n’est pas simplement une adaptation sur mobile ou tablette, vous pouvez jouer directement avec la taille de votre fenêtre et vous verrez que le site n’est pas figé. C’est idéal pour travailler avec des fenêtres réduites et l’accès à d’autres terminaux comme le mobile, vous l’aurez compris.
Le responsive web design s’intéresse tout particulièrement au rendu sur le mobile autant que le rendu sur desktop. Au point qu’il remet en cause les principes de conception du design des interfaces d’application en concevant le design sur le mobile avant le design sur le desktop. Le designer concevra dès lors le design mobile en version adaptée voir allégée, puis ajoutera au fur et à mesure de sa conception des fonctionnalités, des différences graphiques ou des mises en avant de service adaptées aux terminaux sur des résolutions plus grandes. L’ergonome et le designer réfléchiront particulièrement aux différents scénarios de navigation sur les différents supports. Nous aurons donc une expérience utilisateur maximale sur tout les terminaux en mettant le plus difficile en première ligne de la conception et en optimisant son contenu.
Comme nous l’avons vu en introduction, le designer devra s’aider de l’HTML5 et du CSS3. L’HTML5 est formidable sur beaucoup de point, avant d’aller plus loin il faut tout de même mettre en garde son utilisation. L’HTML5 n’est pas compatible avec les anciennes versions de navigateurs. C’est à dire que les anciens navigateurs ne supportent pas les dernières implémentations de ces technologies. C’est donc une information cruciale, si vous voulez utiliser le responsive web design, il faut alors bien connaître vos auditeurs et utilisateurs. Mais il existe des solutions que j’exposerai un peu plus tard.
Pour que ces scénarios soit véritablement efficaces sur tous les supports, on se rend compte très rapidement qu’il faut identifier ce qui est pertinent pour les utilisateurs et pour le business model. L’important n’est pas de concevoir un site adapté au plus contraignant des terminaux mais de concevoir un site web qui correspond à ce que d’une part le consommateur recherche et d’autre part à ce qui est important pour votre entreprise.
A la différence du designer qui peut n’utiliser que photoshop pour concevoir un design, le responsive web design utilise trois composantes techniques clef qui sont :
Les grilles flexibles vous permettront d’adapter en proportion les éléments du sites web en fonction de la résolution et du terminal. La conception sous forme de grille est souvent représentée sous formes de plusieurs colonnes et cette conception ne peut pas être utilisée facilement sur mobile.
Pour que le design du site web soit parfait sur le mobile, il faudra alors utiliser les media queries. Il faut bien comprendre qu’en commençant par le mobile, ce sera le desktop avec les navigateurs qui vont gérer le plus de medias queries à la fin de la conception et non pas le contraire.
Le même design pour chaque média pose aussi un problème d’optimisation. Si les textes s’adaptent facilement dans les colonnes et à la variation de taille, il en est autrement pour les images et les videos. Et charger une image avec des tailles différentes ne sera pas optimale, surtout en 3G ou moins sur mobiles. Il faut donc d’une part que les images soit elles aussi flexibles, c’est à dire qu’on affiche une bonne image pour le bon format et notamment de ne charger que les éléments utiles au terminal. Pour cela je vous conseille de regarder du coté de Responsive Images et de scale video. Dernier lien pour l’optimisation, vous pouvez explorer Respond pour augmenter la compatibilité avec les anciennes versions de navigateurs.
Smashing Magazine : responsive web design tutorial
Exemple de site responsive web design du blogwebdesign
L’équipe Synbioz.
Libres d’être ensemble.
336 avenue de Dunkerque
59130 Lambersart
5 rue de douai
75009 Paris
1 rue du Guesclin
44000 Nantes
Nos conseils et ressources pour vos développements produit.