Le responsive web design
L’évolution dans la résolution des écrans, de même que la multiplicité des browsers et des périphériques (près de 400 modèles ont été recencés) obligent les concepteurs à développer des sites extrêmement « adaptatifs », voire spécifiques.
Postes fixes, écrans panoramiques, smartphones, tablettes, télévision … : autant d’environnements dont les capacités graphiques et techniques sont très différentes.
Solution ? Adopter le « responsive web design », c’est-à-dire tout un ensemble de techniques permettant de répondre au caractère hétérogène des periphériques clients.
Plus facile à dire qu’à faire … les contraintes sont nombreuses et les outils ne sont pas unifiés :
- Adopter un framework css tel que blueprint basé sur le système de grilles (permettant entre autres de maîtriser la présentation en colonnes). Ce type de squelette a la faculté de s’adapter aux différentes résolutions d’écrans en repositionnant dynamiquement les colonnes les unes par rapport aux autres.
- Utiliser un code (html / javascript) compatible sur les plates-formes visées (les effets drag & drop sont par exemple tout à fait particuliers sur ipad, article intéressant concernant le design sur touchscreen).
- Ergonomie différente en fonction du périphérique (la navigation sur un iphone diffère grandement d’un desktop)
- Utiliser des polices de caractères redimensionnables (sur une base proportionnelle à la résolution disponible)?
- Aperçu des résolutions les plus courantes :
- Utilisation de css3 et notamment des media queries permettant d’adapter le comportement du layout en fonction de la résolution cible. Je vous recommande la lecture de l’article « Les Media Queries CSS3 » sur le site d’Alsacreations.
- Il faut aussi adopter une stratégie quant aux images : redimensionnement dynamique, cropping … attention toutefois au poids de celles-ci : ce sont surtout les appareils mobiles (soumis aux contraintes de bande passante) qui sont concernés par cette problématique.
- Les contraintes d’universalité sont parfois tellement lourdes (impact budgétaire) qu’une stratégie peut consister à développer un site « complet » et un autre, spécifique pour les résolutions « mobiles », ce dernier ayant non seulement une apparence adaptée mais également des fonctionnalités ciblées. Il n’est probablement pas nécessaire d’avoir toutes les fonctionnalités du site « full résolution », sachant que l’utilisation d’un smartphone est différente (recherche …). Cette recommandation peut paraître étonnante mais elle est moins coûteuse que l’adoption d’un site « universel ».
Je vous recommande par ailleurs la lecture de l’excellent article de Gaëtan Weltzer (Design Spartan), fort bien documenté.
Laissez un commentaire