Tutoriel : Structure de base d’un email

Email-Tricks_Responsive

Structure de base d’un email :

L’intégration d’email, même quand on est développeur, peut parfois faire souffrir les plus courageux d’entre nous. J’ai décidé de vous faire partager une série de tutoriaux pour concevoir des mails de qualité, responsives et compatibles avec un maximum de device et client mails possible.

Dans ce premier tutoriel nous allons voir la base de la conception responsive d’un email et les différentes options qui s’offrent à nous…

Disclaimer : Avant de commencer il est important de rappeler que les codes proposés dans cet article sont issus de mon expérience personnelle et ont tous été testés sur le site email on acid et directement par mes soins sur différentes messageries. Vous pouvez vous en servir pour vos futures intégrations (N’hésitez pas à me le signaler en commentaire).

Structure HTML de base :

La structure HTML de base est relativement classique. J’ai choisi ici d’utiliser un doctype html5 car je n’ai pas constaté de problème entre ce doctype et le code qui va suivre. A noter cependant que beaucoup de clients de messagerie ignorent ou remplacent le doctype que vous avez renseigné, il est donc indispensable de faire des tests avant envoi de votre email pour vérifier le bon affichage de celui-ci.

Vous remarquerez aussi la présence de la balise meta viewport qui permet de forcer le comportement d’affichage de vos emails sur certains clients de messagerie (notemment gmail App).

Structure CSS de base :

Quand il s’agit d’intégration d’email, il est souvent recommandé d’utiliser du css « inline » (Dans l’attribut style= » » de l’élement que vous voulez styliser) car un grand nombre de clients de messagerie ignore tout simplement les règles de style placées dans la balise <style> ou dans une feuille de style externe. Cependant, il est tout de même possible de surcharger le css inline pour les clients qui interpréteraient le contenu de la balise <style> (placée dans <head>).

Voici donc les élements css que je place dans la balise <style> de mes emails.

Ce CSS à 2 objectifs principaux :

  • Servir de « reset » css pour certaines règles appliquées par le client de messagerie et qui viendraient interférer avec le rendu final de l’email. On notera notamment la présence de préfixe sur certaines règles comme « mso- » ou « -ms- » qui rectifient certains comportements de la messagerie outlook.
  • Définir le comportement de l’email dans sa version responsive grâce à l’utilisation des medias queries.

A noter aussi que la présence des !important a pour objectif de forcer la règle concernée par rapport au css inline. Ainsi un client de messagerie qui interprète le css dans la balise <style> utilisera la règle avec !important et un client qui ne le fait pas utilisera la règle inline. Cette mécanique est essentielle dans la réalisation d’un email responsive.

Enfin, la classe contentWidth nous servira dans les codes à suivre pour gérer la largeur du contenu de l’email en fonction de la largeur de l’écran de l’utilisateur.

Structure de l’email :

J’ai pris l’habitude de découper mes emails en « bloc » de contenu, je trouve la structure plus propre et plus souple dans son ensemble. Voici un petit exemple :

Structure de base d'un email : Exemple de blocs

Bien que je vous recommande fortement cette méthode, libre à vous de structurer vos emails comme bon vous semble.

Il existe plusieurs méthodes pour structurer un bloc responsive, j’ai choisi de vous en présenter exclusivement deux. (Ces méthodes s’appliquent aussi si vous n’utilisez pas le découpage par bloc).

L’approche « classique » :

L’approche classique consiste à utiliser une balise <table> à 100% pour faire le fond du mail (ici en noir #000000) et une autre balise <table> à l’intérieur pour y placer le contenu :

La première balise <table> est paramétrée en largeur 100% pour prendre la totalité de l’espace disponible dans le client de messagerie.

La seconde balise <table> est placée à l’intérieur d’une <td> paramétrée en align=center afin de garantir le centrage du contenu. A noter que la balise <table> de contenu est aussi configurée en alignement centré. Cette double configuration permet de garantir un centrage sur tous les clients de messagerie. En effet certains d’entre eux n’interprètent que le align=center d’une <td>.

La classe « contentWidth » est ajoutée au tableau de contenu pour pouvoir utiliser le css précédent. Ainsi en dessous d’une largeur d’écran (de viewport en réalité) de 600px, les clients de messagerie qui interprètent les medias queries vont alors appliquer une largeur de 480px au contenu ou de 300px si la largeur de l’écran est inférieure à 480px.

A noter aussi la présence de « min-width » qui force la largeur minimale du tableau de contenu pour « gmail App ». Ce dernier n’interprétant pas correctement le css et l’attribut « width », je choisi de le forcer avec l’attribut « min-width » qui est, paradoxalement, interprété ! C’est aussi pour cette raison qu’on retrouve dans le css de base un reset « min-width: 0px !important » qui permet à tous les autres clients de messagerie (interprétant le css dans la balise <style>) de ne pas appliquer cette règle.

L’approche « Simplifiée » :

Cette structure a été présentée par Mark Robbins dans cet article il y a moins d’un an et elle est devenue ma structure de prédilection aujourd’hui. Elle a pour avantage de donner plus de possibilités de design tout en écrivant moins de code.

Le principe de cette méthode est simple. plutôt que d’utiliser un tableau centré pour placer le contenu on utilise directement une <td> du premier tableau. Pour garantir le centrage on utilise le fonctionnement standard d’un tableau qui stipule que si une <td> a une largeur définie, les autres <td> n’ayant pas de largeurs définies se répartissent l’espace libre de manière homogène.

Dans notre exemple, seule la <td> de contenu à une largeur définie (600px), les 2 autres <td> de chaque côté prennent alors l’espace de la même manière. Le contenu est alors centré naturellement.

L’autre avantage de cette méthode est la possibilité de modifier le background des 2 autres <td> séparément, permettant alors d’avoir une couleur différente à droite et à gauche ou, et ce n’est pas négligeable, une image différente.

A noter enfin la présence de « font-size:0px; » qui permet d’éviter les effets de bord sur certains clients de messagerie qui interprètent &nbsp; avec une largeur/hauteur qui leur est propre.


Nous aborderons dans un prochain article les différentes organisations de contenu d’un email à l’intérieur de ces structures de base.

Voila, j’espère que ce tutoriel vous aura éclairé sur l’intégration de la base d’un email. N’hésitez pas à le partager et à laisser un commentaire s’il vous a plus.