Responsive Design: les outils incontournables

Portrait Charles Tissier

Charles Tissier

publié le 05/01/2015

Le responsive design permet d'adapter aisément votre site à n'importe quel terminal client (tablettes, smartphone, etc...)

Le trafic mobile étant de plus en plus conséquent, les sites doivent être adaptés et offrir une expérience utilisateur optimale : c’est la que le responsive design intervient. Même site, et design adaptable, la nécessité de concevoir un site mobile indépendamment de son site classique n’est donc plus systématiquement nécessaire !

L’objet de ce billet est de vous présenter quelques outils incontournables dans la réalisation de vos sites responsive.

Image de l'article

D’où vient le responsive design ?

Le responsive design a fait son apparition avec la nouvelle spécification Medias Queries du CSS3

A l’époque du CSS2, les medias queries nous permettait de définir les feuilles de style (CSS) en fonction du périphérique. On pouvait définir un style pour les documents imprimés (print), les téléviseurs (tv), les écrans (screen) etc… Avec le CSS3, on peut définir la feuille de style à charger en fonction de la largeur de la fenêtre du navigateur client.

Une fois listées, vous pouvez ainsi choisir votre solution.

Un site responsive a donc classiquement 3 voir 4 feuilles de style distinctes.

Les frameworks accélèrent le développement de vos sites responsive

A l’instar de Symfony pour PHP, Rails pour Ruby ou encore Django pour Python, il existe des frameworks pour le CSS, il s’agit d’un “cadre de travail” mettant à disposition des classes et fonctions CSS pré-conçues pour le développement rapide d’interfaces utilisateur. Ces frameworks proposent également très souvent des librairies javascripts. Je vous propose de faire un petit tour autour frameworks CSS les plus connus et surtout proposant un design responsive.

Bootstrap From Twitter

Visitez le site de Bootstrap from twitter

Foundation (Zurb)

Visitez le site de Foundation Zurb

Metro UI CSS (Windows 8 design)

Visitez le site de Metro UI CSS

HTML5 boilerplate

Visitez le site de HTML5 Boilerplate

Le responsive design n’est pas toujours la solution optimale

Petits sites VS gros sites

Le responsive design est tout à fait adapté pour les petits sites en revanche lorsqu’il est question de l’implanter dans des sites plus conséquents, le travail est tel qu’il est souvent préférable d’opter pour un site mobile dédié.

Site applicatif vs site vitrine

Le responsive design est parfaitement adaptés pour les sites informatifs. Les sites applicatifs ont quant à eux intérêt à se positionner sur une application smartphone dédiée, offrant de bien meilleurs performances et un parcours client pensé sur mesure.

En résumé..

Le responsive design est une solution technologique très séduisante mais pas systématique. Utilisez le pour des petits et moyens site d’information, mais là où le parcours client doit être spécifique ou les fonctionnalités lourdes, adoptez plutôt pour un site mobile dédié ou une application smartphone/tablette.