Twitter

Responsive Web design, kesako ?

Par dans Expérience Utilisateur, UI design |

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 :

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.

Construire Une Architecture d’Information
 adaptée au Mobile – ParisWeb 2017 from Stéphanie Walter

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 :

 

 

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.

Stratégie mobile et capacités des navigateurs modernes from Stéphanie Walter

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.