Le responsive web design est né de la multitude d’écrans disponibles et surtout depuis l’avènement des tablettes et l’utilisation fréquente des Smartphones. Pour répondre à tous ces formats on est obligé de créer des sites différents réellement adaptés à chaque contenu :

• Un écran d’ordinateur de bureau (mac ou pc) permet d’afficher
  • des contenus plus longs et plus complexes,
  • plusieurs colonnes sur une page,
  • des images plus grandes avec des agrandissements plein écran.
  • Plus d’éléments dans un site donc plus lourd.
• Un écran de tablette affiche
  • déjà beaucoup moins d’informations,
  • des images plus petites
• Pour les Smartphones c’est encore plus complexe puisque les écrans varient d’un fabriquant à l’autre mais on retrouve
  • des images plus petites pour les Smartphones,
  • et un contenu de quelques lignes,
  • des écrans plus nombreux avec des transitions entre eux,… La navigation n’est plus la même, plus humaine avec le doigt et non une souris ce qui change également le comportement des utilisateurs
  • Des pages plus légères à charger
  • Moins d’effet ou plutôt des effets différents (librairie javascript, jquery)

Toutes ces contraintes rendent difficiles la création d’un seul site qui puissent gérer et s’adapter automatiquement à tous les périphériques disponibles mais le Responsive web design est né !

Responsible web design répond donc à l’adaptation du contenu et de ses images en fonction de la résolution et de la taille d ‘un écran. J’ai vu beaucoup de techniques de mise en page depuis plus de 15 ans, celle là m’a particulièrement interloquée. Cette technique est vraiment efficace, le plus fou est que l’on utilise des langages que les web développeurs connaissent bien : les feuilles de styles mais avec sa dernière version les CSS 3 (avec les media queries). Cela explique pourquoi on ne l’a pas vu apparaitre plus tôt.

Pour être plus concret aller sur ce site : http://www.macdonaldhotels.co.uk/ avec IE9 ou Chrome réduirez la taille de la fenêtre du navigateur pour prendre une taille équivalente à celle d’un smartphone.

Vous obtenez ceci

pour un écran d’ordinateur de bureau

Vous remarquez l’utilisation de diaporama en jquery, d’un design poussé et de l’utilisation de 4 colonnes incluses dans un diaporama

Pour l’utilisation d’une tablette

cela passe à 3 colonnes

Et enfin pour un Smartphone

on retrouve le diaporama du haut fonctionnant parfaitement avec des photos adaptées, les points pour naviguer dans le diaporama ont disparus, le moteur de recherche s’est adapté et réduit ainsi que le menu.

Le 2ème diaporama a disparut pour afficher toutes les images les unes en dessous des autres tout en conservant une efficacité ergonomique.

Alors qu’en pensez vous?

La conception

Je souhaite faire une remarque importante sur la conception d’un tel site qui demande une réflexion en amont plus poussée (avec des wireframe), pour le construire et que tout s’enchaine parfaitement en fonction des différents périphériques. Vous devez définir l’objectif pour vos différents site et savoir si cette technique est utile à mettre en place pour votre projet.

Les coûts

Si vous deviez réaliser 3 sites pour 3 supports différents avec cette technique vous n’en faite plus qu’un. Le temps de travail se ressent sur la conception fonctionnelle et sur la mise en page mais pas forcément sur le développement des fonctionnalités. Vous aboutissez finalement à la maintenance d’un seul site pour plusieurs périphériques et donc à une réduction des coûts.

Attention le devis final est certainement moins important que de concevoir 3 sites classiques (pc, différentes versions de navigateurs sur pc (ou mac), mobile, tablette,)  mais pas moins important que de faire 1 seul site.

Des compétences hyper spécialisées

Donc la difficulté est de trouver une société qui connaisse parfaitement les contraintes des différents supports mais également les spécificités de certains périphériques car un Iphone est différents d’un Android et d’un Windows Phone 7 pourtant tous des Smartphones.

Le fait de rechercher des compétences particulières pour cette conception va alourdir également le devis., enfin théoriquement.

Je vous invite à aller voir cette article qui détaille la conception de ce site : http://www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/

La compatibilité avec les navigateurs IE7, IE8 et IE6

Pour ce qui est de IE 6, il n’est de toute façon plus soutenu par les concepteurs. Pour les 2 autres il n’y pas de soucis car le site prendra la forme normale donc une utilisation plutôt en mode PC comme on le voit sur 90% des sites actuels. Mais comme j’en ai déjà parlé pour l’HTML5 il existe des bibliothèques pour simuler les avantages de la CSS 3 (j’en parlerais dans un prochain billet)

Plus d’informations

Je ne vous détaillerais pas l’aspect technique qui mérite d’autres billets mais je vous conseille de visiter les articles suivants qui vous éclaireront dans ce nouveau concept :

http://www.slideshare.net/livefront/responsive-design-7877412

http://www.designspartan.com/tutoriels/responsive-design-definition-fonctionnement-ressources-et-tutoriels/

http://blog.johanbleuzen.fr/responsive-design-pour-tous

Des informations sur le responsive Images

http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/