dark mode email testing graphic

Dark Mode Email Testing: How it Helps and Why it Matters

0

Our mantra here at Email on Acid is “Test every email, every time!” The rise of dark mode in many of the most popular operating systems, browsers, apps, and email clients makes that statement ring as true as ever.

Dark mode email testing may not be part of your team’s pre-deployment checklist yet, but it should be. To find out more, we spoke with Email on Acid’s lead developer, Ed Ball, as well as Product Manager/Owner Danny Carranza.

Ed explains that some people may have brushed off dark mode email testing in the past – but doing so now could put you at a disadvantage. He thinks all email marketers should be designing, optimizing, and testing for dark mode.

“At the beginning of all this, nobody could see how dark mode was going to impact emails,” says Ed. “I honestly feel dark mode is here to stay and email teams should be adopting it.”

Dark mode testing with Email on Acid

As dark mode rose in prevalence and email clients started supporting it, Email on Acid’s product team jumped into action and added Dark Mode previews to our email readiness tool. It’s helping email teams shed some light on dark mode during the predeployment process.

When you upload HTML emails into Email on Acid’s Campaign Precheck, the code is sent to email client servers, which are in turn set up on our servers. The Email Previews feature captures screenshots from simulators and live devices that are sent back for your review.

dark mode email on phone
Preview emails in light and dark mode

If you’re designing separate emails for dark mode and light mode, you can run tests to view those modes only. Or, you can see how your emails look in both modes on dozens of live clients and devices.

That’s what helps email teams manage one of the biggest dark mode challenges. There are some major differences in the ways email clients handle dark mode. Without testing, you can’t be certain that your emails will display as expected.

Examples of email client discrepancies in dark mode:

Email Client Auto-Inverts Colors? Common Dark Mode Challenge
Apple Mail
(iPhone/iPad)
Yes
Auto inverts when the background is transparent or pure white (#fffff).
Apple Mail
(macOS)
Yes  
Auto inverts when the background is transparent or pure white (#fffff).
Outlook
(iOS)
Partially
May make background color darker.
Outlook
(macOS)
Partially
 
The only Outlook option that does support @media (prefers-color-scheme).
May make background color darker.
Outlook
(Windows)
Yes
The only Outlook option that consistently auto-inverts colors.
Outlook.com
(webmail)
Partially
 
The only Outlook option where image swap works.
May make background color darker.
Gmail
(Android)
Yes
(when not already dark)
Does not support the query @media (prefers-color-scheme).
Gmail
(webmail)
No
Does not support the query @media (prefers-color-scheme).
AOL
(webmail)
No
No current dark mode user interface.
Yahoo!
(webmail)
No
No current dark mode user interface.

Danny Carranza says things can easily become even more complex, depending on how people are opening emails.

“For example, if someone is using Apple Mail in dark mode to pull in emails from Gmail or Outlook, it may render differently than if they viewed that content directly on the Gmail or Outlook mobile apps,” he explains.

Here are some example email previews illustrating that point:

Sent to Outlook
Opened with Apple Mail
Sent to Outlook/Hotmail
Opened with Apple Mail
Sent to Gmail
Opened with Apple Mail

In the email previews above, both emails essentially render the same. You’ll see below, however, that these emails actually render quite differently when opened directly on the Outlook or Gmail apps in dark mode.

Opened directly in the Outlook app
Opened directly in the Gmail app

So, the fact that subscribers may view multiple inboxes in one application complicates matters even further. That’s why you need a robust email testing tool to ensure accuracy in dark mode emails.

How to get accurate email previews

A big benefit of using Email on Acid’s email readiness platform is that your previews come from either live physical devices or virtual devices that accurately mirror the nature of real devices. Because Android device manufacturers only support emulators – which may paint a less-than-perfect picture of how your emails will render – we choose to use live devices.

“Not only for dark mode but for overall HTML tests, an emulator is not an accurate way to test emails,” Danny states. “Emulators are hardware and software installed on a computer to imitate its operation.”

In an article explaining the difference between live and emulated email previews, Email on Acid CEO John Thies lays it out plain and simple:

“By definition, emulated previews are not 100% accurate. At best, they are educated guesses as to how an email will render on a client and device.”

In some cases, the use of emulators for email previews could even constitute copyright infringement. Choosing Email on Acid means choosing an email readiness partner you can trust.

Catch dark mode disasters before they happen

Our Email Previews let you fix potential problems before you hit send. According to Ed Ball, there are more than a few factors that could trip up email developers, but dark mode email testing ensures you deliver perfection no matter the mode.

“It can definitely catch black logos and graphics that are disappearing from the email or an unexpected change in the layout because it’s in dark mode,” Ed says.

When email developers do find a problem, it can often be fixed using our platform’s Email Editor. That means you don’t always have to switch back and forth between testing and coding.

Ed also finds that testing emails that are specifically designed for dark mode helps identify potential accessibility issues. Our Accessibility tool for emails will alert you if there are contrast concerns. Use the contrast ratio tool to get rid of the guesswork and get precise calculations.

Appropriate contrast ratios ensure everyone on your list can read your emails. Find out more in an article Ed wrote about dark mode and email accessibility.

Email accessibility tool
Check contrast with Email on Acid’s Accessibility Tool

Dark mode email testing is worth it

Whether they’re using it for specific benefits or simply because they like the way it looks, it’s very likely that a significant portion of your customers prefers dark mode. If email is an important marketing and communication channel for your company, testing and optimizing for dark mode needs to become part of your QA process.

An email that your contacts and subscribers are unable to read is a wasted email. While optimizing emails for dark mode comes with its challenges, a little extra effort improves the ROI of email marketing and could even give you a competitive edge.

Take Email on Acid for a free test drive and see how it helps!

Fix email mistakes while you QA.

Save time and create more engaging emails. Email on Acid’s Campaign Precheck allows you to find and fix email problems mid-workflow, so you can streamline your email QA and testing. Take advantage of our accessibility check, preheader preview, URL validation and image validation. Try it free for seven days!

Start for Free

Author: Kasey Steinbrinck

Kasey Steinbrinck is Email on Acid's content marketing manager. He's created lead-generating digital marketing plans for a wide variety of organizations and understands how valuable content fuels a powerful email strategy. Kasey lives in Green Bay, Wisconsin, (Go Packers) with his wife and three out-of-control boys.

Author: Kasey Steinbrinck

Kasey Steinbrinck is Email on Acid's content marketing manager. He's created lead-generating digital marketing plans for a wide variety of organizations and understands how valuable content fuels a powerful email strategy. Kasey lives in Green Bay, Wisconsin, (Go Packers) with his wife and three out-of-control boys.

Leave a Reply

Your email address will not be published. Required fields are marked *