Le guide ultime sur l'utilisation d'extraits de code dans la conception d'e-mails

Entre des dizaines de clients de messagerie, des bizarreries de rendu apparemment innombrables et la prise en charge changeante de HTML et CSS, le codage des campagnes par e-mail est complexe. Malheureusement pour les concepteurs d'e-mails, cette complexité signifie que la conception d'e-mails prend de plus en plus de temps, nous avons donc créé le guide ultime sur l'utilisation d'extraits de code dans la conception d'e-mails.

Lors de l'Email Design Conference, Dan Denney de Code School a parfaitement défini le problème :

Le plus grand défi dans la création d'e-mails n'est pas Gmail… il est temps.

Lorsqu'il s'agit de concevoir des e-mails, le temps presse et la mise en place d'un workflow de développement est cruciale. Afin de suivre l'évolution rapide des demandes de conception d'e-mails, il est de plus en plus important de rendre votre flux de travail aussi efficace que possible.

Alors, que pouvez-vous faire pour optimiser votre flux de travail ? Un seul mot : extraits .

À l'aide d'extraits de code, vous pouvez créer des e-mails plus facilement et plus rapidement que jamais. Passez moins de temps à créer et à dépanner des e-mails, et plus de temps à créer de meilleures expériences de messagerie pour vos abonnés.

Que sont les extraits ?

Les extraits de code sont des modules de courrier électronique de code réutilisable que vous pouvez utiliser dans un modèle de courrier électronique ou un système de conception de courrier électronique plus large. Ils sont idéaux pour les éléments couramment utilisés dans les conceptions d'e-mails, comme le type de document, les boutons pare-balles et les liens. Plutôt que d'avoir à réécrire le code à chaque fois qu'un de ces éléments est utilisé, vous pouvez utiliser un extrait. L'utilisation d'extraits de code automatise votre codage et accélère considérablement le temps de développement.

Comment utiliser des extraits de code

Quel que soit l'éditeur d'e-mails que vous utilisez pour créer vos e-mails, vous pouvez utiliser des extraits de code pour optimiser votre flux de travail. Voici un aperçu de leur utilisation dans les éditeurs les plus courants.

Tisse-rêve

