Selon un sondage, 40% des Français déclarent consulter leurs mails en priorité sur leur mobile. Ce pourcentage ne fait qu’augmenter au fil des années. Et cela, les entreprises l’ont bien compris. C’est pourquoi on entend de plus en plus parler de responsive design, notamment pour les emails. De quoi s’agit-il ? Comment créer un email responsive ? C’est ce que nous allons voir, entre autres, dans ce guide. 

Qu’est ce que le « responsive design » ?

Avant de nous intéresser plus en détail à l’email responsive, attardons nous sur la notion de « responsive ». Il s’agit d’un terme anglais qui peut être traduit par « réactif » ou « prêt à répondre ».

Appliqué au domaine du web, responsive design signifie qu’un site/une application/un outil informatique dispose d’un code qui répond à certaines normes. Notamment des normes qui lui permettent de s’adapter à tous les types de supports (mobile, tablette, ordinateur…). Ceci concerne tous les éléments du site.

Le responsive design désigne toutes les pratiques d’intégration HTML d’un emailing. C’est-à-dire que l’affichage du texte, des images et autres éléments visuels s’adaptent à la taille de l’écran utilisé. 

Comme nous l’avons évoqué, nous sommes de plus en plus nombreux à consulter nos emails sur mobile. Les chiffres parlent d’eux-mêmes :

  • Plus de 43% des emails reçus sont lus sur mobile
  • Les utilisateurs de mobile ont tendance à consulter leur application mail 3 fois plus que sur ordinateur
  • 60% de la population totale française utilise l’email
  • Les Français passent en moyenne 4.8 heures par jour sur leur mobile
  • Gmail, Outlook (Hotmail) et Orange mail sont les applications les plus utilisées en France.

Pourquoi rendre ses email responsive ?

Les chiffres de nombreuses études l’attestent, il est de plus en plus courant d’utiliser son mobile pour consulter ses emails. Avec ces nouvelles habitudes de comportement viennent de nouvelles habitudes de lecture.

En effet, lire sur l’écran d’un mobile est différent du fait de lire sur l’écran d’un ordinateur. Il est vrai que de nos jours, les écrans de smartphone sont de plus en plus grands et sophistiqués. Cependant, un utilisateur ne se comportera pas de la même façon selon le support utilisé.

La taille plus restreinte d’un écran de mobile oblige l’utilisateur à réaliser diverses actions pour pouvoir lire l’intégralité d’un message. Comme faire défiler la page vers le bas, zoomer, cliquer sur les images pour les agrandir…Ce qui n’est pas forcément le cas sur une tablette ou un ordinateur. Selon la largeur (width) de la boîte du contenu des éléments, l’affichage d’une page peut se faire dans son intégralité.

C’est en raison de ces différences d’affichage et de lecture que le responsive design est devenu si important en marketing.

email responsive

Email responsive : de quoi s’agit-il exactement ?

Comme nous l’avons vu plus haut, le responsive design consiste à faire en sorte, via le code d’intégration, que les éléments d’une page s’adaptent au support. C’est-à-dire que la taille des divers éléments se modifie en fonction de la taille d’affichage possible sur l’écran.

Un email responsive est un email qui utilise des tables et des images fluides, et des media queries (module CSS3). Et ce, dans le but que l’affichage des emails puisse être contrôlé, peu importe le support sur lequel il est ouvert. 

En clair, un email responsive est un email doté d’un design qui se modifie et se redimensionne. Pour pouvoir s’adapter à la largeur de l’écran de lecture et ainsi améliorer l’expérience de lecture de l’utilisateur. 

Comment créer un email responsive en 4 étapes ?

Comme évoqué précédemment, la différence entre un email « classique » et un email responsive réside dans le code d’intégration.  Pour rendre un email responsive il faut ajouter des media queries. Il s’agit d’un module CSS3 qui permet de rendre les divers éléments du mail fluides. Ainsi, ce module CSS3 indique aux éléments comment ils doivent se « comporter » selon des conditions spécifiques. Notamment adapter leur affichage selon la largeur de l’écran. 

