Le Responsive Webdesign (RWD) est une méthode de conception de site internet utilisant différents principes et technologies (css3 & Media Queries) dont le principal objectif est d’offrir aux utilisateurs une consultation confortable sur des écrans de tailles très différentes. Par ce procédé d’ergonomie d’interface innovant, chaque utilisateur peut consulter le même site web via une large gamme d’appareils informatiques différents (ordinateur de bureau, tablette ou Smartphone…), avec le même confort de lecture. Cette technique de web adaptatif est idéale pour les appareils tactiles dotés de petits écrans. Elle garantit ainsi le confort visuel tout en améliorant l’expérience utilisateur (UX), tant en lecture, qu’en navigation. Voyons comment le responsive webdesign fait d’un site web adaptatif un bel exemple de plasticité des interfaces ?
Un article inspiré de Qu’est-ce que le Responsive Webdesign ou adaptative Design ?
Quels sont les principes du responsive webdesign ?
La conception de sites web adaptatifs (ou RWD, Responsive Web Design, en anglais) est une méthode de conception définie à l’origine par Ethan Marcotte dans « A List Apart ». Ce concept répond aux besoins des utilisateurs et des appareils qu’ils utilisent. Avec le responsive webdesign il ne s’agit donc plus de concevoir autant de parcours utilisateur qu’il y a de familles de terminaux utilisés, mais de concevoir une interface unique adaptative à tout type de supports de lecteurs et tailles d’écran.
Cette nouvelle approche de conception visant l’amélioration de l’expérience utilisateur résulte d’un phénomène sans cesse en mutation : l’utilisation d’appareils connectés aux formats d’écran différents pour naviguer et faire des recherches sur le web connaît un essor et un développement considérable. Malheureusement certains types de terminaux comme les téléphones portables et autre appareils mobiles se trouvent limités par la taille de leur affichage, nécessitant alors une approche différente voire d’amélioration de la mise en forme et de la disposition du contenu s’affichant à l’écran.
Pour concevoir une interface ou une application internet responsive webdesign, elle doit répondre à trois principes clés :
- Utiliser des grilles de contenu dont l’affichage est flexible : par ce procédé de conception, un site est en capacité de se transformer et de s’adapter à la taille du navigateur ;
- Utiliser des médias flexibles : faire en sorte que l’ensemble des images et des vidéos soient adaptables aux grilles d’affiche et in fine au gabarit de la page affichée (sans que ces médias sortent du cadre ou soient tronqués) ;
- Appliquer un ensemble de règles CSS basé sur Media Queries servant à poser des conditions d’application quant à l’affichage et ses fonctionnalités possibles (afficher, masquer, redimensionner, changer le rendu de l’interface…).
En vertu de ces bases à appliquer, le responsive webdesign devient ainsi une technique d’intégration et de développement pour le web ayant pour principal objectif l’adaptabilité de toute interface web aux différentes résolutions d’écrans existantes.
Enfin, le résultat final à obtenir est de pouvoir afficher un site de la meilleure manière possible, afin de garantir d’une part un confort de lecture et d’autre part, rendre l’expérience utilisateur (UX)des plus mémorable.
La conception adaptative nécessite tout d’abord une mise en page simple.
En effet, il s’avère indispensable de pouvoir penser les contenus en bloc afin de garantir un réagencement facile et des plus optimum selon les types et tailles des supports
C’est aussi la raison pour laquelle il importe également de s’assurer que le code HTLM développé soit à la fois léger et simple. Cette condition de conception permet avant tout :
- toute imbrication possible de divs
- d’éviter les positionnements absolus
- d’utiliser le doctype HTML 5 et respecter les normes w3c
Il convient également de faire bon usage des media queries afin de rendre possible facilement et automatiquement l’adaptation de la forme du site aux différents supports mobiles.
Quant au design propre au contenu et à son ergonomie, il doit par conséquent permettre une organisation aisée et adaptée de l’ensemble des contenus d’information (textes, images, vidéos). Comme ce doit-être le cas pour les zones dites d’interaction tactile pour les mobiles par exemple. Chaque bouton est redimensionné de manière à faciliter l’accessibilité, tout en s’assurant qu’une taille de page raisonnable soit conservée.
Au cœur de la démarche responsive webdesign réside donc l’utilisabilité c’est-à-dire la capacité pour tout objet connecté d’être facilement utilisé par une personne donnée et de réaliser la tâche pour laquelle il a été ainsi conçu. C’est pourquoi ce mode de conception innovant prend en compte non seulement la performance de la réalisation de la tâche, mais surtout vise la satisfaction que procure l’utilisation de l’objet, tout comme la facilité avec laquelle chaque utilisateur apprend à s’en servir.
Lire aussi : Quelques pistes pour améliorer l’UX de votre site WordPress
