Dark mode is becoming more and more popular. Many consumers view their texting conversations, social media feeds and email inboxes in dark mode to save their battery life and make it easier on their eyes. Are you mindful of this trend as you design marketing emails? Getting on board with dark mode email design can make a big difference in your email marketing. Optimizing your emails for dark mode ensures that everyone can properly view your messages. Here are a few key tips to help.
Optimizing your emails for dark mode ensures that everyone can properly view your messages.
What is dark mode?
Many people now use dark mode, or dark theme, on their mobile or desktop devices. Several apps (including Slack, Twitter and Facebook Messenger) support this setting. With dark mode, you see light-colored text on a dark background instead of the other way around. This setting has a few core benefits: It makes the text easier to read and isn’t hard on your eyes. Dark mode can also extend your battery life because the screen isn’t as bright.In the following images from Counter Culture Coffee, you can see how the same email looks when viewed in both dark and light mode. (The images used in this email could use a little tweaking to optimize the message for dark mode, but we’ll get to that in a minute!)Subject line: Decaf is for lovers ?Optimizing your emails to be read with dark mode can go a long way in helping your email marketing succeed. Here are some things to keep in mind.
1) Consider different email clients
Several email clients have started offering dark mode as an option for users. For example, Apple Mail and Outlook 2019 allow you to enable dark mode on desktop. You can also make the switch with the Gmail and Outlook apps for Android and iOS.Keep in mind, however, that each email client will render emails a little differently. Some email clients will show an email the exact same way regardless of whether the inbox is set on light or dark mode. Others recognize an email with a light background and automatically switch around the color scheme so the background is dark instead. Still others will actually take emails that were made for dark mode and make them become light!All of these caveats can certainly make dark mode email design confusing. Here's how each email client works:
- Fully inverted: Gmail iOS app; Outlook 2019 for Windows
- Partially inverted: Gmail Android app, Outlook Android app, Outlook iOS app, Outlook 2019 for MacOS, Outlook.com
- Unchanged: iOS Mail, Apple Mail
2) Use transparent images
For dark mode email design, your images should be transparent. That way, when the background color changes from white to black, the email will still look natural. If an image’s empty space is filled with white, it won’t matter in light mode — but in dark mode, this will stick out like a sore thumb. For example, take a look at this Seasons 52 message. In light mode the email looks good:Subject line: Fireworks are great, but have you tried this red?
But when viewed in dark mode, it’s clear that the image backgrounds are not transparent. See how the logo doesn’t blend in with the rest of the message?
If your image isn’t transparent, use a simple online editor to tweak the image before dropping it into the BEE editor. Or if your images do have solid backgrounds, add extra padding so the transition from the image color to the background color isn’t as jarring.
3) Outline black text in white
If there’s any black text in your message, it won’t show up when the email is viewed in dark mode. To get around this, highlight the text in white so it will still show up when the background becomes black. In this Land’s End email, the brand’s navy-colored logo doesn’t show up well in dark mode. This could have been avoided by highlighting the text in a lighter color.Subject line: You half to see these dresses: 50% off tonight only!
4) Test your dark mode emails
When you’re finished designing your dark mode email, remember to test it in both dark and light mode to see what the message will look like on each. You can test emails with the BEE editor by clicking “Actions,” “Send test” and then entering the email address(es) where you want to send the message. If you have a Gmail account and an Android device, for example, you can send the email to yourself and view it in both dark and light mode to make sure you don’t need to make any changes. You can also send the email to a tool such as Litmus to conduct further testing from there.
5) Go with plain text
Finally, you can play it safe and go with plain text. Since plain text emails only include, well, plain text, you don’t have to worry about design elements rendering incorrectly. Plain text emails are black on white, so they easily invert. And these emails have lots of other benefits, too — they’re appropriate for serious or important situations and can bypass spam filters more easily than HTML messages.Subject line: Make your reservation
Wrap-up: Dark mode email design
Does dark mode email marketing still feel overwhelming? Don’t worry! With free tools like the BEE email editor, you can get your dark mode email design off the ground. Use the BEE editor to add metadata, create transparent background images, test your messages and more. Check out the professionally designed HTML email templates in our template catalog to get started with dark mode email design.
Share this post with your friends! Pin it on Pinterest ?
.jpeg)
.webp)
