While Dark Mode is easier on the eyes, designing emails for that isn’t. This post offers the 5 things you must consider to ensure emails appear in Dark Mode the way you want them to.
September 2019 Apple brings out iOS 13 with a Dark Mode capability and lots of people symbolically shout “lights out” when it comes to looking at screens on their mobile devices and desktops. And while Dark Mode can be traced back to 1948 when the first programmable computer was used with a CRT-powered screen, a key reason it made sense then continues to make sense today. Dark Mode is easier on the eyes, especially for lengthy viewing. In fact, developers, known to spend hours looking at displays as they work on code, prefer Dark Mode overwhelmingly.
Beyond the practical, the rise in popularity of Dark Mode is fueled by young people’s preference for it. Simply put, they find it cool. For many, regardless of age, Dark Mode is more aesthetically pleasing. A large portion of people feel it makes colors pop and helps segment elements on a screen, helping to see what’s most important.
While Dark Mode is cool and suggests the email’s sender cares about subscribers’ vision, it is hard to design for. Done wrong, deliverability can be impacted. Many email clients don’t automatically optimize images for Dark Mode. Unoptimized content tends to make for messy looking, hard to read emails. And most subscribers aren’t going to spend time trying to read bad looking emails. Most likely, they’ll ignore or delete or mark them as spam. As an email marketer, that means it’ll have a negative impact on the deliverability of emails you send subscribers and, by extension, your brand.
However, if you make the effort to have your emails look their best in Dark Mode, they’re more likely to be read and positively engaged with them. That’s not so easily accomplished. There are more problems besides figuring out which email clients your subscribers use. By analyzing thousands of emails designed for Dark Mode, stensul was able to determine the 5 most perplexing Dark Mode design problems. They are:
- Paying too like attention to color palette contrast shifts between light and dark backgrounds
- Overlooking when and how to use transparent images
- Not factoring in text readability on changed backgrounds
- Failing to consider subscribers’ email clients
- Discounting the importance of pre-send testing
We went further than just recognizing the vexing problems. Stensul identified ways to solve them and put it all together in a new eBook, “The 5 most perplexing Dark Mode email design problems – And how to solve them.”
In summary, here’s what you can learn by reading the book.
Problem #1: Paying too like attention to color palette contrast shifts between light and dark backgrounds
There are Levels of Dark Mode, referred to as No, Partial or Full inversions that reflect the degree of color inversion or change. This problem occurs when all the colors used in your email design aren’t looked at carefully. Simply put, if you’re “blind” to any aspect of the color palette, your beautiful design can look horrible in Dark Mode.
How to solve this problem
Start with background colors. Are there any non-white colors used in the background? How dark are they? How do they look in a full inversion? Darker colors might invert weirdly for certain email clients. Then conduct the same evaluation for other color elements.
Make sure you choose colors that ensure your email content is readable in Dark Mode. To provide a good email experience, avoid blinding them by forcing your emails to display light backgrounds.
For the moment, email clients use one of these four approaches to converting email colors to Dark Mode. They are:
- Converting transparent backgrounds to dark colors
- Automatically-inverted colors for all non-dark backgrounds
- Inverted text colors
- No automatic changes
Understand these approaches as they will influence color selection and use within a design. To get you started we have created a free Dark Mode Color Checker tool.
Problem #2: Overlooking when and how to use transparent images
JPG images with white backgrounds will stay how they are. Not a good look. This can also lead to invisible sections if transparent images are used with text.
Nearly 30% of companies use black or gray-scale colors in their logos. As sophisticated a look as that might be, a black logo is the least Dark Mode-friendly. Meaning it might go unseen. Making it extremely difficult for the subscriber to know who sent the email.
How to solve this problem
Make sure each image section you build spans the full width of the email and fills in any potential gaps with additional white image pieces. This will keep the email’s visual consistency across both light and dark color schemes. Also, avoid dark grey or white transparent text images. These do not translate well when converted to dark backgrounds. Instead, render out the full section with the colored background as one complete image.
This typically occurs with PNG images, which have transparent backgrounds. This means they can take on the color of any image behind them. And since most logos are a color other than white, they tend to work well against white backgrounds, but not all work for dark backgrounds.
Problem #3: Not factoring in text readability on changed backgrounds
Subscribers can’t read the words when black text is in your email message against a light or white background. It can also happen if you’ve placed text over an image that’s not transparent. In Dark Mode, the image often covers over the text, making it unreadable.
How to solve this problem
To prevent black text turning unreadable in Dark Mode, highlight the text in white so it will be seen when the background is changed to black. Beyond that, consider:
- Not putting all the text in images
- Reduce the image-to-text ratio
- Avoid putting pure white text on pure black backgrounds
Problem #4: Failing to consider subscribers’ email clients
Your subscribers are using one of the three main clients, Apple Mail, Gmail, and Outlook. The permutations that happen as a result of the mix of device type, operating system version, and client release means the potential for emails to not appear as you hope they would is high. Appearance issues include odd color displays, unreadable logos, social media icons, and text, plus some emails simply won’t load.
How to solve this problem
Until there’s what amounts to a universal Dark Mode method that works with all email clients, the responsibility rests with you to understand as much as you can about the email clients, which are used by your subscribers, and how, as best as humanly possible.
The state of email clients and Dark Mode support is very much in a state of change. A result of the growing popularity of Dark Mode.
Problem #5: Not testing
Even if you assess the make-up of email client usage among your subscribers, to assume that your email for Dark Mode will appear as you want when subscribers open it is worse than foolhardy. If you don’t test a Dark Mode email before uploading it to your ESP the effort will fail on multiple levels, from the standard email performance metrics to customer experience measures, and more.
Not testing Dark Mode emails routinely before sending them is the marketing equivalent of dereliction of duty. Testing one client in Dark Mode will not suffice.
How solve this problem
Test your Dark Mode emails in as many ways as possible to see how they render on the three major email platforms, Apple Mail, Gmail, and Outlook – at the very least. Do so for every email to be sent employing a different design from any that may have preceded it.
There are three ways to handle this pre-send examination:
- Send test emails to each client
- Use a testing tool
- Create the emails in an Email Creation Platform where all factors associated with correct Dark Mode rendering are pre-loaded
The notion about coming over to the dark side – when it comes to email – is far from a joke. It’s been adopted by many platforms and embraced by growing numbers of subscribers. It’s here to stay. Figure out what you need to do to make your brand and your email marketing efforts as strong as possible in Dark Mode and do it!
To learn more about designing emails for Dark Mode, download “The 5 most perplexing Dark Mode email design problems – And how to solve them.” To learn more about stensul and its Agile Email Creation Platform, click here.
