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 :
- Une mise en page flexible, basée sur une grille (960 system, blueprint, bootstrap…)
- Des fonts définies en em
- Des margin et padding définies en %
- Des images et des médias définis en % + max-width : 100%
- 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.