Skip to main content

Responsive webdesign

& créativité

L’approche du Responsive Webdesign (RWD) est le fait d’adapter la mise en page de son site internet à l’utilisateur en fonction de la taille, du type et de la résolution de son écran. Ainsi, les utilisateurs bénéficient de la meilleure apparence et de la même harmonie sur tous leurs appareils, quelle que soit la taille de leur écran. C’est un ensemble de technologies et de principes de conception, qui mettent l’accent sur la simplicité et la flexibilité.

L’objectif est d’obtenir une expérience utilisateur optimale, quel que soit l’appareil ou le navigateur utilisé pour y accéder.

Qu'est-ce que le Responsive Webdesign ?

L’indépendance n’était pas quelque chose d’inné chez moi, loin de la. Je n’aurai jamais cru travailler à mon compte il y a quelques années.

J’ai donc du apprendre sur le tas, notamment pour m’organiser. Avec un peu de chance, j’y suis vite parvenue, même si je me suis souvent laissée déborder. Tout comme je planifie mes entraînements, je planifie ma charge de travail.

Cela me permet d’éviter les mauvaises surprises, même s’il y en a toujours. J’essaie de prioriser les choses les plus importantes, mais surtout, je suis rigoureuse. Et c’est cette rigueur que j’ai apprise dans le sport qui me sauve au quotidien.

Le mouvement du responsive webdesign

Ethan Marcotte en est l’un des précurseurs. Il développe ce procédé dans son livre “Responsive Web Design” paru en 2011. Dans celui-ci, il en explique les grands principes, les différentes utilisations de grilles et d’images flexibles, ainsi que le contexte dans lequel cette méthode s’est développée. C’est un progrès considérable qui apporte une aisance de navigation pour les utilisateurs mobiles. Cette innovation n’a pour but que de faciliter l’utilisation et offrir un confort de lecture, en utilisant par exemple une méthode de zoom, de recadrage, ou encore de défilement, puisque le responsive détecte la résolution de l’écran.

C’est à ce moment précis que les métiers graphiques du web interviennent. De l’imagination d’un site internet à sa conception, il faut désormais réfléchir à la partie responsive. Aujourd’hui, le “mobile first” est préconisé. C’est-à-dire qu’au lieu de réfléchir à l’identité du site internet sur une interface “desktop”, les Webdesigners sont poussés à imaginer d’abord le rendu sur mobile. Une réflexion est mise en place pour imaginer l’aspect visuel, l’ergonomie, et les interactions qui seront présentes sur le smartphone, mais aussi sur l’ordinateur. Deux termes sont à prendre en compte : flexibilité et adaptabilité.

Rester créatif dans la conception d'un site internet en responsive webdesign

Cependant pour les métiers graphiques, le mot le plus important est créativité. Être créatif avec l’arrivée du responsive n’a pas toujours été évident. Selon Nicolas Ledoux, ce procédé étant démocratisé, il devient parfois difficile de le mettre en œuvre avec la multiplication des formats : il faut garder un accès à l’information en offrant une expérience différenciante.

Benoît Drouillat, fondateur de Designers Interactifs, fait part de son avis sur le responsive : “Le mobile et les terminaux alternatifs influencent profondément le design d’interface. Aujourd’hui les contenus doivent être impérativement disponibles sur une très grande variété de supports et de plateformes (notamment les réseaux sociaux). Le mobile par exemple nécessite d’imaginer des interfaces pour des temps d’attention plus courts, avec une qualité de bande passante fluctuante, tout en tirant partie des capacités du terminal (géolocalisation, accéléromètre, etc.). Pour le e-commerce, cette activité n’échappe pas aux évolutions importantes des usages. Une part significative, de l’ordre de 25 %, des achats en ligne s’effectue sur mobile”.

Les interactions sur le responsive webdesign

André Pilch, UX Designer aux États-Unis, pense que les nouveaux supports type smartphone ou tablette ont vraiment tout changé. Il est plus facile aujourd’hui d’acheter sur un téléphone, plutôt que d’ouvrir un ordinateur. En termes de design, le mobile a simplifié les interactions mais aussi le visuel. On constate que même le web sur ordinateur commence aujourd’hui à retrouver des caractères du mobile et des écrans tactiles, c’est l’esprit mobile first. Benjamin Guedj, co-funder de l’agence Nuage, estime que le responsive a simplifié la conception de webdesign59. “Si on regarde les tendances et l’évolution du webdesign ces 5 dernières années, on voit clairement un changement radical entre le nombre d’informations dans une page et la conception du layout, soit la mise en page”.

Responsive Webdesign et e-commerce

Gaétan Pautler, directeur artistique chez Diatem, s’accorde à dire que l’expérience d’achat en ligne ne se cantonne plus uniquement à l’ordinateur de bureau. L’utilisateur peut bénéficier d’offres ultra limitées et personnalisées. Le mobile permet également à l’utilisateur de comparer les offres, même dans un magasin physique. Tout cela crée une nouvelle expérience commerciale hybride.

Cependant, il est important de prendre en compte les conditions d’utilisation de ces supports lors du processus de création. Bien souvent, le responsive webdesign fonctionne par “blocs” qui passent les uns en dessous des autres. Parfois, l’image est simplement redimensionnée dans un format plus petit pour s’adapter au support. La mise en page est établie en ligne, où tout doit être droit, ordonné. Tous ces ajustements ont un impact sur la créativité du Webdesigner. Lorsqu’il crée un élément qui sera présent sur le site, ou l’interface du site web en elle-même, il doit toujours avoir en tête le rendu qu’aura cette création sur mobile.

Désormais, le responsive doit faire partie des compétences des métiers créatifs du web. La concurrence étant omniprésente, cette méthodologie est aujourd’hui une expertise. Le responsive design n’est pas le futur du e-commerce, mais bien son présent. C’est une nécessité dans le domaine du web, et notamment du design.

Vous avez apprécié ?

PARTAGEZ L'ARTICLE SUR PINTEREST

Prêt à vous lancer ?

Start your project

Puisque tout commence par une conversation.

- CONTACTEZ-MOI -

Leave a Reply