Jusqu'à il y a peu, la taille des écrans de nos ordinateurs ne faisait qu’augmenter d'année en année. Pour les créateurs de sites web, il « suffisait » d'élargir les interfaces au fil du temps.

Puis, sont arrivés les iPhone et autres Smartphones, les iPad, tablettes et autres Notebook, qui révolutionnent progressivement Internet et ses usages.

Un des défis majeurs pour les webdesigners est désormais de construire une interface lisible sur les petits écrans, restant agréable sur les grands, tout en tenant compte des contraintes propres à chaque média (navigation à la souris ou au doigt), afin de fournir la meilleure expérience possible à l'utilisateur.

tailles-d-ecran

Une réponse est le Responsive Web Design.

Ethan Marcotte est le premier à en avoir exposé les principes dans un article publié mai 2010. Des principes qui se résument en deux mots : adaptabilité et réactivité et qui reposent sur trois éléments fondamentaux :

  • des grilles qui permettent de construire des interfaces en utilisant un nombre plus ou moins élevé de colonnes dans lesquelles viennent s’inscrire les contenus
  • des images flexibles dont la taille, la disposition s’ajustent en fonction de l’écran
  • des requêtes de média (media queries) qui permettent de détecter quel est le support utilisé (ou plutôt la taille de son écran) et adapte le design en conséquence (taille, forme, position des éléments,…)

C'est une technique encore assez jeune et qui fait appel aux derniers standards web : HTML5 et CSS3 (en particulier pour les media queries) et nécessite une réflexion approfondie de la part du designer du site sur la manière de redistribuer les éléments en fonction de la résolution de l’écran, voire sur l'apparition/disparition de certains éléments.

Le Responsive Web Design offre donc de nouvelles possibilités en matière de conception de sites Internet et fourni des outils et méthodes permettant de servir à chaque appareil le design qui lui est le plus adapté.

Un thème Zenphoto "Responsive"

Après avoir créé 2 thèmes "statiques" pour Zenphoto et naviguant régulièrement sur le Net avec un SmartPhone, je vois bien désormais les avantages d'une galerie photo qui s'adapte au média de consultation.

Après avoir vu l'excellent thème zpSkeleton , je me suis lancé dans une nouvelle aventure et je travaille sur un nouveau thème Zenphoto qui sera lui-aussi "Responsive". J'espère aboutir rapidement à une version beta que je ne manquerai pas de vous montrer.

Quelques ressources

Informations sur le Responsive Web Design

Outils permettant de bâtir des sites Responsive (anglais)

Exemples de sites Responsive (redimensionnez votre navigateur pour voir les différentes présentations du thème)

exemple3