Guide de conception de courrier électronique en HTML

Le guide complet de conception d’un e-mail

Vous savez peut-être déjà comment créer un site web moderne et accessible. Vous connaissez les règles, les dernières options, etc. Mais pouvez-vous vraiment prendre toutes ces connaissances et les utiliser pour la conception de e-mails ? En bref, la réponse est non. En raison de la diversité des clients de messagerie et du support limité du CSS, il existe des règles très spécifiques et des choses à faire et à ne pas faire en matière de conception de courrier électronique. Ce guide vous expliquera les nombreux points dont vous devez tenir compte lorsque vous utilisez votre propre édtieur HTML pour créer un e-mail afin qu’il s’affiche correctement. 

Avant de commencer, il est important de noter que la conception du courrier électronique n’est pas la même que celle du web. Si vous vous intéressez aux normes du W3C ou si vous utilisez les dernières nouveautés en matière de CSS, vous devez oublier tout cela lorsque vous abordez la conception d’un e-mail. Au fond, on peut penser qu’on est en l’an 2000.

Mise en page

  • 650px ou moins de largeur de dessin
    La règle générale pour la taille des courriers électroniques est de conserver une largeur de 650px ou moins. Cela permet au courrier électronique de s’afficher correctement (globalement) dans la plupart des clients de messagerie et des configurations d’affichage.
  • Les mises en page simples sont les meilleures
    Avec le courrier électronique, la simplicité est préférable. Si vous essayez de faire un design compliqué, vous rencontrerez beaucoup de tests et de débogage de problèmes de client de messagerie. Si vous cherchez à réaliser une conception plus avancée, soyez prêt à utiliser de nombreux tableaux et à réserver un bon nombre de temps pour les tests.
  • Utiliser les tableaux HTML de base 
    Pour créer la mise en page générale, vous devrez utiliser des tableaux HTML standard. Les techniques de flottement et de mise en page CSS n’offrent pas un rendu correct dans tous les clients de messagerie électronique.
  • Attention au rembourrage des cellules de table
    Outlook prendra le rembourrage de n’importe quelle cellule d’une rangée et l’appliquera à toutes les cellules de la rangée. Cela pourrait entraîner des changements visuels que vous ne souhaitez pas. Vous devez essayer soit d’appliquer le même rembourrage pour toutes les cellules d’une rangée, soit de placer un div ou un tableau intérieur (qui a du rembourrage) dans la cellule que vous souhaitez rembourrer. (Plus d’informations)
  • Evitez d’utiliser colspans=”” dans vos tableaux.
    Certains clients de messagerie 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

  • Ne pas utiliser de feuilles de style externes
    Ils ne fonctionneront pas dans la plupart des clients de messagerie et vous devriez inclure tous vos CSS en ligne dans votre éditeur HTML. 
  • Ne pas utiliser de classes CSS - toujours utiliser le CSS en ligne 
    De nombreux clients de messagerie électronique ne prennent pas en charge les classes CSS. Au lieu de déclarer des classes CSS, vous devriez utiliser le CSS en ligne. Un exemple serait <div style="color:#cccccc;">content</div> au lieu de <div class="cssclassa">content</div> 
  • N’utilisez pas les raccourcis CSS
    Le CSS vous permet de définir normalement les propriétés dans des groupes. Comme style="font : 12px, Arial » Au lieu de regrouper ces attributs, vous devriez définir chaque partie individuellement. Par exemple style="font-size:12px ; font-family:Arial" 
  • Éviter d’utiliser les options de flottement ou de position du CSS
    Certains clients de messagerie électronique ne tiennent pas compte des options CSS de flottant et de position. Essayez plutôt d’utiliser des tableaux.

