4 étapes indispensables pour créer un email responsive

Avec plus de la moitié des campagnes email marketing ouvertes sur des appareils mobiles et 4 emails sur 10 désormais ouverts via des applications mobiles, il devient de plus en plus important d’optimiser vos messages pour une expérience mobile optimale. Et c’est là que le Responsive Design entre en jeu. Il est donc grand temps de penser de manière responsive ! Suivez ces étapes pour commencer…

Revoir son format d’emailing

Tout comme les sites web, les emails sont traités avec un code emailing HTML. Si l’image est primordiale pour attirer l’utilisateur, certaines d’entre elles peuvent être bloquées par certains clients emails. Pour connaître tous les clients emails concernés, plusieurs outils sont disponibles sur mobile et web et utilisent les données de Yahoo, Gmail, Apple Mail, Outlook.com, Thunderbird, Outlook.com ou La Poste sur Desktop.

Formation webmarketing

Recourir aux tables HTML      

Les tables HTML ou <table> permettent d’intégrer des images, des textes et des éléments dans un email responsive design. Le travail des breakpoints (le nombre de pixels affichés à l’écran), des media queries ou requêtes média et du CSS sont également requis pour l’optimiser.

Néanmoins, au moment d’intégrer des éléments dans les cases, veillez à ne faire aucune erreur, car cela peut avoir des conséquences sur tout l’email. Il peut ne pas s’afficher comme prévu, car certains clients emails peuvent changer la manière d’interpréter les balises HTML.

Afin de simplifier l’envoi de l’email suivant, vous pouvez créer votre framework responsive email ou template responsive email dès que vous obtenez la combinaison adéquate. Ce template vous permet d’être fidèle à votre planning éditorial et d’envoyer rapidement des emails à tous vos prospects ainsi qu’à vos clients cible.

Anticiper avec une version texte

Prévoyez une version texte afin d’assurer la lisibilité du message dans l’ensemble des configurations et sur tous les clients emails. Grâce à la version texte, vous êtes en mesure de :

  • Effectuer une analyse à l’aide des filtres spam ;
  • Optimiser l’accessibilité au moyen de transcripteurs de mail, avec une facilité de lecture, etc. ;
  • Répondre aux préférences de certains utilisateurs avec une version simplifiée. L’affichage HTML peut en effet être désactivé avec certains clients emails.

Tester l’email responsive

Certains outils vous permettent de tester votre email responsive sur différentes tailles d’écran et diverses plateformes. D’autres vous aident à valider le code, les liens et à tester les filtres anti-spam afin notamment de garantir l’affichage des images. Vérifiez également la délivrabilité de votre email pour savoir s’il peut arriver dans la boîte de réception de son destinataire, malgré les filtres anti-spam des services mails.

11 bonnes pratiques à retenir pour rendre des emails responsive

Rendre des emails responsive, c’est aussi appliquer ces quelques bonnes pratiques :

  • La segmentation de la base d’envoi : un meilleur ciblage permet d’optimiser vos performances ;
  • L’emploi au moment adéquat de l’espace du pré-header : ce dernier s’affiche dans la majorité des smartwatches et des clients mail mobiles ;
  • L’utilisation d’un nom d’expéditeur facile à reconnaître ;
  • La personnalisation de l’email pour transmettre des informations pertinentes ;
  • Des pages d’atterrissage à rendre également responsive ;
  • Le recours à des tailles de polices recommandées : 22px pour les titres et 16px pour le texte ou 13px au minimum ;
  • L’optimisation de la lecture avec un texte alternatif au cas où les images sont bloquées ;
  • Le choix d’un sujet percutant pour un meilleur taux d’ouverture ;
  • L’emploi d’images en 2x pour les écrans retina ou haute résolution ;
  • L’incitation à la réponse directe en évitant les adresses « no-reply ».

Pensez également à vérifier le poids total de votre email avant de l’envoyer. En général, il doit être compris entre 50 et 70 Ko. Si le poids dépasse 102 Ko, Gmail coupe votre message. Et si le poids du fichier complet est supérieur à 100 Ko, les filtres anti-spam le bloquent.

Conclusion

Ces dernières années, quelques innovations ont également fait leur apparition et peuvent être ajoutées dans vos emails responsive :

  • Le GIF animé : cette alternative à la vidéo sert à animer une partie de l’email et est compatible avec les clients mails ;
  • Les images dynamiques : elles permettent d’obtenir un email dynamique et peuvent être mises à jour à distance par le serveur ;
  • L’AMP for email : elle permet de rendre les e-mails similaires à une page Web interactive ;
  • Le fond vidéo : cette fonctionnalité est uniquement disponible sur Outlook 2011 Mac, le client mail iOS et Apple Mail. Les autres clients email peuvent quant à eux profiter d’un fond statique.

Rendre vos emails responsive, c’est donc adapter leur lisibilité en fonction de la taille de l’écran et de l’espace disponible. Pour effectuer une telle stratégie, ayez une bonne stratégie d’email marketing et faites en sorte de captiver l’attention de la cible avec des informations utiles, des images faciles à charger et un call to action efficace. Le type d’écran de support de lecture du destinataire doit également être connu pour anticiper son rendu mobile au moment de la conception de la maquette. Le format d’emailing à respecter, l’utilisation de tables HTML, de textes alternatifs en cas de blocage par les filtres spam et la réalisation de nombreux tests sont autant d’étapes à suivre avant l’envoi de vos emails responsive.