Responsive Web Design

RWD (Responsive Web Design), RESS (Responsive Design + Server Side Components), what about ?

Devenue de plus en plus standard comme une réponse efficace à la multiplication des supports Web (Ordinateurs / Tablettes, Mobiles) et des résolutions d’écrans multiples (le temps du site au layout unique est révolu), la technique dite de « Responsive Web Design » est devenue de plus en plus « mainstream ».

Cet article fait suite au tweet de Jean-Michel MESSIN pointant sur l’article du site Interfaces Riches.

ACSEO utilise cette technique depuis certains temps pour les projets qui le nécessitent, comme ce fût le cas pour la campagne Masterchef de TF1, accessible grâce à une seule application aux formats Web, Tablette, Mobile, et sous forme d’application Facebook.

En quelques mots, le Responsive Design permet d’effectuer un rendu adapté au format de l’écran. Une grande partie de cette technique reporte sur les langages clients interprétés par le navigateurs, c’est à dire le code HTML, CSS et Javascript. Les apports des Media Queries (CSS3), permettent par exemple de déterminer une mise en forme spécifique à une résolution d’écran.

La mise en place d’un site Responsive peut facilement être mise en place en utilisant le framework Twitter Bootstrap, qui répondra nativement aux problématiques soulevées coté client.

Mais pour aller plus loin, et disposer d’un véritable site Internet capable de s’afficher dans les meilleures conditions quel quel soit le support ou le débit de la connexion de l’internaute, la prise en charge de la partie client doit être complétée par l’ajout de traitements côté serveur.

Mobile peut vouloir dire connexion 3G plus lente, inutile de charger une image de 2000px de large sur un iphone. RESS (Responsive Design + Server Side Components) illustre l’ensemble des traitements qui peuvent être mis en place côté client et serveur pour servir un contenu optimisé à chaque device.

Le site Interfaces Riches pointe vers deux présentation très bien faites permettant de mieux comprendre les mécanismes pouvant être mis en place :



comments powered by Disqus