Dans Dreamweaver, vous pouvez ajouter ou modifier des extraits de code en visitant : Windows → Extraits de code → Nouveau/Modifier. Vous pouvez même enregistrer vos extraits dans des groupes (c'est-à-dire des extraits liés aux tableaux, des extraits liés aux images, etc.) pour une recherche facile.

Lors du codage de votre e-mail, utilisez des extraits en double-cliquant sur le titre de l'extrait, en cliquant sur insérer ou en utilisant un raccourci clavier.

Constructeur de tournesol

Dans un projet Builder, cliquez sur l'icône Snippets en haut à droite de l'éditeur.

Vous pouvez créer et modifier de nouveaux extraits dans cette interface et déclencher des extraits dans votre code via des raccourcis clavier. Vous pouvez également ajouter des points d'édition à l'intérieur de l'extrait en utilisant {braces} . Une fois que vous avez déclenché un extrait, vous pouvez accéder automatiquement à des points d'édition prédéfinis dans l'extrait pour une personnalisation rapide et facile.

Texte sublime

Pour afficher les extraits existants ou en ajouter de nouveaux dans Sublime Text, visitez : Outils → Snippets/New Snippet. Chaque extrait est enregistré dans son propre fichier .sublime-snippet.

Ajoutez des extraits de code à votre code via des déclencheurs de raccourci clavier. Par exemple, dans le code ci-dessous, l'extrait est déclenché lorsque « bonjour » est tapé dans le code. Vous pouvez également ajouter des points d'édition à l'intérieur de l'extrait en utilisant des signes dollar dans l'ordre séquentiel ( $1 , $2 , etc.).

 <snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> 

Atome

Affichez, modifiez ou ajoutez des extraits dans Atom en visitant : Atom → Ouvrir vos extraits. Chaque extrait est enregistré dans son propre fichier snippets.cson.

Semblable à Sublime Text, les extraits dans Atom fonctionnent via un déclencheur de raccourci clavier. Vous pouvez également ajouter des points d'édition à l'intérieur de l'extrait en utilisant des signes dollar dans l'ordre séquentiel ( $1 , $2 , etc.).

 'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """ 

Coda

Les extraits dans Coda sont appelés « clips ». Pour ajouter ou modifier un clip, visitez : Barre latérale → Clips. Les clips peuvent être enregistrés en groupes et fonctionnent sur un déclencheur de raccourci clavier. Vous pouvez également ajouter des points d'édition à l'intérieur de l'extrait en définissant des points d'espace réservé personnalisés dans l'interface utilisateur.

Bibliothèque d'extraits

Dans chaque éditeur, vous pouvez créer une bibliothèque de vos extraits de code. Tout dans la bibliothèque doit être à jour et pré-testé. Comme le monde des e-mails change constamment, assurez-vous de tester fréquemment vos extraits de code et d'en ajouter de nouveaux si nécessaire.

Bien qu'il y en ait beaucoup d'autres, nous avons rassemblé une liste complète de certains de nos extraits de code prêts à l'emploi préférés à utiliser pour le développement d'e-mails. N'hésitez pas à les ajouter à votre bibliothèque d'extraits !

Doctype

Un doctype indique à un client de messagerie de restituer un e-mail en mode standard ou bizarre. Il existe deux formes recommandées de doctypes à utiliser pour les e-mails. Le premier est le doctype HTML5 :

HTML5

 <!doctype html>

XHTML

Le second est le doctype XHTML :

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Campaign Monitor répertorie les doctypes HTML qu'il est bon d'utiliser, et il y a aussi une grande discussion à ce sujet sur la communauté Litmus. Si vous ne spécifiez pas de doctype pour votre e-mail, les clients de messagerie afficheront l'e-mail en « mode bizarreries », ce qui peut entraîner des problèmes de rendu.

Balise méta

Si vous codez votre e-mail pour qu'il soit réactif, vous devez inclure plusieurs balises méta clés.

UTF-8

La première balise Meta recommandée définit l'encodage des caractères sur utf-8, qui est l'encodage typique d'un e-mail. Cela peut être modifié si nécessaire.

 <meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />

Fenêtre

La deuxième balise meta recommandée définit la réactivité de l'e-mail.

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Téléphone Windows

La troisième balise meta recommandée est spécifiquement de rendre l'e-mail réactif sur Windows Phone.

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

les tables

Les e-mails HTML utilisent des tableaux pour structurer le contenu. Les tableaux peuvent être assez fastidieux à coder à la main, c'est pourquoi nous avons développé des extraits de code de base pour des mises en page de tableaux simples.

Tableau 1×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>

Tableau 2×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tableau 3×1

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tableau 2×2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tableau 2×3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tableau 3×2

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Tableau 3×3

 <table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>

Boutons à l'épreuve des balles

La création de boutons dans les e-mails est assez compliquée grâce aux bizarreries de rendu Outlook. Il existe quatre types recommandés de boutons pare-balles, qui s'affichent indépendamment de la présence ou non d'images.

Bouton VML

La première méthode de bouton pare-balles a été développée par Stig Morten Myre de Campaign Monitor et est une approche de bouton basée sur VML :

 <div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>

Campaign Monitor a également créé button.cm, un outil simple pour générer le code du bouton VML ci-dessus.

Bouton basé sur le remplissage

La deuxième méthode est une approche de texte en direct avec un bouton basé sur le remplissage :

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Le principal inconvénient de ce bouton est qu'il n'est pas cliquable à 100 %.

Bouton basé sur la bordure

La troisième méthode du bouton pare-balles consiste à créer une bordure autour du lien pour créer une grande zone cliquable :

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Le principal inconvénient de cette méthode est qu'Outlook 2007-2013 ne respecte pas les largeurs de bordure sur les balises de lien, ce qui entraîne une certaine réduction du remplissage artificiel du bouton.

Remplissage + bouton basé sur la bordure

La méthode finale implique une combinaison des boutons de remplissage et de bordure :

 <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>

Ce hack est utilisé pour éviter les problèmes de rendu de remplissage dans Outlook.

Images

Il existe de nombreux facteurs clés à prendre en compte lors de l'utilisation d'images dans un courrier électronique. Par exemple, vous devez définir la hauteur et la largeur dans les attributs HTML pour que les images s'affichent correctement dans Outlook. Et, l'utilisation du texte ALT est extrêmement importante non seulement à des fins d'accessibilité, mais puisque 43% des utilisateurs voient les e-mails sans images. Enfin, pour éviter un remplissage supplémentaire et des espaces autour des images, vous devez les définir sur display:block;.

 <img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>

Liens

Lien de base

Lorsque vous utilisez un lien dans un e-mail, vous devez définir des styles en ligne, tels que la taille de la police, la famille de polices et la décoration de texte. Voici un extrait simple qui contient déjà ces styles en ligne :

 <a href="#">{style}</a>

Supprimer les liens bleus sur iOS

Il existe plusieurs stratégies pour supprimer les liens bleus sur iOS, mais voici un extrait simple qui utilise une seule déclaration CSS pour le faire :

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

Pré-en-tête/texte d'aperçu masqué

Le pré-en-tête ou le texte d'aperçu est une copie extraite du corps de votre e-mail qui est généralement affichée sous le nom et la ligne d'objet dans la boîte de réception d'un abonné. L'utilisation de texte de pré-en-tête masqué est un moyen de définir la copie utilisée et d'éviter qu'elle n'affecte la conception réelle de l'e-mail.

Voici l'extrait :

 <div> {preheader text} </div>

Requêtes médias

Les requêtes média sont un composant des feuilles de style en cascade (CSS), le langage utilisé pour styliser les sites Web et les campagnes par e-mail. Avec les requêtes multimédias, vous pouvez affiner les conceptions d'e-mails afin qu'elles soient plus utilisables dans les boîtes de réception mobiles, de bureau et Web.

Voici une liste de toutes les requêtes média importantes dont vous aurez besoin lors de la conception d'e-mails :

Requête de média de base

 @media screen and ({declaration}) { {content} }

Requête de média de largeur maximale

 @media screen and (max-width: {width}) { {content} }

Requête de média de largeur minimale

 @media screen and (min-width: {width}) { {content} }

Requête multimédia iPad 1 & 2 + iPad Mini

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

Requête multimédia iPad 3 et 4

 @media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

Requête multimédia iPhone 2G/3G/3GS

 @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }

