# Design d’en-tête d’email avec des dégradés [Canonical HTML page](https://gradiently.design/fr/guide/email-header-design) Un en-tête d’email est la première chose que l’on voit après l’objet, dans une boîte de réception que vous ne maîtrisez pas. Bien le concevoir, c’est prévoir dès le départ les images désactivées, le mode sombre et les petits écrans. ## The short version - Une image d’en-tête d’email standard fait 1200 par 600 pixels, affichée en 600 pixels de large pour rester nette sur les écrans à haute densité. - La prise en charge des dégradés CSS varie selon les clients de messagerie : un en-tête en dégradé est donc en général une image, avec une couleur de fond unie en repli. - Certains clients de messagerie bloquent les images par défaut : chaque en-tête a donc besoin d’un texte alternatif descriptif et d’une couleur de fond derrière lui. - Le mode sombre peut changer les couleurs autour d’un en-tête mais en général pas à l’intérieur de l’image : concevez donc des en-têtes avec leur propre fond et testez dans les deux modes. - Placez les mots importants comme les offres, les dates et les appels à l’action dans du texte HTML vivant sous l’en-tête, pas seulement dans l’image. Un bon **design d’en-tête d’email** commence par les contraintes de la boîte de réception. Faites l’image d’en-tête à 1200 par 600 pixels et affichez-la en 600 pixels de large, pour qu’elle soit nette sur les écrans à haute densité. Comme les clients de messagerie gèrent les dégradés CSS de façon inégale, placez le dégradé dans l’image et définissez derrière une couleur de fond unie assortie. Ajoutez un texte alternatif descriptif pour les lecteurs qui ont désactivé les images, vérifiez le rendu en mode sombre, et gardez les mots importants en texte vivant sous l’image. Ce guide couvre les tailles, l’image contre le CSS, le mode sombre, le poids et le texte alternatif, avec du HTML que vous pouvez adapter. Pour le côté technique des dégradés dans un email HTML, voyez [les dégradés dans les emails](https://gradiently.design/fr/guide/gradients-in-email). ## La taille d’un en-tête d’email La plupart des mises en page d’email font environ 600 pixels de large, une largeur qui tient confortablement dans les volets de lecture des ordinateurs et se réduit bien sur mobile. Exportez les en-têtes au double, 1200 par 600, et réglez la largeur d’affichage de l’image sur 600 dans le HTML. Le format 2:1 laisse la place à un court titre ou à un logo sans repousser le contenu sous la ligne de flottaison sur mobile. - En-tête d’email 1200×600: 1200 × 600 - Signature d’email 600×200: 600 × 200 - Bannière de blog 1200×600: 1200 × 600 Les formats d’en-tête et de signature d’email. L’en-tête partage sa taille avec une bannière de blog : un même design peut donc servir aux deux. > **Plus court est souvent mieux** Sur mobile, un en-tête haut peut remplir tout le premier écran. Si votre en-tête est surtout de l’ambiance, envisagez un recadrage plus court pour que la première ligne de l’email soit visible sans défiler. ## Image ou CSS : comment construire un en-tête d’email en dégradé Sur le web, un dégradé tient en une ligne de CSS. Dans un email, c’est moins fiable : certains clients rendent `background-image: linear-gradient(...)`, d’autres l’ignorent. Voici les options pratiques. | Approche | Comment ça marche | Compromis | | --- | --- | --- | | En-tête en image | Le dégradé et tout visuel intégrés dans une image de 1200×600 | Identique partout où les images se chargent ; les mots qu’elle contient disparaissent si les images sont désactivées | | Dégradé CSS et texte vivant | Une cellule de tableau avec un fond en dégradé et du texte HTML par-dessus | Léger et accessible ; retombe sur une couleur unie là où les dégradés ne sont pas pris en charge | | Hybride | Une image en dégradé pour l’ambiance, du texte vivant pour le message dessous ou sur un repli uni | Le plus robuste : toujours lisible, en général beau | La plupart des marques utilisent l’hybride : l’image porte le style, le HTML porte les mots. ```html
Autumn edit: new colours for the season
Our autumn colours are here. See the new range this weekend.
``` Un en-tête hybride. La cellule a une couleur unie et un dégradé derrière l’image : même quand les images sont bloquées, la couleur de la marque et le texte alternatif stylé restent visibles. Le message est répété en texte vivant dessous. ## Concevoir des en-têtes d’email pour le mode sombre En mode sombre, de nombreuses applis de messagerie changent les couleurs de l’email autour de votre en-tête : les fonds blancs peuvent devenir sombres et le texte sombre devenir clair. Les images sont en général laissées telles quelles. Cela crée deux problèmes classiques : un en-tête à fond blanc qui brille comme une boîte lumineuse dans une boîte de réception sombre, et un logo transparent en encre sombre qui disparaît sur un fond devenu sombre. ### À éviter - Des en-têtes à fond blanc pur - Des logos PNG transparents en encre sombre - Des mots importants seulement dans l’image - Un texte fin et clair sur un dégradé pâle ### À faire - Un en-tête avec son propre fond moyen ou profond - Des logos sur une forme unie, ou une version claire et une version sombre - Le message répété en texte vivant - Un fort contraste dans l’image elle-même - Violet profond: `linear-gradient(135deg, #2a1b6b 0%, #7c3aed 100%)` - Bleu-vert profond: `linear-gradient(135deg, #0f3d3e 0%, #1f8a78 100%)` - Baie vers corail: `linear-gradient(135deg, #7a1f3d 0%, #e0555c 100%)` - Nuit vers bleu: `linear-gradient(135deg, #1e2a52 0%, #3f6fd8 100%)` Des dégradés d’en-tête qui tiennent bien dans les boîtes claires comme sombres : assez profonds pour ne pas éblouir la nuit, assez saturés pour paraître vifs le jour. Les dégradés moyens à profonds comme ceux-ci sont le choix le plus sûr. Ils n’éblouissent pas dans une boîte sombre, et le texte blanc qu’ils portent reste lisible dans les deux modes. [Le design en mode sombre](https://gradiently.design/fr/guide/dark-mode-design) couvre les principes plus larges. ## Poids, texte alternatif et mots qui comptent Gardez les images d’en-tête légères : exportez en JPEG pour les dégradés photographiques ou granuleux et en PNG pour les visuels à plat avec du texte, et compressez-les. De grands dégradés lisses peuvent former des bandes s’ils sont fortement compressés, et un peu de grain dans le design les aide à survivre ; voyez [le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding). Écrivez un texte alternatif qui dit ce que dit l’en-tête, pas à quoi il ressemble : *Sélection d’automne : de nouvelles couleurs pour la saison*, pas *bannière violette*. Stylez les propriétés de police de l’image pour que le texte alternatif s’affiche à une taille et dans une couleur lisibles sur le fond de repli quand les images sont désactivées. Un large en-tête d’email avec un titre de newsletter et un numéro sur un dégradé profond Un en-tête de newsletter en 1200 par 600 : titre de la publication, numéro et une ligne. Un large en-tête d’email qui annonce l’ouverture le dimanche sur un dégradé chaud Un en-tête d’annonce : le message est assez court pour être répété en texte vivant dessous. ## Checklist de l’en-tête d’email 1. **Concevez en 1200 par 600** Affichez en 600 de large. Gardez des mots assez grands pour se lire sur mobile à cette taille. 2. **Donnez-lui son propre fond** Ni blanc pur ni transparence sur les bords, pour que le mode sombre ne puisse pas en faire une boîte lumineuse. 3. **Définissez une couleur de repli** Un `bgcolor` sur la cellule dans une couleur du dégradé, pour que les images bloquées restent fidèles à la marque. 4. **Écrivez un vrai texte alternatif** Le message, pas une description de l’image. 5. **Répétez le message en texte vivant** Dates, offres et appels à l’action en texte HTML sous l’en-tête. 6. **Testez dans les deux modes** Envoyez des emails de test aux applis qu’utilisent vos lecteurs, en mode clair et sombre, images activées et désactivées. Dans Gradiently, les tailles En-tête d’email (1200 par 600) et signature (600 par 200) sont intégrées, et copier vers les tailles transforme un post social terminé en en-tête assorti pour votre email du [jour de lancement](https://gradiently.design/fr/guide/launch-day-graphics). ## FAQ ### Quelle taille pour un en-tête d’email ? 1200 par 600 pixels, affiché en 600 pixels de large dans le HTML de l’email. La double résolution le garde net sur les écrans à haute densité. ### Les dégradés CSS fonctionnent-ils dans un email ? Dans certains clients de messagerie, pas tous. Mettez le dégradé dans une image ou utilisez du CSS avec un repli `bgcolor` uni, et testez dans les applis qu’utilisent vos lecteurs. ### Comment faire fonctionner un en-tête d’email en mode sombre ? Donnez à l’en-tête son propre fond moyen ou profond plutôt que blanc ou transparent, gardez un fort contraste dans l’image et répétez les mots importants en texte vivant. ### Que doit dire le texte alternatif d’un en-tête d’email ? Ce que dit l’en-tête, comme le titre ou l’offre, pour que les lecteurs dont les images sont bloquées reçoivent quand même le message.