The dark mode is a recent trend that has been widely adopted by users. It is becoming more and more popular and is here to stay. The blindingly-bright screens drain batteries faster and are harsh on the users’ eyes. Users, therefore, prefer viewing their mobile applications, social media feeds, texting conversations and email inboxes in the dark mode. Brands such as Spotify, YouTube, Facebook Messenger, Twitter, etc. have been using dark modes for their websites and mobile apps.
This trend has also entered the world of email, and email marketers need to be mindful of its importance and the impact it creates while designing emails. Let us dive deep into the difference it makes to your email marketing, with some tips for optimizing emails for the dark mode.
What Is Dark Mode?
Dark Mode is a display theme that shifts the color palette of the user interface to a high contrast setting that uses light foreground and dark background colors. This setting is beneficial for people with light sensitivity, as it minimizes blue light and reduces strain in the readers’ eyes, thereby improving the readability. It also saves the device battery life to a great extent.
This is how it looks:
How Does Dark Mode Impact Emails?
Creating email designs that are optimized for dark mode can make a big difference to your email marketing. It is a key element to be considered for email accessibility, that ensures every user can view your message properly. You can take help of Customized Mailchimp templates, Pardot email templates, or Salesforce email templates in case you are using such tools.
The dark mode impacts differently across various devices and email clients. While some email clients will show the emails exactly the same on light mode and dark mode, others will partially or fully invert the color scheme automatically. Here’s how each email client reacts:
● Remains Unchanged: The HTML emails are not impacted even if the mobile phone may be in the dark mode for iOS Mail and Apple Mail.
● Partially Impacted: Light areas in the email are changed to dark, but the dark areas remain unchanged for Gmail Android app, Outlook.com, Outlook Android app, Outlook iOS app, and Outlook 2019 for Mac OS.
● Fully Impacted: The entire look of the HTML email gets altered by changing light areas to dark and dark areas to light for Outlook 2019 for Windows and Gmail iOS app.
Examples Of Emails In Dark Mode
Take a look at these examples from the brands Uber and Microsoft that have optimized their emails to render well on dark mode across email clients and devices.
It is important to tweak and optimize the logo, header, footer, text and body images of your email to work well for both dark and light modes.
Want to create email designs that render flawlessly for dark modes? Check out a few design tips to be followed.
Tips To Design Effective Emails For Dark Mode
Use Transparent Images
The ESPs that support dark mode settings change the colors in the CSS automatically. However, it is not true for image colors. It is, therefore, safe to use images with transparent backgrounds as much as possible. Having a transparent image will change the background color set by the theme and make the email colors look seamless while keeping the design intact. This way the image will still look natural when the background color changes from white to black.
Avoid Mixing Images And Background Color
Email designers usually combine background colors and images in order to display design elements and buttons. While it works for normal emails, it is not a good practice for emails to be rendered for dark mode. When the email switches to dark mode, the images remain unchanged, while the background colors might change. This may ruin the entire look of your email. It is therefore recommended to keep images and background colors distinct and appropriate for both the modes.
Add White Outlines To Black Text
The background color will turn black in the dark mode. Hence, if the logo and text that you use in the email are in black, it will disappear and impact the readability of the email. It is, therefore, a good practice to outline your text and logo in white. This way, even if the background color changes to black, the white outline on black will highlight and make it stand out, thereby making it readable in the dark mode.
Use Plain Text
To avoid the difficulties of designing and coding emails separately for the dark mode, you may go with plain text emails. If your message can be conveyed using just text, it is safe to send plain text emails. The text that appears black on a white background will switch to white text on a black background and will render perfectly in both the modes.
Test Before Sending
Finally, it is imperative to test your email before you send, to make sure it renders well in the dark mode. Test the design across all major email clients and devices and check for any possible issues before the send. Doing this will give you an idea of how the email will look in both the display settings and will help you understand the color combinations that will work best for your email.
Email Dark Mode Conclusion
The dark mode plays a huge role in improving the accessibility of emails. Though it is still a relatively new concept, it will be widely accepted and will surely create a huge impact on email users. If optimizing emails for dark mode seems too overwhelming for you, Uplers Emails can help. Get in touch with us today!
So, which mode do you prefer- light or dark?
Kevin George is Head of Marketing at Email Uplers, one of the fastest growing email marketing agencies specializes in crafting custom email templates in addition to providing email automation, campaign management, and data integration services. He enjoys sharing his insights and thoughts on email marketing best practices on his blog.