iPhone 4/4S/5/iPhone 6 (vue zoom) Requête multimédia

 @media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }

Requête multimédia HTC ONE + SAMSUNG GALAXY S4/S5

 @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }

iPhone 6 (vue standard) + iPhone 6 Plus (vue zoom) Media Query

 @media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }

iPhone 6 Plus (affichage standard) Requête multimédia

 @media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }

Commentaires conditionnels Outlook

Avec la pléthore de problèmes de rendu liés à la prise en charge d'Outlook, il est parfois utile de cibler Outlook avec des styles spécifiques. Outlook peut être ciblé à l'aide de commentaires mso conditionnels pour le contenu HTML ou CSS.

Rendu Microsoft Word

 <!--[if mso]> {content} <![endif]-->

Perspectives 2000-2013

 <!--[if (gte mso 9)|(IE)]> {content} <![endif]-->

Plus de commentaires conditionnels Outlook :

• Perspectives 2000
• Perspectives 2000-2002
• Perspectives 2000-2003
• Perspectives 2000-2007
• Perspectives 2000-2010
• Perspectives 2002
• Perspectives 2002-2013
• Perspectives 2003
• Perspectives 2003-2013
• Perspectives 2007-2013
• Perspectives 2010
• Perspectives 2010-2013
• Perspectives 2013

WebKit

L'un des meilleurs moyens d'améliorer progressivement votre courrier électronique est de cibler les moteurs de rendu WebKit. Environ 47 % des ouvertures d'e-mails se produisent dans des boîtes de réception optimisées par WebKit.

 @media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }

Gmail

Gmail ne prend pas en charge les classes ou les identifiants dans le <head> des e-mails, c'est pourquoi CSS doit être intégré dans les e-mails. Cependant, Justin Khoo de FreshInbox a découvert un nouveau hack dans lequel Gmail lira les CSS dans les e-mails.

Si vous utilisez l'attribut lang ou title comme sélecteur d'attribut dont la valeur se trouve dans une liste de valeurs séparées par des espaces blancs dont l'une est une correspondance exacte, Gmail lira ce CSS. C'est une bouchée, alors voici un extrait pour vous aider :

 * [lang~="{name}"] { {style} }

Yahoo

Yahoo Mail a récemment introduit sa propre requête média unique, nous permettant de cibler facilement certains styles pour le webmail.

 @media yahoo { {style} }

Android

James White a récemment publié sur la communauté Litmus un hack pour centrer les e-mails sur Android 4.4.

 body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }

Extraits dans la communauté

Vous voulez encore plus d'extraits ? Vous avez des favoris que vous aimeriez partager ? Avec l'aide des geeks des e-mails du monde entier, nous avons déjà des dizaines d'extraits utiles, tels que le code pour supprimer les liens bleus sur les appareils iOS, dans la communauté Litmus.

Triez les extraits existants en fonction du client de messagerie pour lequel il a été créé ou du type d'extrait (c'est-à-dire, hack, image, lien, etc.). Vous pouvez ajouter les vôtres et créer une bibliothèque d'extraits de vos favoris. Et, vous pouvez gagner encore plus de temps en important des extraits de la communauté directement dans Builder. Couplé aux aperçus instantanés de Builder, le codage avec des extraits pourrait être le moyen le plus rapide de créer des campagnes par e-mail incroyables.

Découvrez des extraits dans la communauté →