Couleur d’arrière-plan des e-mails HTML: la meilleure façon de les coder

NRZ.Digital
0 0

Le codage des couleurs d’arrière-plan semble être une tâche simple, n’est-ce pas? La vérité? Même ce petit style de style présente des écueils, et il y a quelques considérations à prendre en compte pour obtenir un rendu cohérent entre les clients de messagerie.

Et ce ne sont pas seulement les développeurs qui doivent apaiser les dieux de la boîte de réception. Avec le mode sombre prenant de l’ampleur, il y a encore plus d’environnements à connaître, dont certains obligeront les concepteurs de courrier électronique à faire très attention lorsqu’ils appliquent des couleurs d’arrière-plan dans leurs conceptions.

Dans cet article de blog, vous apprendrez:

Pourquoi utiliser des couleurs d’arrière-plan dans les e-mails?

La mise en place d’une stratégie de couleur d’arrière-plan répond à quelques besoins en ce qui concerne l’amélioration de votre programme de messagerie. D’un point de vue technique, la mise en œuvre des couleurs d’arrière-plan n’ajoute aucun temps de chargement à vos e-mails, et ils sont toujours visibles même lorsque les images sont désactivées. Ils peuvent vous aider à séparer le contenu, à appeler des messages ou à distinguer un e-mail des autres dans la boîte de réception de votre abonné, augmentant potentiellement l’engagement de votre public.

Démarquez-vous dans la boîte de réception

Vous pouvez créer une expérience d’ouverture percutante, comme cet e-mail de Blurb.

La zone des héros a du punch. Le fond orange vif a un impact en contrastant avec le bleu du logo, rehaussant l’identité de la marque. Une fois que le lecteur fait défiler la zone des héros, le contenu secondaire se trouve sur un fond blanc, offrant l’expérience de lecture idéale pour des corps de copie plus volumineux.

exemple d'e-mail de présentation de couleur d'arrière-plan
La source: Vraiment bons e-mails

Séparer les sections

Si vous avez un long e-mail, la couleur est un excellent moyen de séparer visuellement différents blocs de contenu afin qu’il soit plus digeste.

Courriels promotionnels du géant du café Starbucks peut être assez long, avec plusieurs promotions hébergées dans un seul e-mail. Pour aider les sections à se démarquer les unes des autres, différentes couleurs d’arrière-plan sont utilisées.

Exemple d'email starbucks de couleurs d'arrière-plan
Afficher cet e-mail dans Litmus

Élever l’identité de marque

Les dégradés font partie de l’agence de marketing 1973 LtdL’identité de la marque, c’est pourquoi vous trouvez souvent des dégradés linéaires audacieux en arrière-plan de leurs e-mails. Les dégradés d’arrière-plan peuvent rendre les compositions plus dynamiques et même encourager l’abonné à faire défiler.

1973 Ltd exemple de courrier électronique d'arrière-plan dégradé
La source: Vraiment bons e-mails

Alors, quelle est la meilleure façon d’intégrer ces techniques dans votre développement de messagerie? J’ai demandé à mon coéquipier et développeur d’e-mails Litmus, Carin Slater, pour nous donner un aperçu du codage des arrière-plans solides et dégradés.

Comment coder une couleur d’arrière-plan d’e-mail HTML solide

Les couleurs d’arrière-plan peuvent être codées de plusieurs manières et à plusieurs endroits. Mais chaque méthode n’est pas également prise en charge parmi les clients de messagerie. Voici un tableau rapide du code de style d’arrière-plan et de la méthode de code couleur qui fonctionnent pour les principaux clients de messagerie.

Prise en charge du client de messagerie pour les couleurs d’arrière-plan

Code de style Propriétés CSS
‘background’ et ‘background-color’
Attribut HTML ‘bgcolor’
Code couleur Hexadécimal à 6 chiffres Hexadécimal à 3 chiffres RVB RGBA Hexadécimal à 6 chiffres Hexadécimal à 3 chiffres RVB RGBA
Apple Mail 14 ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Outlook 2016 (macOS 10.12.6) ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Outlook 13, 16, 19 (Windows 10) ✓ Oui ✓ Oui ✓ Oui ✘ Non ✓ Oui ✘ Non ✘ Non ✘ Non
Outlook Office 365 (Windows 10) ✓ Oui ✓ Oui ✓ Oui ✘ Non ✓ Oui ✘ Non ✘ Non ✘ Non
Outlook Office 365 (Mac OS 10.15) ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Courrier Windows 10 ✓ Oui ✓ Oui ✓ Oui ✘ Non ✓ Oui ✘ Non ✘ Non ✘ Non
Application Gmail (Android 10) ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Application Gmail (iOS 13.4.1) ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Outlook (Android 7.0) ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Outlook (iOS 12.0) ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Samsung Mail (Android 7.0) ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
iPad 11 Air (4e génération iOS 14.2) ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
iPhone 12 (iOS 14.2) ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Courrier AOL (Edge) ✓ Oui ✓ Oui ✓ Oui ✘ Non ✓ Oui ✘ Non ✘ Non ✘ Non
Comcast (bord) ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Gmail (Chrome) ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Bureau 365 ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Outlook.com ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✓ Oui ✘ Non ✘ Non
Web.de ✓ Oui ✓ Oui ✓ Oui ✘ Non ✓ Oui ✘ Non ✘ Non ✘ Non
Yahoo! Poster ✓ Oui ✓ Oui ✓ Oui ✘ Non ✓ Oui ✘ Non ✘ Non ✘ Non

