Responsive web design : les indispensables à connaître et les bons réflexes à adopter

« Responsive web design », terme vu et revu ces dernières années. Mais que signifie-t-il réellement ? Encensé, critiqué, dépassé ? Qu’en est-il aujourd’hui ?

 

Avec l’avènement du web 2.0, Internet est devenu accessible partout, tout le temps, depuis n’importe quel appareil.
Internet aujourd’hui, c’est le web de la mobilité. Passants rivés sur leurs téléphones alors qu’ils traversent la route ou amis absorbés par leur smartphone alors qu’ils boivent un verre avec vous en terrasse. Ils sont surement en train de lire les dernières actualités sur Twitter, liker la vidéo d’un chaton sur Facebook, regarder la vidéo d’un youtubeur en vogue ou peut-être même en train d’acheter une paire de chaussures sur leur site de vente en ligne préféré.
Lors de la conception des sites et la création d’interfaces, ces usages doivent être nécessairement considérés.
L’enjeu étant de répondre aux exigences de l’Internet mobile : instantanéité, ergonomie, lisibilité… Et ce pour chaque support (PC, tablette, téléphone) car chacun a des caractéristiques et des contraintes spécifiques. C’est de là qu’est né le Responsive web design.

 

Définition

Ce terme désigne l’ensemble des techniques de conception de contenus Internet permettant de proposer des contenus auto-adaptables en fonction des interfaces de consultation utilisées par le visiteur : une page web ou une image peut ainsi se redimensionner en fonction de la taille d’écran du terminal utilisé. Autrement dit, cela correspond à l’élaboration de sites offrant une expérience de lecture et de navigation optimales pour l’utilisateur quelle que soit sa gamme d’appareil (téléphones mobiles, tablettes, liseuses, moniteurs d’ordinateur de bureau).

 

Et concrètement ?

Quand on fait du responsive web design, l’organisation du contenu est automatiquement adaptée : là où un contenu peut être affiché sur trois colonnes pour un écran large, il peut passer à une colonne sur l’écran d’un téléphone par exemple. Quand on dispose de moins de place en largeur, on peut mettre les « blocs » côte à côte. Dans ce cas, on les positionne plutôt de haut en bas selon leur importance.
Mais attention, ce n’est pas une règle : on peut aussi considérer que certains blocs sont inutiles sur mobile et ainsi les faire disparaître. On peut aussi, à l’inverse, faire apparaître de nouveaux blocs et outils de navigation sur smartphone si on le souhaite. C’est tout le travail de conception du webdesigner : il conçoit un seul site mais imagine plusieurs designs afin que le site s’adapte à chaque résolution d’écran, de la plus petite (généralement 480px) à la plus grande (1920px par exemple).

Design envisagé, il est temps de donner vie au site, c’est au tour de l’intégrateur web d’intervenir. Pour réaliser un site responsive, il devra connaître le fonctionnement technique des Media Queries CSS qui permettent d’écrire des règles qui disent à l’ordinateur par exemple : « Si la largeur de l’écran est supérieure à X et inférieure à Y, alors placer ce bloc en-dessous du précédent ». Évidemment, cela passe par la maîtrise des CSS.

 

Les bons réflexes : pensez « mobile first »

Sachant qu’en 2016, 58 minutes étaient passées sur Internet, chaque jour, depuis un smarpthone (étude de We are Social), il devient primordial de penser mobile first. Cette nécessité est d’autant plus vraie depuis le déploiement de l’index mobile first de Google. Webdesigners, intégrateurs, créateurs de contenu, pensez donc avant tout à la lecture sur smartphone et à ses impératifs (recherche de rapidité, scroll, importance des images, contenu pertinent et succinct…).

Rappelons que depuis le 21 avril 2015, le responsive web design est un critère que Google prend en compte dans son référencement : votre site doit être compatible avec les mobiles si vous voulez qu’il apparaisse dans les premiers résultats de recherche. En plus d’accroître votre référencement naturel, cela vous permettra aussi de toucher une plus large audience et de vous assurer un meilleur taux de conversion.

 

Qui a dit que le responsive web design était simplement une mode ?

Post Author: Equipe Webmarketing Eolas

L’équipe DMK (comme on dit chez nous), Digital Marketing pour les curieux, se compose d’une armée de consultants et chefs de projets, plutôt jeunes (la plupart :), sympas (tous :), dynamiques (grâce au café) et passionnés par le Web. SEO, SEM, Web Analytics, noms de domaines, réseaux sociaux... tout cela est notre quotidien !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *