Ergonomie

Lundi 12/06/2012

Webdesign réactif

  Avec l’augmentation croissante du nombre des mobinautes et l’arrivée constante sur le marché de nouveaux appareils qui varient en terme de résolution, il est opportun d’opter pour la nouvelle génération de design, le responsive web design. Le « responsive web design » ou “webdesign réactif” en français, un nouveau concept de webdesign a fait son apparition depuis  2011. C’est une nouvelle approche de conception de site web qui permet une mise en page adaptée en fonction de la résolution d’écran de l’utilisateur et non pas des systèmes d’exploitation. Le site web proposé n’est alors pas dédié uniquement aux ordinateurs de bureau ou portable, smartphones (ou plus directement aux OS – Androïd, iOS, Blackberry OS, etc…) mais s’adapte aux différentes plateformes de consultation. Cette méthode permet d’obtenir un contenu de page identique mais une disposition modifiée qui prend en compte la spécificité de chaque terminal.

Mode de fonctionnement :

  C’est  avec l’arrivée du html5 et  le «CSS3 media queries (gestion CSS des résolutions)» qu’on a pu voir un design de site web plus interactif et plus compatible avec les différents types de médias. Ceci est fait par le paramétrage des feuilles de styles CSS en réduisant le nombre de colonnes en fonction de la taille de la fenêtre,  en déplaçant le contenu de ces colonnes à un autre endroit et en modifiant la taille des caractères pour rendre le texte plus lisible. La typo devient plus grande lorsque le format de la fenêtre rétrécit pour compenser la visibilité sur un écran minuscule. La dimension des médias (images, vidéos) est également modifiable. Dans d’autres cas, certaines informations secondaires sont simplement retirées de l’écran lorsque le site est affiché sur de petits écrans pour mettre en valeur ce qui est essentiel et simplifier l’affichage. En pratique, un site qui comporte quatre colonnes pourra aisément, devenir un site comportant 2 colonnes sur un i Pad ou encore en un site à une seule et unique colonne sur un écran i Phone et ce, tout en conservant les images d’origine, de la bonne grandeur et des typographies adaptées à l’écran utilisé.

Illustration :

 

Les avantages que nous avons pu constater sont les suivants :

• Une souplesse d’affichage sur des interfaces multiples sans multiplier les feuilles de style. Le site conserve en plus  la même url pour tous les supports.
• Réduire les risques de voir certains visiteurs quitter prématurément la page web à cause d’un problème de compatibilité.
• Un contenu accessible à tout moment et sur tous les supports.
• Une formule magique pour les marques qui cherchaient à cibler les différents segments du marché en maximisant leur audience à l’international. Les enjeux du business semblent colossaux quand on sait que des acteurs tels Vente-Privée ou eBay ont réalisé en 2011 un chiffre d’affaires via mobile de respectivement 100 millions et 5 milliards d’euros (cf. étude Affiliate window 2011).
• Gérer tous les formats d’affichage dans le même code favorise l’allégement des développements et donc
• ça peut réduire les investissements en termes de création et gestion.
• Développer plusieurs sites en un et pour les différents types d’appareils exige plus de travail sur le contenu (focaliser sur l’essentiel) par ailleurs une communication efficace et percutante.
• Meilleure communication sur les terminaux mobiles.
• Possibilité de faire des communications via QRcode.
• Le responsive design est une évolution orienté utilisateur en offrant une expérience unique et optimale quelles que soient ses pratiques de navigation (Étant donné que le comportement d’un internaute est différent de celui d’un mobinaute ou d’un utilisateur de tablette). En dépit du fait que l’utilisateur ait un petit écran, l’expérience se doit d’être tout aussi agréable.
• Tracking exploitable pleinement.

Inconvénients à utiliser le "webdesign intéractif":

• Développer en une seule fois un site qui pourra être « redimensionné» sur tous les supports,  requiert cependant une certaine flexibilité : des images, des colonnes, mais aussi des contenus (y compris les menus de navigation). Ainsi, on ne peut réduire le poids, ce qui peut poser problème aux utilisateurs de téléphones mobiles qui s’attendent à un chargement rapide
• Le webdesign adapté reste une nouvelle technologie non maitrisée par tous les développeurs et intégrateurs.
• La réalisation de ce type de support demande un temps de conception plus important en amont et demande aux différents intervenants du projet (directeur artistique, chef de projet, webdesigner, intégrateur,…) de penser le site dans son ensemble compte tenu des contraintes de mise en page et de développement. Ce qui n’est pas sans impact sur la chaîne de développement et sur le temps de production.

   Vu que le webdesign intéractif est encore à ses débuts, ces quelques lacunes techniques, bientôt rattrapées, ne remettent pas en question l’avenir prometteur du concept. En fait, il représente une réponse sérieuse et concrète à un problème existant. Alors que le nombre de mobinautes est en croissance continu, opter pour le responsive design est bel et bien un choix stratégique. Il devient une nécessité face à la modification des comportements des utilisateurs et la multiplicité des écrans nomades. Contrairement à une approche par dispositif (iPhone, iPad et autres) qui devient ingérable, le design Web réactif met l’utilisateur au cœur du procédé en lui offrant une expérience optimale grâce à un design ergonomique, épuré et  interactif.