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 :

  1. 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.
  2. 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).
  3. Ergonomie différente en fonction du périphérique (la navigation sur un iphone diffère grandement d’un desktop)
  4. Utiliser des polices de caractères redimensionnables (sur une base proportionnelle à la résolution disponible)?
  5. Aperçu des résolutions les plus courantes :
  6. 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.
  7. 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.
  8. 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