Cependant, avec l’évolution du web, l’utilisation seule de media queries n’est plus suffisante pour rendre un email responsive. En effet, face à l’augmentation des applications mail disponibles, les niveaux de support pour email responsive ont évolué. Pour pouvoir créer un email responsive qui fonctionne, plusieurs étapes de conception doivent être respectées.

A voir aussi : Les meilleurs logiciels emailing gratuits (2022)

Étape 1 : repenser le format de l’emailing

Quels que soient les types d’emails, informatif ou transactionnel, ils contiennent un code HTML comme les sites web.  Dans un email HTML, le rôle de l’image est crucial. Mais il faut garder en tête que certains clients mails bloquent les images par défaut. C’est le cas notamment de Gmail, Outlook ou encore Yahoo sur web et mobile.  Alors que d’autres clients emails laissent le choix à l’utilisateur de bloquer ou non les images d’un mail HTML.

Pour que l’information soit fluide, quel que soit le support, il faut veiller au texte alternatif aux images. Ce qui est appelé « all text » dans le code d’intégration. 

Étape 2 : faire attention aux tableaux HTML 

Lors de la conception d’un email responsive on « monte » le responsive design. Comme lorsqu’on « monte » une page en code HTML.

Pour intégrer les divers éléments (texte, image) il faut utiliser le tableau HTML. Généralement plusieurs tableaux en même temps. Cela peut vite devenir un casse-tête car les éléments sont intégrés dans des cases.  Une seule erreur dans une case aura un impact sur l’ensemble de l’emailing. 

De même, certains clients peuvent avoir sélectionné des paramètres qui modifient la façon d’interpréter les balises HTML. Ce qui influe sur l’affichage des emails.  Pour éviter ces écueils, il est conseillé de réaliser une phase de template responsive email. Qui est aussi appelée « framework responsive email ».  Cette étape est cruciale car si vous souhaitez industrialiser votre emailing marketing, et suivre votre planning, vous devez être efficace. Et donc ne pas passer du temps à chaque fois à chercher les bugs de rendu HTML. 

Étape 3 : penser à faire une version texte

Cela peut sembler contradictoire après les deux premières étapes qui consistaient à travailler le code HTML. Mais en plus d’avoir une version HTML travaillée, vous devez avoir une version texte brut. Et ce pour plusieurs raisons :

  • Elle garantit la lisibilité de l’email sur tous les clients emails, quelles que soient les configurations.
  • Il s’adapte à la préférence de certains utilisateurs pour la version simplifiée. En effet beaucoup de clients mails offrent la possibilité de désactiver l’affichage HTML.
  • Une bonne accessibilité (facilité de lecture, transcripteurs de mails…).
  • Une bonne analyse par les filtres spam.

Étape 4 : ne pas négliger les tests

Dernière étape de la conception d’un email responsive, mais pas des moindres, le test. Pour savoir si votre email responsive fonctionne, rien de tel que de le tester en « conditions réelles ». Qu’il s’agisse d’emails marketing ou de newsletters, il faut vérifier la compatibilité multi-écrans et multi-navigateurs de vos templates. Ce que l’on appelle le « device width » (largeur de l’appareil en français). 

Pour ce faire, divers outils existent. Ils vous permettront de tester plusieurs éléments comme les filtres anti-spam, de valider le code et les liens.  Cela permet entre autres de garantir l’affichage de l’image. Et de vérifier la délivrabilité de votre email responsive. C’est-à-dire savoir s’il arrive à franchir les filtres anti-spam des services de mail.

A voir aussi : Comment apporter la meilleure expérience Onboarding emailing

Email responsive hybride pour être lu sur chaque boîte mail

responsive

Comme nous l’avons découvert lors des étapes de conception d’un email responsive, certains clients mails ne supportent pas ce format. C’est notamment le cas du client mail Gmail, qui est pourtant très utilisé en France et dans le monde. Pour pallier ce problème, une nouvelle solution a vu le jour, sous l’impulsion de Fabio Carneiro de MailChimp. Il s’agit de l’email responsive hybride

