Since 2019, the variety of customers turning off the lights with darkish themes has sky-rocketed, and it’s anticipated to proceed to climb. A big variety of your subscribers are additionally doubtless viewing emails in darkish mode.
Beforehand, we talked about implement darkish mode in your emails. However the darkish mode rollout throughout browsers, gadgets, and internet apps additionally poses distinctive issues for e-mail testing. At E-mail on Acid, we’ve acquired you lined. Beneath, we’ll speak concerning the ins and outs of darkish mode e-mail testing and assist you determine make this a part of your staff’s pre-deployment guidelines.
Why do I must do darkish mode e-mail testing?
Our mantra right here at E-mail on Acid is “Check each e-mail, each time.” In any case, testing takes the guessing out of stopping darkish mode disasters from hitting your subscribers’ inboxes.
Since this development is right here to remain, we higher begin testing. Even Google’s desktop search is testing out a brand new darkish theme. (Presently, the homepage for an “incognito” Google search is in darkish mode.) If darkish mode e-mail testing isn’t a part of your staff’s pre-deployment guidelines, we’re right here that can assist you make the shift with our Marketing campaign Precheck software.
What are widespread issues in darkish mode emails?
However why do you want darkish mode testing? Basically, darkish mode interacts with CSS types to make mild colours darkish and darkish colours mild on internet pages. This implies darkish mode will change the colours in your e-mail both by inverting or darkening the background colour whereas making darkish textual content lighter. Darkish themes may additionally invert darkish backgrounds into mild ones.
Darkish mode normally doesn’t create issues with plain textual content emails for the reason that black textual content on a white background merely will get inverted. However with HTML emails, the place totally different parts have outlined colours, issues can get sophisticated. Textual content colours would possibly change and have unintended results. Black logos and graphics could appear to be they’ve “disappeared” out of your e-mail, or white backgrounds could seem behind pictures.
We’ve posted some recommendations on optimizing emails for darkish mode, however testing helps you catch errors that slip by means of the cracks.
How do totally different e-mail shoppers deal with darkish mode?
An much more vital problem is the other ways e-mail shoppers like Gmail, Apple Mail, and Microsoft Outlook render darkish mode. Some e-mail shoppers auto-invert colours and a few don’t. Different e-mail internet apps solely mechanically change colours in particular conditions. Some shoppers assist media queries for darkish and light-weight colour schemes, whereas others don’t. Most notably, Gmail doesn’t assist the prefers-color-scheme media question.
Listed here are some examples of e-mail consumer discrepancies in darkish mode:
| E-mail Consumer | Auto-Inverts Colours? | Widespread Darkish Mode Problem |
| Apple Mail (iPhone/iPad) |
Sure | Auto inverts when the background is clear or pure white (#fffff). |
| Apple Mail (macOS) |
Sure | Auto inverts when the background is clear or pure white (#fffff). |
| Outlook (iOS) |
Partially | Might make background colour darker. |
| Outlook (macOS) |
Partially |
The one Outlook possibility that does assist @media (prefers-color-scheme). Might make background colour darker. |
| Outlook (Home windows) |
Sure | The one Outlook possibility that persistently auto-inverts colours. |
| Outlook.com (webmail) |
Partially |
The one Outlook possibility the place picture swap works. Might make background colour darker. |
| Gmail (Android) |
Sure (when not already darkish) |
Doesn’t assist the question @media (prefers-color-scheme). |
| Gmail (webmail) |
No | Doesn’t assist the question @media (prefers-color-scheme). |
| AOL (webmail) |
No | No present darkish mode consumer interface. |
| Yahoo! (webmail) |
No | No present darkish mode consumer interface. |
These discrepancies grow to be much more sophisticated relying on how your customers open their emails. For example, if a subscriber makes use of Apple Mail in darkish mode to tug in emails from Gmail or Outlook, the e-mail could render otherwise than if they’d seen that content material straight within the Gmail or Outlook cell apps.
Listed here are some instance e-mail previews illustrating that time:
Opened with Apple Mail
Opened with Apple Mail
Each emails basically render the identical within the previews above, which use Apple Mail. Nevertheless, you’ll see under that these emails render fairly otherwise when opened straight on the Outlook or Gmail apps in darkish mode, with components coming throughout darkish grey as a substitute of white.
There are lots of transferring elements within the shift to the darkish aspect. That’s why you want a sturdy e-mail testing software to make sure accuracy in darkish mode emails. Maintain studying for E-mail on Acid’s tackle darkish mode e-mail testing.
How do I take a look at darkish mode emails?
At E-mail on Acid, darkish mode e-mail testing is a part of our automated Marketing campaign Precheck software. On this pre-deployment pipeline, our E-mail Previews characteristic, which captures screenshots from simulators and dwell gadgets, conducts darkish mode testing together with mild mode testing.
Observe the steps under to make use of our Marketing campaign Precheck software to check emails in darkish and light-weight mode on dozens of dwell shoppers and gadgets by operating both a handbook take a look at or a take a look at out of your e-mail service supplier (ESP).
How do I run a handbook e-mail take a look at?
You probably have your e-mail code obtainable in a URL, a ZIP file, otherwise you need to copy and paste from a doc, you may run a handbook take a look at with the next steps:
1. Click on on E-mail Testing on the navigation bar.
2. Click on Sure to verify that you’ve your code obtainable in a URL, a ZIP file, otherwise you need to copy and paste from a doc.
3. Fill out the Topic and Content material particulars. Then, copy and paste your HTML, or browse for and add your ZIP file.
4. Click on Run E-mail Check.
How do I run a take a look at from my ESP?
You too can ship your take a look at e-mail out of your ESP to your E-mail On Acid tasks web page. We suggest utilizing this selection to test in case your ESP is altering something in your code if you hit ship.
First, ship your e-mail to your E-mail on Acid tasks web page. Then, use the E-mail Preview characteristic to test for bugs. Let’s do that with the steps under:
1. Click on on E-mail Testing on the navigation bar.
2. Click on No.
Use the displayed e-mail tackle to ship your take a look at e-mail out of your ESP to E-mail on Acid.
3. Ship the e-mail out of your ESP, after which click on on Initiatives on the navigation bar to find and assessment your challenge.
How do I test the outcomes of my darkish mode e-mail take a look at?
Navigate to the E-mail Check Abstract tab of your outcomes to preview your emails in darkish mode and light-weight mode.
Now, you need to use the previews within the E-mail Check Abstract tab to catch darkish mode disasters earlier than they occur. Take a look at our assist docs to study extra about e-mail testing at E-mail on Acid.
What errors ought to I keep away from when operating a darkish mode e-mail take a look at?
Operating a darkish mode e-mail take a look at is identical as operating an everyday one. Right here’s an inventory of widespread errors to keep away from to run a profitable take a look at:
- Don’t ahead an e-mail to the offered tackle when operating a take a look at out of your ESP. This can lead to potential points with previews.
- Don’t ship multiple e-mail on the similar time. This could trigger previews to load incorrectly. Ship every e-mail a minimum of one second aside.
- Do test that the examples you’re previewing suit your subscriber base.
Wrapping up
Our E-mail Previews in our Marketing campaign Precheck software make it straightforward to conduct darkish mode e-mail testing. At E-mail on Acid, we consider testing ensures you ship perfection regardless of the mode. Whereas optimizing emails for darkish mode comes with its challenges, somewhat additional effort improves the ROI of e-mail advertising and offers you a aggressive edge.
Take E-mail on Acid for a take a look at drive and see how we will help
Creator: The E-mail on Acid Group
The E-mail on Acid content material staff is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising.
Creator: The E-mail on Acid Group
The E-mail on Acid content material staff is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising.
