Créer un email responsive pour un e-mailing sur mobile

Emailing avec Lemlist

Vous souhaitez optimiser au maximum votre campagne e-mailing ? Alors vous devez absolument vous renseigner au sujet de l’approche responsive ! Vous tombez à pic, aujourd’hui nous avons décidé de revenir sur le célèbre concept du webmarketing adaptatif et de vous expliquer comment faire un email responsive. En bonus, on vous donne quelques alternatives encore plus efficaces, pour faire mieux que le responsive ! Allez, c’est parti.

Qu’est-ce qu’un email responsive ?

Comme de coutume, en marketing, on aime bien les termes anglophones ! Outre les prononciations aléatoires que cette altération linguistique peut occasionner, côté compréhension aussi, c’est souvent un peu la pagaille ! Par exemple, si au lieu de parler d’email responsive on parlait plutôt de courrier électronique adaptatif, peut-être que ce concept serait un peu plus clair !

L’email responsive, et bien c’est tout simplement un mail dont la mise en page s’adapte en fonction des caractéristiques de l’écran sur lequel il est affiché. Et plus particulièrement, l’email responsive répond au besoin de proposer des emails marketing agréables à consulter depuis un smartphone. Car, comme chacun le sait, les téléphones portables occupent aujourd’hui une place centrale dans notre vie quotidienne ! À ce sujet, il faut savoir que 68 % des usagers ouvrent leur boîte mail dès qu’il reçoivent une notification sur leur smartphone (source : étude SNCD, 2018)

L’importance d’adapter vos emails marketing à l’affichage multi-écrans ne se pose donc pas. D’ailleurs, cette approche n’est pas nouvelle ! Cela fait bien longtemps que les marketeurs ont compris l’importance d’adapter un contenu aux petits écrans de nos smartphones ! Ethan Marcotte a popularisé le concept de web adaptatif avec son livre « Responsive Web Design » publié en… 2011 !

Concrètement, comment faire un email responsive ?

Faire un email responsive

Les media queries : comment ça fonctionne ?

Comme vous le savez, derrière tout contenu web il y a un code html. Donc, pour rendre un email responsive, on va agir au niveau de son codage. Pour cela, nous allons faire appel aux mêmes techniques qui sont employées pour le web adaptatif : les media queries. Les media queries sont des règles que l’on va appliquer en fonction des caractéristiques de l’écran. D’ailleurs, si on le souhaite, on peut adapter notre contenu non seulement en fonction de la taille de l’écran, mais aussi en fonction de son type, son orientation et de sa résolution.

Bref, le media query nous permet de faire du sur-mesure. Pour cela, on fait appel à certaines propriétés du CSS3, qui est un langage de mise en forme et de design. Nous ne rentrerons pas dans les détails, mais si vous souhaitez en savoir plus sur ces drôles de petites bêtes, on vous recommande la lecture de cet excellent article où les media queries sont expliqués, en long, en large et en travers.

Pour en revenir à notre sujet, il y a deux façons de faire pour intégrer des règles media queries au code html du mail que vous souhaitez rendre responsive :

  • Soit vous chargez un fichier. css dans votre code html avec la balise <link/> et vous rajoutez un attribue media pour définir vos règles dès l’entête de l’email.
  • Soit vous chargez directement vos règles dans la feuille de style, en rajoutant directement votre règle, précédée de « @media »

Et là, la question subsidiaire est la suivante : comment fait-on pour rédiger ces fameuses règles media queries ?

Rédiger les règles media queries.

Bien entendu, nous ne prétendons pas ici vous donner un cours de codage html ! Et même si vous avez quelques bases, on vous recommande chaudement de vous adresser à un professionnel, ou d’utiliser un email builder. Ah oui, car, comme on le verra dans le prochain paragraphe, figurez-vous qu’il existe des petits outils capables de faire tout cela pour vous !

Comme nous le disons, les media queries vous permettent d’adapter votre mail à toutes les caractéristiques de l’écran sur lequel il sera ouvert. Ainsi, vous pourrez agir sur plusieurs critères à la fois. Par exemple :

  • Height : hauteur de la zone d’affichage.
  • Width : largeur de la zone d’affichage.
  • Orientation : orientation de l’écran (paysage ou portrait)
  • Media : type d’écran.
  • Screen : écran traditionnel.
  • Handheld : mobile.

Cette liste est non-exhaustive, il en existe pleins d’autres. Ensuite, vous pouvez appliquer une largeur minimale, en rajoutant le préfixe « min- » à « width » ou appliquer une hauteur maximale de cette manière : « max-height ». Vous pouvez également combiner vos règles : « only », « and », « not ».

