Concevoir des emails adaptés au mode sombre

Le mode sombre est de plus en plus utilisé, 34 % des utilisateurs l'ont utilisé pour ouvrir leurs emails en août 2022 (Source : Litmus). Cette préférence est motivée par le confort qu'il procure, la réduction de la fatigue oculaire, l'amélioration de la visibilité du contenu, entre autres. C'est pour cette raison que de nombreux destinataires d'emails optent pour le mode sombre. Il est donc crucial de concevoir vos emails de manière à ce qu'ils soient adaptés à ce mode.

Qu'est-ce que le mode sombre ?

Ce mode est un paramètre d'affichage qui peut être activé ou désactivé sur de nombreux appareils, applications et systèmes d'exploitation. Lorsqu'il est activé, il change la couleur de l'interface utilisateur.

Concernant les emails, ce mode inverse les couleurs de l'interface et du contenu des emails des destinataires. Cela signifie que les destinataires de vos emails bénéficient d'un arrière-plan foncé ou d'une couleur inversée pour les arrière-plans non foncés, ainsi que d'une couleur de texte inversée pour éviter qu'il ne se fonde dans l'arrière-plan.
Voici un exemple d'email en mode clair et sombre :

Dark_mode_email_light_version_FR.jpg Dark_mode_email_dark_version_FR.jpg

Quelles plateformes de messagerie prennent en charge le mode sombre ?

Selon la plateforme de messagerie utilisée, les emails peuvent s'afficher différemment en mode sombre. Cela est dû au fait que les plateformes de messagerie utilisent trois techniques principales pour activer le mode sombre :

Plateforme de messagerie Technique utilisée
Apple Mail (MacOS)

Inchangé

Votre email ne sera pas affecté lorsque le mode sombre est activé.

iPhone / iPad (iOS 13)
AOL
Yahoo Mail
Application Gmail Android

Partiellement inversé

Votre email apparaîtra avec un fond plus foncé et du texte plus clair, tandis que les parties déjà sombres le resteront.

Application Outlook (iOS / Android)
Outlook 2019 (MacOS)
Outlook.com
Office 365 (MacOS)
Application Gmail iOS

Entièrement inversé

Votre email inversera l'arrière-plan clair en foncé et inversera l'arrière-plan foncé existant en fond clair.

Outlook 2019 (Windows)
Outlook 2021 (MacOS / Windows)
Office 365 (Windows)
Windows Mail

Optimiser vos emails pour le mode sombre

Vous trouverez ici des informations sur la manière d'optimiser vos emails pour le mode sombre.

💡 Bon à savoir
Nous vous suggérons de faire preuve de simplicité lorsque vous concevez vos emails, en particulier pour le texte contenu dans ces derniers. Nous vous conseillons d'utiliser la police noire par défaut.

Avant de commencer à concevoir vos emails dans Brevo, vous pouvez adopter certaines mesures concernant vos images afin de les adapter au mode sombre :

Utiliser des PNG transparents

Les PNG transparents sont des images sans arrière-plan qui sont souvent marquées par un motif en forme de damier. Nous vous recommandons d'utiliser ce type d'image pour votre logo.

Dark_mode_email_png_model_FR.png

L'utilisation d'images transparentes vous permet de conserver une apparence naturelle dans les emails sur fond blanc et noir. Cela améliore en outre l'expérience utilisateur en les empêchant d'afficher des arrière-plans clairs lorsqu'ils lisent leurs emails en mode sombre.
Voici un exemple de choses à faire et à ne pas faire :

Dark_mode_email_example_transparent_PNG_FR.jpg

Recadrer les images comme un pro

Si vos images ne sont pas au format PNG (c'est-à-dire qu'elles n'ont pas d'arrière-plan transparent), réfléchissez à leur apparence en mode sombre. Par exemple, si l'arrière-plan de votre image est recadré à proximité du logo ou du texte, votre email n'aura pas un aspect professionnel en mode sombre, comme vous pouvez le constater dans l'exemple ci-dessous. Pour éviter cela, veillez à recadrer votre image avec suffisamment d'arrière-plan ou d'espace blanc autour de celle-ci.

Dark_mode_email_crop_images_2_FR.png

Ajouter de la luminosité, des bordures ou des ombres à vos PNG foncés

Ajoutez de la lumière, des bordures ou des ombres à vos PNG foncés pour qu'ils soient visibles en mode sombre, quelle que soit la couleur de fond. En particulier si vous utilisez un logo foncé sur un fond blanc en mode clair, vous pouvez ajouter un éclat, une bordure ou une ombre correspondant à la couleur de l'arrière-plan. Il existe des outils en ligne qui vous permettent de le faire. 
Voici un exemple de texte au format PNG avec effet de brillance :

Dark_mode_email_glow_image_dark_en-us.jpg

Ajouter de la couleur de fond aux images

Si vous ne voulez pas ou ne pouvez pas ajouter de lumière, de bordure ou d'ombre, vous pouvez ajouter un arrière-plan coloré à partir de l'éditeur Drag & Drop de Brevo lors de la conception de votre email. Ajoutez une couleur de fond à votre bloc de style et choisissez des tons plus clairs, par exemple du gris, pour plus de visibilité.

Dark_mode_email_background-color_fr.jpg

Dark_mode_email_background-color_result_FR.png

Prévisualiser et tester vos emails en mode sombre

Avant d'envoyer votre email, nous vous recommandons de le prévisualiser sur différentes plateformes de messagerie. Cela peut être fait directement depuis Brevo après avoir créé votre email et vous permet de vérifier à quoi il ressemblera, notamment en mode sombre. Notez que les aperçus ne sont pas toujours exacts. Nous vous recommandons donc de vous envoyer un email test si vous avez activé le mode sombre sur vos appareils. Pour en savoir plus, consultez notre article dédié Prévisualiser et tester votre campagne email.

Dark_mode_email_preview_fr.jpg

🤔 Vous avez des questions ?

Pour toute question, n’hésitez pas à contacter notre service client en créant un ticket à partir de votre compte. Si vous n’avez pas encore de compte, vous pouvez nous contacter ici.

Si vous avez besoin d'aide pour un projet impliquant Brevo, nous pouvons vous mettre en relation avec un Partenaire Brevo certifié.

💬 Cet article vous a-t-il été utile ?

Utilisateurs qui ont trouvé cela utile : 20 sur 56