Designer des emails modernes

Contexte

Gardez à l'esprit que chaque template (photoshop, sketch, figma…) sera converti en code à un moment donné.
Ce guide vise à partager des bonnes pratiques lors de la conception graphique d'e-mails ainsi qu'à préserver la santé mentale des développeurs.

TIP

J'ai utilisé Photoshop et Sketch pour concevoir des emails. N'importe quel logiciel de prototypage suffit.

J'utilise également le langage MJML pour développer des newsletter car personne ne devrait encore avoir à le faire à la main… plus jamais.

Connaissances générales

Les emails sont l'un des types de contenu internet les moins " avancés ". Ils sont encore développés avec des éléments de type table et l'énorme diversité des clients de messagerie rend presque impossible une compatibilité à 100 %.

INFO

Je cherche à obtenir la plus grande compatibilité possible avec les clients de messagerie, donc je n'utiliserai pas de propriété comme les media-queries car ils ne sont pas supportés par tous les clients.

Le responsive

Les emails peuvent être responsive, mais nous n'avons que très peu de contrôle sur cet aspect.
Comme les emails font généralement jusqu'à 800px de large, il n'y a que deux versions : une version ordinateur et une version mobile.
Ainsi, ce que vous voyez sur une version sera identique sur l'autre.

Par exemple, si vous alignez une image à droite sur la version ordinateur en raison d'une disposition en deux colonnes, l'image restera alignée à droite sur la version mobile en une colonne.

Ce qui peut être bizarre :

TIP

Lorsque nous concevons un produit web, nous avons l'habitude de penser d'abord au mobile (ou alors vous devriez). Le mail, pour une fois, suit la tendance !

Colonnes

Idéalement, une mise en page en une seule colonne serait la meilleure chose à faire. Mais nous savons que les gens (clients et concepteurs) ont peur des choses simples. Donc j'accepte une mise en page en deux colonnes.

Images

Les images sont beaucoup utilisées dans les mail. Parfois trop. Afin d'être le plus lisible et accessible possible, évitez de mettre du texte sur une image. Si vous devez le faire, ne mettez pas une information clé sur une image. Si le client bloque les images (par défaut sur de nombreux clients), votre email ne contiendra pas les informations nécessaires pour être pertinent.

Si vous souhaitez utiliser une ombre portée, veillez à la concevoir à l'intérieur de vos marges.

Textes

Utilisez le plus de vrai texte dans vos emails. Le texte sous forme d'image ne fonctionnera pas bien.

Utilisez également les polices de caractères du système, telles que Arial, Trebuchet, Verdana, Times… La plupart des clients de messagerie ne peuvent pas afficher les polices personnalisées et vous ne pouvez donc pas prévoir quelle police par défaut sera utilisée.

ATTENTION

NE FAITES PAS de retours à la ligne forcés.

Vous pouvez créer un nouveau paragraphe, sans problème, mais vous ne pouvez pas rendre le texte joli.
De plus, les sauts de ligne forcés produisent un glyphe bizarre sur certains clients.

Coins arrondis

À éviter. On peut les faire fonctionner, bien sûr. Mais est-ce vraiment nécessaire ?

Réponse :

Non.

Certains clients supportent les coins arrondis, d'autres ne les montrent pas, d'autres, encore, les cassent un peu.

La seule façon sûre de le faire est d'exporter chaque coin arrondi en tant qu'image et de les placer manuellement autour d'un bloc de couleur. Comme je l'ai dit : évitez.

INFO

Si vous n'êtes pas sûr de la compatibilité d'une fonctionnalité, vous pouvez consulter son adoption sur can I email..

Mes recommandations

TIP

Je recommande une largeur d'email de 600 pixels avec des marges à gauche et à droite de 30 à 50 pixels.

C'est arbitraire mais 600 pixels permet un peu plus de compatibilité avec les petits écrans. Il y a moins de chance que la mise en page se casse à cause d'un écran 10 pixels trop petit.

Si vous devez exporter des images pour votre développeur chéri, exportez autant de .jpg que possible avec une qualité maximale de 79 %. Des images de plus petite taille accéléreront le temps de chargement.

Allez bon courage maintenant !