Exemple pratique : imaginons que votre email contient une image et vous voulez que sa taille s’adapte automatiquement si la hauteur de l’écran est inférieure à 1280px. Dans ce cas, votre règle s’écrira de la manière suivante : @media all and (max-height : 1280px). En effet, dans notre langage, ceci signifie : sur tous les types d’écrans et sur ceux dont la hauteur est au maximum de 1280 px, adapte la taille de l’image.

Faire un email responsive facilement : le « mail builder ».

En théorie, utiliser les media queries n’est pas si compliqué que cela… Mais en codage, il y a toujours des aléas et si vous êtes débutant, vous risquez fort de vous emmêler les pinceaux. Heureusement, comme il existe des « sites builders », il existe aussi des « mails builders » ! Et bien entendu, ils s’occupent des media queries automatiquement, sans que vous n’ayez à coder quoi que ce soit. Et puisque ces outils existent, alors pourquoi s’en priver ?

Cet article n’a pas pour but de faire la promotion d’un logiciel en particulier, mais voici tout de même quelques pistes que vous pouvez creuser si le cœur vous en dit :

  • Mailjet, qui est un outil très complet, intuitif au tarif abordable. Lisez notre avis sur Mailjet si vous souhaitez en savoir plus à son sujet.
  • Convertkit, autre logiciel fort recommandable sur lequel nous avons écrit un avis détaillé. N’hésitez pas à le consulter.
  • Aweber, dans la même trempe que les deux autres outils que nous venons de citer. Lisez notre avis sur Aweber pour le comparer et choisir celui qui vous convient le mieux.

Tous ces logiciels offrent un essai gratuit entre 20 et 30 jours, alors profitez-en pour les tester !

Le design mail responsive : les limites du media query.

Parce que les clients de messagerie se sont multipliés et parce qu’ils ont tous leurs petites manies, l’approche responsive via le media query n’est pas parfaite. En effet, toutes les messageries ne supportent pas la technologie CSS3 ! Du coup, non seulement vous perdez du temps à intégrer des règles qui ne seront pas reconnues, mais en plus le rendu est pire que si vous n’aviez pas intégré de règles du tout…

Et figurez-vous que ce ne sont pas « quelques clients de messagerie au hasard » qui sont concernés. Le géant Gmail par exemple ne prend pas en charge les media queries… Quand on sait que cela représente plus de 50 % des parts de marché, on hésite tout de suite un peu plus à se lancer dans l’aventure des media queries !

Mais alors, comment faire pour créer un email marketing adaptable aux écrans de smartphone efficace sur toutes les messageries ?

Comment créer un mail adaptatif pour smartphone

Comment optimiser une campagne e-mailing sur du multi-écran ?

L’approche hybride : du responsive sans media query !

Face aux problèmes de compatibilité avec les media queries, l’approche hybride n’y va pas par quatre chemins : faire du responsive oui, mais sans utiliser de media queries. Cette bonne idée, c’est Fabio Carneiro qui l’a eu. Et il est également à l’origine de la création du logiciel de gestion d’emailing MailChimp. Bien entendu, nous lui avons dédié un article, que vous pouvez retrouver ici : notre avis sur MailChimp.

Nous ne rentrerons pas dans les détails techniques de l’approche hybride. Grosso modo, il s’agit de voir les choses sous un autre angle, en termes de pourcentages plutôt que de pixels. Cela permet au contenu de s’adapter en fonction des proportions de l’écran, plutôt qu’en fonction d’une valeur fixe. Dit comme ça, c’est très subtil, mais côté codage, cela change tout !

Bien sûr, cette technique n’est pas parfaite non plus. D’abord parce qu’on ne se passe pas complètement des media queries car il faut tout de même définir une hauteur et largeur maximale. Et puis, à moins d’utiliser un mail builder adapté, faire ce travail de codage à la main est un peu complexe

Texte brut : parce que la simplicité est synonyme de fiabilité.

Cela peut vous paraître quelque peu drastique. Mais, question backup, on ne fait pas mieux que la bonne vieille version texte ! Car, de cette manière, vous êtes sûre que votre message sera délivré. Et il ne faut pas perdre de vue que c’est le plus important finalement.

Alors, pensez à prévoir une version libre de ressources médias ! Et si vraiment vous ne pouvez pas vous empêcher de glisser un contenu ludique, pensez au gif, il est compatible avec tous les clients de messagerie !

L’affichage « mobile only » : le m-marketing à la rescousse !

Et puis, à l’opposé de la version texte, on a la version mobile only laquelle, comme son nom l’indique, consiste à créer un email ou une newsletter uniquement pour les smartphones. Ici, on pose le problème à l’envers : au lieu d’essayer d’adapter un contenu web vers un contenu mobile, on créer un contenu mobile qu’on adapte éventuellement à l’affichage web. C’est l’approche m-marketing. Et c’est sans doute la plus adaptée !