cours/docs/design/emails/index.md

# Designer des <span lang="en">emails</span> modernes

## Contexte

Gardez à l'esprit que chaque <span lang="en">template</span> (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 <span lang="en">emails</span>. N'importe quel logiciel de prototypage suffit.

J'utilise également le [langage MJML](https://mjml.io) pour développer des <span lang="en">newsletter</span> car personne ne devrait encore avoir à le faire à la main… plus jamais.
:::

## Connaissances générales

Les <span lang="en">emails</span> sont l'un des types de contenu internet les moins "&nbsp;avancés&nbsp;". 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&nbsp;%.

::: 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 <span lang="en">responsive</span>

Les <span lang="en">emails</span> peuvent être <span lang="en">responsive</span>, mais nous n'avons que très peu de contrôle sur cet aspect.  
Comme les <span lang="en">emails</span> font généralement jusqu'à 800px de large, il n'y a que deux versions&nbsp;: 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&nbsp;:**

![email ordinateur à 2 colonnes, l'image alignée à droite, le texte aligné à gauche](./assets/desktop.jpg)

![email mobile à 1 colonne, l'image reste alignée à droite et n'est donc pas centrée](./assets/mobile.jpg)

::: tip
Lorsque nous concevons un produit web, nous avons l'habitude de penser d'abord au mobile (ou alors vous devriez). Le <span lang="en">mail</span>, pour une fois, suit la tendance&nbsp;!
:::

### 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.

![](./assets/2col.jpg)

### Images

Les images sont beaucoup utilisées dans les <span lang="en">mail</span>. 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 <span lang="en">email</span> 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.

![](./assets/shadow-mobile.jpg)

### Textes

Utilisez le plus de vrai texte dans vos <span lang="en">emails</span>. 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.

::: danger 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&nbsp;?

::: details Réponse&nbsp;:
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&nbsp;: évitez.

::: info
Si vous n'êtes pas sûr de la compatibilité d'une fonctionnalité, vous pouvez consulter son adoption sur [<span lang="en">can I email.</span>](https://www.caniemail.com/).
:::

## Mes recommandations

::: tip
Je recommande une largeur d'<span lang="en">email</span> 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&nbsp;%. Des images de plus petite taille accéléreront le temps de chargement.

> Allez bon courage maintenant&nbsp;!