Qu’est ce que le responsive design ?

Il y a quelques années, les pages web étaient figées. C’est à dire qu’elles étaient créées pour une taille d’écran précise et ne s’adaptaient pas à des tailles d’écran différentes. La création des pages en responsive design est apparue à partir de 2010 lorsqu’une multitude de tailles d’écran devenait disponible. Le but était de pouvoir s’adapter à toutes les résolutions et dimensions d’écran du marché.

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

I. Définition
II. Un peu d’histoire
III. Utilité
IV. Avantages et inconvénients
V. Comment faire ?
VI. Comment créer un email en responsive design ?

I. Définition du responsive design

Le Responsive Web Design (RWD), bien souvent appelé le Responsive design, est une technique qui augmente l’ergonomie du site web.

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. 

II. Un peu d'histoire ....

Le responsive web design est un concept assez récent puisqu’il a été abordé pour la première fois en 2010 par Ethan Marcotte

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. 

III. Utilité du responsive web design

Le responsive design est un élément clé de toute bonne stratégie marketing. Il permet d’améliorer grandement l’expérience utilisateur sur un site web. 

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,..).

 

IV. Avantages et inconvénients

Le Responsive Design a de nombreux avantages. On retrouve parmi eux : 

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é. 

V. Comment faire ?

Pour pouvoir créer une page internet ou n’importe quel contenu en responsive design, il faut adapter le code HTML.

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.

VI. Comment créer un email en responsive design ?

Pour créer un email en responsive design vous avez deux options : développer un HTML de votre côté, ou créer votre mail avec Powow.

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.

Cet article pourrait également vous intéresser : https://www.iroquois.fr/tout-savoir-sur-le-marketing-automation/

Une question ? Contactez-nous ici !

Logo Iroquois

    Leave Your Comment

    Your email address will not be published.*

    EnglishFrench