Comment créer un mail responsive ?

Introduction

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 qui ne s’adaptent pas à des formats différents. Mais, avec la diffusion des téléphones portables et lorsqu’une multitude de tailles d’écran devenait disponible, les modalités de consultation des pages web ont changé. Forcément, la technologie a dû s’adapter aux nouvelles tendances. La création des pages en responsive design est apparue pour pouvoir s’adapter à toutes les dimensions d’appareils mobiles disponibles sur le marché.

Le but de cette technique est de permettre une user experience plus fluide lors de la consultation d’une page web.

Dans cet article, nous allons voir comment créer un mail responsive !

1. Définition du responsive design

Le Responsive Design, aussi appelé Responsive Web Design (RWD), est une technique qui intervient pour augmenter l’ergonomie d’une interface web dès sa conception. 

Dans la pratique, l’affichage d’un site web ou une page s’adapte automatiquement à la taille de l’écran de l’appareil utilisé. Le tout, sans besoin de manipulation, de barre de défilement horizontal ou de zooms de la part de l’utilisateur.

2. Les avantages (et les inconvénients…) du responsive design

Comme on peut l’imaginer, les avantages du Responsive Design sont nombreux:

Du point de vue du développement, un seul code HTML implique une maintenance agile et un prix de conception réduit.
Meilleur référencement et amélioration du SEO, qui privilégie les pages web en responsive design.
Meilleure user experience, ce qui va avoir des effets positifs dans l’acquisition, la fidélisation et la réputation de la marque.

Compte tenu des avantages, il faut aussi considérer les inconvénients liés à cette technique:

Il nécessite une maîtrise de la part du webdesigner qui doit l’intégrer correctement dès la conception du site internet.
L’adaptation aux écrans mobiles comporte une diminution dans la vitesse de chargement et d’affichages des pages web. La raison est le volume du fichier CSS, qui doit être chargé dans sa totalité. Dans la plupart des cas, cette dégradation est minime, et elle n’a qu’un très faible impact dans le positionnement SEO.
Cependant, ça peut impacter l’expérience utilisateur: pour ceci, c’est au créateur du site web de trouver une solution. Par exemple, il peut choisir d'afficher certains éléments graphiques que pour des résolutions plus élevées que celles des smartphones.

3. Comment créer un mail responsive ?

Pour qu’une page soit totalement responsive, il faudra partir du code HTML. Le code HTML sera seul et unique pour les différents types de terminaux, et il faudra prévoir des graphiques en résolution adaptive, ainsi que des grilles fluides. 

Il y a une règle bien connue des webdesigners qui réside dans le fait de partir d’un affichage en 320 px, puis de tendre vers des résolutions plus importantes.

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. 

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 via : https://search.google.com/test/mobile-friendly

4. Le Responsive Design sur 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. 

Ceci est possible grâce à ses deux outils de création:

Editeur drag&drop responsive

Editeur drag&drop: permet de créer son mail en utilisant des sections pré-existantes et de les remplir avec les éléments qu’on souhaite.

éditeur wysiwyg responsive

Editeur WYSIWYG: permet de créer son mail en important un code HTML.

Avec les deux outils, votre mail sera totalement responsive.

Une fois que vous aurez créé le corps de votre mail, vous pourrez également le prévisualiser, pour vérifier que le mail soit responsive en fonction de la taille de l’onglet dans les différents affichages téléphone/tablette/ordinateur.

Vous pourrez également effectuer des tests pour vérifier le rendu de votre mail…

… sur ordinateur…

prévisualisation ordinateur responsive

… et sur mobile.

prévisualisation portable responsive

Finalement, le test de rendering vous permettra de voir comment votre mail sera affiché dans les différentes boites mail existantes: 
rendering test responsive

Cet article vous a plu ? Retrouvez ici notre vidéo Youtube sur la personnalisation conditionnelle !

Une question ? Contactez-nous ici !

Logo Iroquois