Bonnes pratiques emailing
Maîtriser la conception d’emails responsifs
Comment faire pour que vos emails s'affichent correctement quelque soit le support ? Nous vous donnons quelques astuces pour réussir votre design responsif.
Vous vous souvenez de ces paquets de céréales avec des cadeaux que vous adoriez enfant ? Ne pas savoir sur quoi vous tomberiez à la fin vous poussait à ouvrir et dévorer le paquet entier d’une seule traite. Si l'élément de surprise était excitant à l'époque, cela n’est plus vraiment le cas aujourd’hui. En particulier pour le marketing par email.
Ne laissez pas le hasard décider si le GIF de votre dernier bulletin d'informations s'affichera correctement dans un client et pas pour un autre. Chaque client de messagerie ayant ses propres règles, nous avons étudié les clients les plus populaires et vous expliquons comment assurer une conception responsive pour chacun d’entre eux.
Table des matières
Les principaux clients de messagerie
Bien qu'il existe beaucoup de clients de messagerie, les 5 les plus utilisés représentent une part de marché combinée de 73 %. Une fois que vous avez saisi les principes pour ces clients, vous serez sur la bonne voie pour un emailing plus responsive. Ce chiffre provient de Litmus, qui a vérifié 1 milliard d'adresses email en mars 2015. Dans cet article, nous allons nous concentrer sur les 5 principaux clients de messagerie :
Apple iPhone – 28 %
Gmail – 17 %
Apple iPad – 12 %
Outlook – 8 %
Apple Mail – 8 %
Pourquoi est-il important de proposer des emails responsifs ?
Comme nous l'avons indiqué plus tôt, les clients de messagerie mobile sont devenus le principal outil que nous utilisons pour ouvrir nos emails. Pour nous assurer que nos emails s'affichent correctement sur les appareils mobiles et en particulier les dernières modèles d'iPhone, nous devons penser à la conception responsive. Un email responsif est un message qui change de forme et de taille pour s'afficher correctement en fonction de la taille de l'écran de l'appareil. Voici quelques didacticiels en ligne très utiles pour ceux qui n'ont pas de connaissances avancées en HTML, avec des techniques simples pour la création de messages responsifs.
Pour formater nos emails, nous utilisons traditionnellement les feuilles de style CSS comme nous le ferions pour le web design. Nous pouvons utiliser le CSS pour créer des modèles d'email adaptés aux mobiles, mais un problème demeure. Gmail et d'autres clients de messagerie ne sont pas de grands fans du CSS et peuvent retirer vos balises <style> et ainsi compromettre le design de vos emails.
Comment concevoir mes emails pour qu'ils s'affichent bien sur tous les clients ?
Vous vous demandez sans doute maintenant quelle technique utiliser pour que vos emails s'affichent comme vous le souhaitez sur toutes les principales plateformes. Voici quelques astuces pour vous aider :
Apple iPhone - Lorsque vous concevez des emails pour iPhone, en particulier pour les derniers modèles d'iPhone 6, faites particulièrement attention à la largeur des emails. Il est ici essentiel de concevoir vos emails avec la taille de l'écran en tête. Pour vous assurer que vos emails s'affichent bien sur tous les appareils mobiles, utilisez les media query pour indiquer à votre email de s'adapter à la taille de l'écran de l'appareil.
Gmail - Comme nous l'avons indiqué plus tôt, Gmail n'est pas un grand fan du CSS. Pour que vos messages s'affichent sur mobiles ET sur Gmail, vous devez donc placer les styles les plus importants inline. Voici une démonstration rapide de Litmus, qui vous explique comment le faire. Le CSS intégré en tête de votre email devrait ressembler à ceci :
<html> <head> <meta charset=utf-8> <style type="text/css"> .ReadMsgBody {width: 100%;} .ExternalClass {width: 100%;} </style> </head> </html>
Et c'est ce à quoi vous voulez que votre CSS inline ressemble :
<span style="font-size: 22px; font-family: Arial, sans-serif; color: #222222;" >Hello!</span>
Apple iPad – Nous utilisons ici une technique très similaire à l'optimisation des emails pour les mobiles. En observant vos rapports de campagne, vous pouvez voir les modèles et appareils que vos clients utilisent pour ouvrir leurs emails. Utilisez les dimensions des appareils populaires et les media query pour vous assurer que vos messages s'affichent correctement sur les iPad ou toutes autres tablettes fréquemment utilisées par vos clients.
Outlook – Outlook est un des plus anciens clients de messagerie, ses débuts remontant à 1997. Outlook a depuis connu de nombreux changements, en particulier en 2007. Outlook 2003 utilisait Internet Explorer pour afficher les emails. Lors de la version suivante, cependant, Microsoft Word a commencé à être employé. Étant donné que Word se charge du rendu des emails dans Outlook, de nombreuses propriétés CSS ne sont pas reconnues par Outlook. Voici quelques articles utiles qui détaillent ce à quoi vous devez faire attention. Pour faire bref, le principal enseignement est que pour que vos emails s'affichent correctement dans Outlook, vous devez utiliser votre CSS inline au lieu de le placer dans la section header. Vous pouvez utiliser des outils gratuits pour placer votre CSS inline facilement.
Apple Mail – Le moteur de rendu Webkit est utilisé par Apple Mail pour afficher les emails. Webkit sert de base de navigateurs comme Google Chrome et Apple Safari, et Apple Mail est connu pour être un des clients de messagerie les plus robustes. Vous rencontrerez rarement des problèmes de rendu avec Apple Mail.
Comment satisfaire tous les clients de messagerie ?
Vous comprenez maintenant qu'il faudra des heures de conception et de test pour que vos emails s'affichent correctement à 100 % sur tous les clients. Trouvez les 2 ou 3 clients les plus utilisés par vos clients (ou assez pour couvrir 80 % de vos destinataires) et concevez d’abord vos emails pour eux.
Pour ne pas répéter vos efforts inutilement, créez quelques modèles d'email que vous pourrez modifier et réutiliser facilement pour vos campagnes habituelles.
Et enfin, comme nous avons l’habitude de le répéter dans nos billets, testez, testez et testez encore. Une fois que vous avez créé ces modèles de messages, veillez à les tester sur différentes plateformes et différents appareils pour vous assurer qu'ils sont optimisés pour vos clients !
Lectures associées
Articles populaires
Marketing
En savoir plus
Deliverability
7 min
Noreply email address: Best practices for your email strategy
En savoir plus
Email best practices
13 min
66+ email subject lines that beg to be opened
En savoir plus