Responsive web design

Exemple de responsive web design pour le site philomag.com.

L’idée clé du responsive design est de tirer parti de l’absence de contraintes physiques du web pour adapter le site à un contexte général : petit écran VS grand écran, connexion rapide VS Edge par exemple. On dépasse donc la logique iPhone 3Gs VS iPhone 4 VS BlackBerry Curve. Ouf !

Pour cela, le site s’appuie sur :

1. Une mise en page flexible, basée sur une grille (960 system, blueprint, bootstrap…)
2. Des fonts définies en em
3. Des margin et padding définies en %
4. Des images et des médias définis en % + max-width : 100%
5. L’application conditionnelle de règles CSS (print + min-device-width + orientation)

Rien de bien nouveau donc mais un ensemble de bonnes pratiques et de trouvailles qui permettent de proposer une bonne expérience utilisateur quelque soit le contexte.

Le responsive design demande un temps de réflexion et des compétences en décalage avec la plupart des budgets et des plannings. C’est donc une solution réservée aux entreprises possédant une vision claire de leur projet et désireuse de réaliser de grosses économies sur la maintenance… mais prête à investir en amont du projet.