Cette technique reprend certains éléments du responsive design. Comme le tableau ou l’image fluide. La grande différence avec l’email responsive « classique » c’est que ce tableau et cette image sont fluides par défaut.  Pour rendre fluides ces éléments, l’email responsive hybride n’utilise pas de media queries. En bref, cela consiste à faire du responsive design sans media queries.

Ce responsive design hybride est fondé sur 3 principes :

  • L’utilisation d’éléments fluides (tableau, image…) par défaut.
  • L’utilisation du module CSS « max – width » qui limite la largeur sur ordinateur.
  • L’utilisation des commentaires conditionnels de Microsoft. Afin de limiter la largeur sur Outlook. 

         

Les éléments qui montrent que l’email responsive design est fondamental

Le smartphone est privilégié pour lire les emails

En effet, selon plusieurs études, 43% des emails reçus sont ouverts sur mobile. Et ce chiffre est en constante évolution. Il est donc crucial de ne pas négliger le responsive design d’un mail. Au risque de « perdre » des lecteurs, et donc des clients potentiels.

Un temps d’affichage trop long est rédhibitoire

Plusieurs statistiques ont étudié la réaction des destinataires de mails. Il en ressort qu’un mail qui ne s’affiche pas correctement est supprimé au bout de 3 secondes. Sur Internet tout va plus vite, les utilisateurs souhaitent des sites réactifs.  Il est important de rappeler que les mails que vous envoyez sont en quelque sorte l’image de marque de votre entreprise. Ils vont donc influencer, positivement ou négativement, de potentiels clients.

D’autres recherches ont montré que si une expérience mobile est jugée désagréable (mail ou site), 50% des clients seront réticents. 

Les mails sont consultés plus souvent sur mobile

En moyenne, un utilisateur de mobile regardera 3 fois plus ses mails que sur un ordinateur. Les utilisateurs de smartphones ont aussi tendance à ouvrir plus de mails.  Cela signifie donc qu’ils ont plus tendance à être plus impliqués, et offrent un meilleur taux d’engagement. 

Avoir un email ou un site doté de responsive design est donc fondamental pour maintenir l’intérêt des consommateurs. 

Le trafic sur mobile est plus rentable

Nous l’avons vu, de plus en plus de personnes utilisent leur mobile pour surfer sur Internet et consulter leurs mails. Cela a un impact sur le marché. Selon une étude réalisée par Yesmail, les utilisateurs de mobile vont plus facilement acheter via ce support. 

La conversion (la transformation de prospect à client) se fait également plus rapidement sur mobile que sur ordinateur.  Une autre bonne raison d’opter pour un Email responsive. 

Une attention de lecture plus courte

Sur mobile, la durée d’attention moyenne de lecture d’un texte est de 3 minutes. L’utilisateur ne va donc pas prendre le temps de lire un texte s’il doit sans cesse ajuster l’affichage de celui-ci. C’est là tout l’enjeu du responsive design. En s’adaptant à la taille de l’écran, il facilite la lecture, et améliore l’expérience de l’utilisateur. 

Lors de la conception de l’email, il est donc important de veiller au style. De façon que toutes les informations importantes puissent être lues dans ce laps de temps. 

L’expérience mobile : un facteur clé de réussite pour une entreprise

Une expérience mobile jugée désagréable aura un impact sur l’image de l’entreprise. Et donc sur ses ventes. C’est pourquoi de plus en plus d’entreprises souhaitent améliorer le responsive design de leur emailing et de leur site. Cela peut être un facteur déterminant pour se différencier de la concurrence et booster les ventes. 

FAQ

Que sont les media queries ?

Les media queries, aussi appelées « requêtes média » en français, sont des modules qui permettent de faire des modifications. Notamment sur l’apparence d’un site ou d’une application selon le support utilisé (type d’appareil). Et selon les caractéristiques de ce support. Comme la résolution de l’écran ou la largeur de la zone d’affichage.
 
En clair, les media queries permettent l’adaptabilité d’un contenu selon le support sur lequel il est visionné. Cela améliore grandement l’expérience utilisateur et représente un enjeu majeur dans le marketing actuel.