Maisondelamagie.fr, un site ‘Responsive Design’ avec CMS.Eolas

23/02/2012

La spécification CSS3 Media Queries du W3C définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour des pages (X)HTML, ce procédé nous permet de faire des sites ‘responsive’ qui s’adaptent à la taille des écrans utilisés (ordinateurs, tablettes ou smartphones).
Le site de la Maison de la Magie est donc décliné en 3 versions : écran classique (minimum 1024px), écran "tablette" (800px de large) et mobile (320px de large). Vous pouvez voir ces transformations en  redimensionnant la fenêtre de votre navigateur (Firefox, Chrome, IE supérieur à la version 7...).

Aperçu du site consulté avec un écran classique

Aperçu du site consulté avec une tablette

Aperçu du site consulté avec un smartphone

Les avantages de ce type de sites sont que le client a une unique contribution et surtout qu'il peut communiquer sur une URL unique sans se soucier du support de ses visiteurs.
La contrepartie est que la phase de conception est allongée car certains éléments doivent être étudiés 3 fois et qu'il faut s'assurer de la faisabilité technique des différentes transformations.

Ce site s’appuie sur le CMS 5.6 de la ville de Blois, il dispose d'un module pour gérer les têtières.