Images et vidéo

  • Utiliser les URL des sources d’images absolues 
    Au lieu d’inclure une image telle que (<img src="img.gif">), vous devez inclure l’URL absolue du fichier telle que (<img src="http://site.com/img.gif">) 
  • Toujours utiliser les tags alt (<img src="http://site.com/img.gif" alt="Company ABC">) 
    La plupart des clients de messagerie électronique désactivent les images par défaut. Ainsi, à moins que vous n’ayez des tags Alt, vos abonnés ne verront qu’une case vide. Avec un tag alt, vos abonnés verront le texte que vous avez mis dans le tag. 
  • Ne pas intégrer de vidéos et/ou de Flash
    Ce n’est pas une bonne idée d’intégrer directement des vidéos et/ou du flash dans votre courrier électronique. De nombreux clients de messagerie électronique ne prennent pas en charge ce type de code et de nombreux programmes de détection des spams et des virus signalent votre courrier électronique comme étant un spam/malveillant. Au lieu d’intégrer votre vidéo/flash dans votre e-mail, prenez une capture d’écran de ce à quoi ressemble la vidéo du lecteur flash et intégrez-la. Lorsqu’ils cliquent dessus, la vidéo/le flash s’ouvre dans leur navigateur. 
  • Les GIF animés ne sont pas entièrement pris en charge
    Demandez-vous si vous avez vraiment besoin d’une animation dans votre e-mail. Alors que la plupart des clients de messagerie électronique prennent en charge les GIF animés, Outlook 2007 ne le fait pas. Les clients de messagerie qui ne prennent pas en charge les GIF animés montreront probablement la première image de votre séquence d’animation. 
  • Attention aux images jointes
    Si vous avez une image plus grande qui est jointe et placée dans votre éditeur HTML à l’aide de cellules de tableau ou de tags img juste à côté, vous devrez faire des tests approfondis. Certains clients de messagerie électronique peuvent ajouter de l’espace supplémentaire entre vos images et donner à votre courrier électronique une mauvaise apparence.
  • Évitez d’utiliser des images pour vous aider dans votre mise en page
    Certaines personnes utilisent des images de 1 ou 2 pixels pour aider à aligner les articles dans leur mise en page. Certains clients/filtres de courrier électronique penseront qu’il s’agit d’une image de suivi potentiel de lecture/ouverture et pénaliseront le courrier électronique pour cela.
  • Testez votre e-mail avec les images désactivées
    Étant donné que la plupart des clients de messagerie affichent les courriers électroniques avec des images désactivées par défaut, il est très important de vérifier l’apparence de votre courrier électronique avec des images désactivées.
  • Surveillez la taille de vos fichiers
    Tout comme pour la conception de sites web, vous devez être conscient de la taille des fichiers d’images pour votre courrier électronique. Essayez de les maintenir à un niveau bas pour vous assurer qu’ils seront téléchargés rapidement pour vos abonnés.

Contexte

  • Les images de fond ne sont pas entièrement prises en charge
    Si vous utilisez une image de fond, gardez à l’esprit que certains clients de messagerie électronique 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 le CSS pour déclarer un arrière-plan.
  • Couleurs de fond du corps entier 
    De nombreux clients de messagerie (tels que Gmail) n’affichent pas la couleur de fond que vous avez définie pour le corps principal (tag <body> tag). Nous vous suggérons, si vous définissez une couleur de fond dans le tag body, d’avoir également un div d’emballage avec une couleur de fond qui entoure votre contenu. De cette façon, même si la couleur de fond du corps n’est pas prise en charge, vous aurez quelque chose d’assez similaire.

Divers

  • Ne rien mettre au-dessus de le tag d’ouverture <body>
    Tout ce que vous placez au-dessus de lu tag du corps sera probablement enlevé et ne sera pas utilisé.
  • Ne pas inclure de javascript
    Il est probable qu’il soit dépouillé dans la plupart des clients de messagerie et que certains filtres anti-spam le détectent comme un code malveillant.
  • Éviter Microsoft Office comme la peste 
    Le HTML généré garantira presque les émissions. En outre, lorsque vous faites un copier-coller depuis l’Office, vous collez dans leur formatage et vous aurez probablement des problèmes de conception. 
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 3 sur 3
Vous avez d’autres questions ? Envoyer une demande