Come to the Dark Side (or Mode) of Email Marketing
Apple’s Dark Mode and the Android Dark theme equivalent have seen rapid adoption on both desktop and mobile platforms. Web and app designers have quickly updated their code to ensure compatibility, so how can email marketers avoid annoying users who are enjoying their dark viewing mode? answers,
Alice Li, Principal Email Engineer, Litmus.
Last year, Apple introduced Dark Mode for its desktop operating system, allowing users of macOS Mojave to switch to a darker color palette for all windows, views, menus, and controls. At the time, Apple described the new design as “a dramatic new look that helps you focus on your work” and a “distraction-free working environment that’s easy on the eyes—in every way.” Shortly after this significant macOS update, Apple refreshed its Safari browser with Dark Mode support for websites that support custom color schemes.
Let’s face it: Dark Mode is cool. It’s been an instant hit with Mac power users, and third-party developers are hot on the trend and have begun offering Dark Mode options for their apps. Even Microsoft has gotten in on the act, announcing Dark Mode support for Outlook for Mac in August, and then upgraded Word, Excel, OneNote, PowerPoint, SharePoint, One Drive, Planner, and To-Do. Suddenly, web designers and email marketers have found themselves in catch-up mode to ensure compatibility with this popular user preference.
Learn More: Email Marketing: 5 Tips to Create Great Email Content
Over in mobile land, this trend has more significance. Dark Mode’s popularity is assured on iOS because it offers an important benefit that’s more than just aesthetic: longer battery life on OLED displays. And with the recent launch of iOS 13 for iPhone and iPad, which gives mobile users the opportunity to transform their viewing experience to Dark Mode, marketers have even more reason to seriously consider the ‘dark side’ when it comes to email design and testing.
Just two weeks after the introduction of iOS 13, estimated adoption rates of Apple’s new mobile OS ranged from 55 percent to as high as 70 percent. And with 27 percent of all emails read on the Apple iPhone, email marketers need to take note: if they don’t expressly design their emails for this new look, they risk standing out in a bad way—annoyingly bright and garish in an otherwise soothing dark experience. And, let’s not forget Android users, who can also switch to Dark theme on their latest OS, Android 10. What should marketers do about Dark Mode?
How Emails Render in Dark Mode on iOS 13
Similar to Dark Mode for macOS, the new Dark Mode on Apple iOS devices does not impact HTML emails by default. Dark Mode is only applied to personal (which are not typically composed in HTML) and plain text emails. Even if your HTML email does not have a background color defined, the background is still rendered as white. So, for regular HTML emails, Dark Mode will not interfere with your code or degrade your rendering experience.
But that cuts both ways: brightly colored email backgrounds will make for a jarring experience with subscribers who are reading email in Dark Mode because their screen will switch from the dark in-box view to a really bright email. For example:
How can you improve the reading experience for your subscribers? In the case of Dark Mode on macOS, email designers and developers didn’t have an opportunity to target Dark Mode specifically. Instead, all they could do was opt for color choices that worked well in both bright and dark views. However, with iOS 13, savvy developers can proactively target Dark Mode and deliver an overall better experience for subscribers who open their emails in Dark Mode.
How to Target Dark Mode on iOS 13
While testing earlier versions of iOS 13, email expert Thomas Steiner noted that Apple introduced a brand new media query that lets developers specifically target email clients that are set to Dark Mode. Our tests confirm this: targeting Dark Mode on iOS is surprisingly simple, as this HTML code snippet reveals:
@media (prefers-color-scheme: dark) {
/*Insert all your dark mode classes here, as you would insert mobile responsive classes./
/* Remember to use !important to override inline styles */
}
This media query lets you set custom styles that only apply when your email is opened in an email client set to Dark Mode—which means you can use different background colors, font colors, or even images for Dark Mode subscribers. When opened in iOS 13 Dark Mode, the email will display using a dark background. Plus, to make sure you can still see the Litmus logo on the dark background, we’ve set this email to use a different version of our logo—the one that uses a white font—to guarantee it’s readable and looks great on Dark Mode.
Learn More: What it Takes to Be a World-Class Email Marketer
Pre-flight Testing is Now Even More Important
This new viewing mode that’s quickly become so popular highlights the importance of pre-flight checking your email campaigns from the viewer’s perspective. Email clients can add—and drop—support for features without notice, causing major headaches for email designers. Email templates that once worked perfectly across all platforms can suddenly exhibit distracting rendering peculiarities.
Email testing helps you tackle the challenge of inconsistent rendering across numerous environments. By regularly previewing what your email code looks like in the most popular email clients and devices, you can spot if something that works great everywhere else looks broken in a small handful of clients—and then edit your code to fix just those clients while maintaining the experience in the remaining apps and devices. And, beyond testing how your email will look in Dark Mode, you can also identify subject-line errors, broken links, images that don’t display, and even screen reader compatibility. With the right tools, you can streamline your testing process and send error-free emails that perform every time.
