Responsive Design

Qu’est-ce que le Responsive Design ?

Nommé plus justement par « Responsive Web Design » (RWD), le Responsive Design est une technologie de conception d’interface digitale qui assure que l’affichage de n’importe quelle page d’un site s’adapte automatiquement à la taille de l’écran du terminal (ordinateur, tablette, mobile…) sur lequel l’utilisateur la consulte. Il est différent du design adaptative, bien que les deux concepts visent à améliorer la convivialité mobile d’un site Web.

Le Responsive Design ajuste la mise en page du site Web en fonction de la résolution de l’écran

Le responsive web design (ou site web réactif en français) est l’expression qui explique le mieux cette technique d’affichage des sites internet sur les appareils mobiles. L’objectif est bien entendu de rendre plus facile la lecture et la navigation d’un internaute quel que soit le type de terminal qu’il utilise.

A l’aide d’un smartphone, d’une tablette, d’un netbook, d’une TV connectée ou simplement d’un ordinateur, la page lui apparaîtra complète et ergonomique, sans rien avoir à faire au niveau du zoom avant/arrière et de l’ascenseur horizontal. Le code du site ajuste sa mise en page en fonction de l’écran sur lequel ses pages sont affichées. Les blocs de texte et de contenu graphique peuvent être automatiquement redimensionnés et réorganisés dans leur mise en page.

Cette solution, que l’on peut résumer par « mobile first« , répond à une tendance des internautes qui utilisent de plus en plus d’appareils mobiles, et est rendue possible grâce aux requêtes médias CSS3. Derrière cette adaptation automatique se cachent un même code HTML pour différents types de terminaux, des graphismes à résolution adaptative, un système de grille fluide, et bien sûr des media queries CSS3 pour gérer les feuilles de style.

Des règles permettent aux webdesigners de gérer facilement la création de ce design. Il s’agit de commencer avec un écran de 320 pixels, puis de passer à des résolutions de plus en plus élevées.

Le Responsive Web Design présente certains avantages, mais aussi un inconvénient majeur

Les avantages de créer un site Responsive Design sont clairement importants, du moins tant que le webdesigner fait un bon travail dans sa conception, c’est-à-dire s’il soigne le contenu de ses pages, prédit le comportement de l’utilisateur, prend en compte les différentes fonctions de l’écran tactile terminaux, et sait tirer parti de la tendance à l’augmentation de la résolution. Le simple Drupal V8 ainsi que le puissant CMS WordPress version 3.8 peuvent vous servir.

Pour créer un site web qui s’adapte à tous les supports, il lui suffit de développer un code HTML unique. Côté utilisateur, l’expérience ergonomique positive n’est plus à démontrer. La perfection n’existe cependant pas, car cette adaptabilité sur les écrans mobiles s’accompagne d’un ralentissement de la vitesse d’affichage des pages. La raison principale est que le Responsive doit charger l’intégralité du contenu CSS.

Bien que cette détérioration soit minime, pour certaines applications mobiles, cela peut suffire à pénaliser le choix d’une solution autre que le Responsive. Il est toujours possible que les créateurs du site n’autorisent que certains éléments de contenu à apparaître à une résolution supérieure à celle d’un smartphone, afin de contourner de tels problèmes.

Il convient également de noter que ce temps de chargement des pages a peu d’impact sur le ciblage SEO, mais est très important pour les mobinautes.

Voici quelques publications concernant Responsive Design :