Guide de conception des e-mails HTML

Dans cet article, vous découvrirez des conseils utiles pour créer des e-mails HTML à partir de zéro.

Mise en page

• largeur de conception de 650px ou moins
  La règle générale pour la taille des e-mails est de garder une largeur de 650px ou moins. Cela permet à l'e-mail de s'afficher correctement dans la plupart des clients d'e-mail et des configurations.
• Les mises en page simples sont les meilleures
  En matière de conception d'e-mails, la simplicité est la meilleure solution. Si vous essayez de faire un design compliqué, vous rencontrerez beaucoup de tests et de débogage avec des problèmes de clients d'e-mail. Si vous souhaitez réaliser une conception plus avancée, soyez prêt à utiliser de nombreux tableaux et à consacrer un temps raisonnable aux essais.
• Utilisez des tableaux HTML de base 
  Vous devrez utiliser des tableaux HTML standard pour créer la mise en page générale. Les techniques CSS flottantes et de mise en page n'auront pas un rendu correct sur tous les clients d'e-mail.
• Faites attention au marge intérieure des cellules du tableau
  Outlook appliquera le marge intérieure de n'importe quelle cellule d'une ligne à toutes les cellules de la ligne. Cela pourrait entraîner des changements visuels que vous ne souhaitez pas. Le mieux serait d'essayer d'appliquer le même marge intérieure à toutes les cellules d'une rangée ou de placer un div ou un tableau interne (qui a un marge intérieure) dans la cellule ou vous souhaitez ajouter une marge intérieure. (Plus d'informations)
• Évitez d'utiliser des colspans="" dans vos tableaux
  . Certains clients d'e-mail ne les prennent pas entièrement en charge et d'autres auront des problèmes d'affichage pour les autres cellules si vous avez un colspan.

CSS

• N'utilisez pas de feuilles de style externes
  . Elles ne fonctionneront que dans quelques clients d'e-mail, et vous devez inclure toutes vos CSS en utilisant les CSS en ligne dans votre HTML. 
• N'utilisez pas de classes CSS - utilisez toujours le CSS en ligne 
  De nombreux clients d'e-mail ne prennent pas en charge les classes CSS. Au lieu de déclarer des classes CSS, vous devez utiliser le CSS en ligne. Un exemple serait
  contenu
  au lieu de
  contenu
   
• N'utilisez pas de raccourcis CSS
  CSS vous permet de définir des propriétés en groupes normalement. Par exemple, style="font : 12px, Arial" Au lieu de regrouper ces attributs, vous devez définir chaque partie individuellement. Par exemple, style="font-size:12px ; font-family:Arial"
• Évitez d'utiliser les options CSS float ou position
  Certains clients d'e-mail ne tiennent pas compte des options CSS float et position. Essayez plutôt d'utiliser des tableaux.

Images et vidéo

• Utilisez des URL absolus pour les images 
  Au lieu d'inclure une image telle que(), vous devez inclure l'URL absolu du fichier tel que ()
• Utilisez toujours des tags alt ()
  La plupart des clients d'e-mail désactivent les images par défaut. Si vous n'avez pas de tags alt, vos abonnés ne verront qu'une boîte vide. Avec une tag alt, vos abonnés verront le texte que vous avez mis dans la tag. 
• N'intégrez pas de vidéos ou de Flash
  Intégrer directement des vidéos ou du Flash dans votre e-mail n'est pas une bonne idée. De nombreux clients d'e-mail ne prennent pas en charge ce type de code, et de nombreux programmes de détection des spams et des virus signaleront votre e-mail comme étant un spam/malveillant. Au lieu d'intégrer votre vidéo ou votre flash dans votre e-mail, faites une capture d'écran de ce à quoi ressemble la vidéo ou le lecteur flash et intégrez-la. Vous pouvez faire en sorte que la vidéo ou le flash s'ouvre dans leur navigateur lorsqu'ils cliquent dessus. 
• Les GIF animés ne sont pas entièrement pris en charge
  Demandez-vous si vous avez besoin d'une animation dans votre e-mail. Alors que la plupart des clients d'e-mail prennent en charge les GIF animés, Outlook 2007 ne le fait pas. Les clients d'e-mail qui ne prennent pas en charge les GIF animés afficheront probablement la première image de votre séquence d'animation. 
• Soyez prudent avec les images épissées
  Si vous avez épissé une image plus grande et l'avez placée dans votre HTML en utilisant des cellules de tableau ou des tags img juste à côté les unes des autres, vous devrez faire des tests approfondis. Certains clients d'e-mail peuvent ajouter un espace supplémentaire entre vos images et donner un mauvais aspect à votre e-mail.
• Évitez d'utiliser des images pour faciliter votre mise en page
  Certaines personnes utilisent des images de 1 ou 2 pixels pour faciliter l'alignement des éléments dans leur mise en page. Certains clients d'e-mail ou filtres penseront qu'il s'agit d'une image de suivi de lecture ou d'ouverture potentielle et pénaliseront l'e-mail.
• Testez votre e-mail avec des images désactivées
  Comme la plupart des clients d'e-mail affichent les e-mails avec des images désactivées par défaut, vous devez vérifier l'aspect de votre e-mail avec des images désactivées.
• Surveillez la taille de vos fichiers
  Comme pour la conception de sites web traditionnels, vous devez être attentif à la taille des fichiers d'image pour votre e-mail. Essayez de les maintenir à un niveau bas afin de garantir un téléchargement rapide pour vos abonnés.

Contexte

• Les images d'arrière-plan ne sont pas entièrement prises en charge
  Si vous utilisez une image d'arrière-plan, n'oubliez pas que certains clients d'e-mail ne les affichent pas. Si vous souhaitez toujours utiliser une image d'arrière-plan, utilisez les options d'arrière-plan HTML au lieu d'utiliser les CSS pour déclarer un arrière-plan.
• Couleurs de fond du corps principal 
  De nombreux clients d'e-mail (tels que Gmail) n'affichent pas la couleur de fond que vous avez définie pour le corps principal (tag). Si vous définissez une couleur d'arrière-plan dans la tag body, vous devez également disposer d'une div d'habillage avec une couleur d'arrière-plan qui entoure votre contenu. Ainsi, même si la couleur d'arrière-plan du corps n'est pas prise en charge, vous obtiendrez quelque chose de similaire.

Divers

• Ne mettez rien au-dessus de l'ouverturetag
  Tout ce que vous mettez au-dessus de la tag body sera probablement dépouillé et inutilisé.
• N'incluez pas le javascript
  . Il est probablement supprimé dans la plupart des clients d'e-mail, et les filtres anti-spam peuvent le détecter comme un code malveillant.
• Évitez Microsoft Office
  l'éditeur HTML généré garantit presque toujours des problèmes. De plus, lorsque vous copiez et collez à partir d'Office, vous collerez leur formatage et vous aurez probablement des problèmes de conception.