Qu’est ce que le responsive design ?

Cette nouvelle technique a aussi pour but de s’adapter aux nouvelles tendances de navigation, à savoir celle sur les téléphones portables.

Elle permet l’amélioration de l’interface digitale, dès sa conception. Son objectif est d’adapter l’affichage d’une page d’un site web à tous les périphériques, en fonction de la résolution de l’écran, pour une expérience utilisateur optimisée. Ce design permet au contenu d’un site web de s’adapter à la taille de l’écran, peu importe le terminal. 

Concrètement, une page en responsive design apparaîtra entière, ergonomique, sans barre de défilement horizontale sur n’importe quel périphérique et n’importe quelle résolution d’écran : smartphone, ordinateur tablette, TV connectée, etc. 

Pour que cela soit possible, il y a une adaptation de la part du code du site afin que la mise en page soit en adéquation avec l’écran d’affichage. Cette adaptation peut passer par le redimensionnement des éléments textes et images de la page ainsi qu’une modification de leur disposition. 

Il écrit un livre dans lequel il détaille ce concept consistant à utiliser le même contenu mais dans des dispositions différentes.

Reprenons l’histoire depuis le début :

• En 1989, les sites web étaient très sobres. L’écran était noir et quelques pixels venaient colorés les textes, qui étaient les seuls contenus présents.
• En 1995, nous connaissons les premières images dans les sites web grâce à de multiples tableaux imbriqués dans d’autres tableaux. Nous connaissons cette même année, l’apparition de Javascript permettant de résoudre certaines problématiques de l’HTML.
• En 1996, un nouvel outil apparaît et vient métamorphoser les sites web : Flash. Il permet aux web designer de pouvoir moduler leurs sites web à leur guise : création de formes, d’animations, d’interactions, de modèles, insertion de polices,… Cependant le chargement de la page était long et nécessite un plugin flash.
• En 1998, c’est la naissance de Cascading Style Sheets, plus connu sous le nom CSS. L’idée est de dissocier le contenu de l’apparence. CSS définit l’aspect et le formatage, tandis que HTML gère le contenu. Le CSS de 1998 n’était pas le même que celui d’aujourd’hui. Il était bien moins flexible et était souvent mal supporté par les navigateurs.
• En 2007 il y a l’apogée des smartphones et il a fallu adapter les sites web à ces nouveaux périphériques. Pour y parvenir, l’idée a été de créer des grilles de colonnes puis de standardiser des éléments tels que boutons ou les formes.
• En 2010, c’est la naissance du responsive design par Ethan Marcotte. 

En effet, grâce au responsive design, il n’y a plus de différences d’affichage entre une position paysage et une position portrait. Le référencement sera meilleur, surtout dans le cas où deux versions d’un site existent. 

Pour terminer, cela résoudra les problèmes de résolution d’affichage entre les différents périphériques (tablette, ordinateur, smartphone,..).

L’amélioration du SEO car les algorithmes des moteurs de recherche favorisent les sites en responsive design. Le site web sera également plus réactif du fait de la meilleure adaptabilité aux différentes résolutions de l’écran. 

Au niveau du prix également, cela évite de faire un développement pour le site en version mobile et un développement pour un site en version web. En responsive design, nous pouvons faire du 2 en 1 😉 En effet, créer un site responsive qui s’adapte à tous les affichages ne nécessite de développer qu’un seul code HTML. 

Le développement en responsive design permet également d’éviter une lourde maintenance du site et garantie une URL unique.

Nous pouvons aussi rajouter comme avantage notable l’expérience utilisateur. Ce dernier n’aura plus besoin de faire défiler les pages à l’aide d’une barre horizontale, il verra tout le contenu correctement aligné,… Bref, son expérience sera bien meilleure!

Comme toute bonne chose, le responsive design a également des inconvénients. 

Il nécessite une maîtrise de la part du webdesigner qui doit l’intégrer correctement dès la conception du site internet. 

Également, l’un des inconvénients du responsive design est d’avoir un temps de chargement et d’affichage des pages plus long en version mobile car l’intégralité du fichier CSS doit être chargé. 

Pour produire un contenu en responsive design, il y a des règles à suivre pour y parvenir plus aisément. 

Tout d’abord il faut simplifier la page de façon à ce qu’elle s’adapte plus facilement au téléphone portable et veiller à construire la maquette sur une grille flexible. 

La première des choses à faire sera d’insérer une balise dans le header :  <meta name= »viewport » content= »width=device-width »>

Il faudra également utiliser des modules media queries qui sont indispensables à la création d’un site responsive. Vous devrez également segmenter les différentes tailles d’écran avec des frontières bien définies. Il y a une règle bien connue des web designers qui réside dans le fait de partir d’un affichage en 320 px, puis de tendre vers des résolutions plus importantes.

Pour ce qui est des affichages, il faudra organiser les contenus sur mobile sous forme de colonne et border les images avec des valeurs minimales et maximales de façon à ce qu’elles restent visibles. Les images devront être adaptées à la taille de l’écran, en considérant que plus l’écran est petit, plus l’image doit être resserrée. 

Une fois votre site et vos pages créés en responsive design, vous pouvez vérifier s’ils sont bien considérés comme adaptés aux mobiles auprès de google, en cliquant ici.

Powow est une plateforme multicanale qui permet l’envoi de campagnes emailing et SMS. Cette plateforme Saas met à votre disposition son éditeur de template, qui vous permet de créer automatiquement des mails en responsive design, sans vous poser de question.

Vous pourrez vous rendre compte des différents affichages téléphone/tablette/ordinateur grâce aux outils de prévisualisation.