Nous savons tous que les clients de messagerie peuvent être un peu perspicaces. Alors, quelle est la meilleure façon de coder les couleurs d’arrière-plan pour qu’elles fonctionnent sur tous les clients de messagerie? Je vais vous expliquer notre recommandation et pourquoi.

1. Utilisez des tableaux et des cellules de tableau

Il y a quatre endroits dans votre HTML où vous pouvez ajouter une couleur d’arrière-plan:

  • L’endroit le plus sûr pour ajouter la couleur d’arrière-plan est sur un tableau ou une cellule de tableau.

    La balise est supprimée dans Yahoo et AOL, donc toute couleur d’arrière-plan qui y est appliquée n’apparaîtra pas dans ces clients de messagerie. Et placer une couleur sur un wrapping

    après le corps fonctionnerait partout sauf les clients Outlook car ils ne prennent pas en charge les balises
    dans les e-mails.

    Pour bénéficier de la plus large gamme de support client de messagerie, enveloppez l’intégralité de votre e-mail dans une balise

    de 100% de largeur et mettez votre couleur d’arrière-plan à cet endroit. Et utilisez les cellules de tableau
    pour les sections de votre e-mail afin d’avoir une plus grande flexibilité dans la coloration de blocs de contenu spécifiques.

    2. Ajoutez une couleur avec une propriété CSS et des codes de couleur HEX ou des valeurs RVB

    Les couleurs d’arrière-plan peuvent être codées de plusieurs manières:

    • Utilisation de l’attribut HTML bgcolor
    • Utilisation de la propriété CSS background-color
    • Utilisation de l’arrière-plan de la propriété abrégée CSS
    • Utilisation du code de couleur hexadécimal à 6 chiffres
    • Utilisation du code couleur hexadécimal à 3 chiffres
    • Utilisation des valeurs de couleur RVB

    En ce qui concerne la façon de mettre la couleur d’arrière-plan sur votre tableau ou cellule de tableau, vous devez utiliser une propriété CSS.

    En testant les deux méthodes de propriété CSS (background-color et background), nous avons constaté qu’elles ont toutes les deux les mêmes résultats cohérents tant que vous n’ajoutez que de la couleur (pas d’images). Selon caniemail.com, l’utilisation de la propriété background pour autre chose que l’ajout d’une couleur peut empêcher votre couleur de s’afficher.

    L’attribut HTML bgcolor ne s’est pas bien comporté dans Outlook, avec une prise en charge incohérente des codes HEX à 3 chiffres. Et l’utilisation des valeurs RVB et RVBA a entraîné une couleur incorrecte ou la couleur a été complètement supprimée.

    Voici notre test de couleur d’arrière-plan à l’aide des différentes méthodes d’Outlook afin que vous puissiez voir par vous-même:

    Test décisif sur le rendu des couleurs d'arrière-plan dans les e-mails HTML dans Outlook
    Voir ce test dans Litmus →

    Dans d’autres clients de messagerie, le code HEX à 3 chiffres était bien rendu, mais les valeurs RVB et RVBA entraînaient des couleurs incorrectes lorsqu’elles étaient appliquées à l’attribut HTML bgcolor.

    Test décisif sur le rendu des couleurs d'arrière-plan dans les e-mails HTML dans Apple Mail
    Voir ce test dans Litmus →

    Après tous nos tests, nous sommes arrivés à une conclusion: respectez les propriétés CSS et utilisez des codes HEX à 3 ou 6 chiffres ou des valeurs RVB. Celles-ci fonctionnaient sur tous les clients de messagerie.

    L’introduction de l’opacité avec l’alpha pour la valeur RGBA n’était pas prise en charge dans Outlook, Web.de ou GMX.de, mais avait un support décent dans le cas contraire.

    Donc, votre code final devrait ressembler à quelque chose comme ceci pour colorer tout l’arrière-plan d’une table:


    Happy
    Happy
    0
    Sad
    Sad
    0
    Excited
    Excited
    0
    Sleppy
    Sleppy
    0
    Angry
    Angry
    0
    Surprise
    Surprise
    0

    Average Rating

    5 Star
    0%
    4 Star
    0%
    3 Star
    0%
    2 Star
    0%
    1 Star
    0%

    Laisser un commentaire

    Next Post

    Les 4 principales raisons de participer à OpenText World Asia Pacific

    Il y a douze mois, nous avons pris la décision difficile – mais vitale – de déménager Monde OpenText ™ d’un événement physique à un événement virtuel dans votre bureau, salle à manger ou cuisine! Un an plus tard, nous aurions adoré nous retrouver en personne dans la région Asie-Pacifique […]
    Copyright All Rights Reserved © 2021: Designed By NRZ.DIGITAL

    Abonnez-vous maintenant