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 major variety of your subscribers are additionally probably viewing emails in darkish mode.
Beforehand, we talked about tips on how to implement darkish mode in your emails. However the darkish mode rollout throughout browsers, units, and internet apps additionally poses distinctive issues for electronic mail testing. At Electronic mail on Acid, we’ve acquired you coated. Beneath, we’ll speak concerning the ins and outs of darkish mode electronic mail testing and assist you determine tips on how to make this a part of your staff’s pre-deployment guidelines.
Why do I have to do darkish mode electronic mail testing?
Our mantra right here at Electronic mail on Acid is “Take a look at each electronic mail, each time.” In any case, testing takes the guessing out of stopping darkish mode disasters from hitting your subscribers’ inboxes.
Since this pattern 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 electronic 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 frequent issues in darkish mode emails?
However why do you want darkish mode testing? Primarily, darkish mode interacts with CSS kinds to make gentle colours darkish and darkish colours gentle on internet pages. This implies darkish mode will change the colours in your electronic mail both by inverting or darkening the background coloration whereas making darkish textual content lighter. Darkish themes may additionally invert darkish backgrounds into gentle ones.
Darkish mode often 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 may change and have unintended results. Black logos and graphics could appear to be they’ve “disappeared” out of your electronic mail, or white backgrounds could seem behind pictures.
We’ve posted some tips about optimizing emails for darkish mode, however testing helps you catch errors that slip via the cracks.
How do totally different electronic mail purchasers deal with darkish mode?
An much more vital problem is the other ways electronic mail purchasers like Gmail, Apple Mail, and Microsoft Outlook render darkish mode. Some electronic mail purchasers auto-invert colours and a few don’t. Different electronic mail internet apps solely mechanically swap colours in particular conditions. Some purchasers help media queries for darkish and light-weight coloration schemes, whereas others don’t. Most notably, Gmail doesn’t help the prefers-color-scheme media question.
Listed below are some examples of electronic mail consumer discrepancies in darkish mode:
| Electronic mail Shopper | Auto-Inverts Colours? | Frequent 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 coloration darker. |
| Outlook (macOS) |
Partially |
The one Outlook choice that does help @media (prefers-color-scheme). Might make background coloration darker. |
| Outlook (Home windows) |
Sure | The one Outlook choice that constantly auto-inverts colours. |
| Outlook.com (webmail) |
Partially |
The one Outlook choice the place picture swap works. Might make background coloration darker. |
| Gmail (Android) |
Sure (when not already darkish) |
Doesn’t help the question @media (prefers-color-scheme). |
| Gmail (webmail) |
No | Doesn’t help 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 develop into much more sophisticated relying on how your customers open their emails. As an 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 in a different way than if they’d seen that content material straight within the Gmail or Outlook cellular apps.
Listed below are some instance electronic 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 in a different way when opened straight on the Outlook or Gmail apps in darkish mode, with components coming throughout darkish grey as an alternative of white.
There are various shifting components within the shift to the darkish aspect. That’s why you want a sturdy electronic mail testing software to make sure accuracy in darkish mode emails. Hold studying for Electronic mail on Acid’s tackle darkish mode electronic mail testing.
How do I check darkish mode emails?
At Electronic mail on Acid, darkish mode electronic mail testing is a part of our automated Marketing campaign Precheck software. On this pre-deployment pipeline, our Electronic mail Previews function, which captures screenshots from simulators and reside units, conducts darkish mode testing together with gentle 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 reside purchasers and units by operating both a handbook check or a check out of your electronic mail service supplier (ESP).
How do I run a handbook electronic mail check?
When you have your electronic mail code out there in a URL, a ZIP file, otherwise you need to copy and paste from a doc, you possibly can run a handbook check with the next steps:
1. Click on on Electronic mail Testing on the navigation bar.
2. Click on Sure to substantiate that you’ve your code out there 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 Electronic mail Take a look at.
How do I run a check from my ESP?
It’s also possible to ship your check electronic mail out of your ESP to your Electronic mail On Acid tasks web page. We advocate utilizing this selection to examine in case your ESP is altering something in your code if you hit ship.
First, ship your electronic mail to your Electronic mail on Acid tasks web page. Then, use the Electronic mail Preview function to examine for bugs. Let’s do that with the steps under:
1. Click on on Electronic mail Testing on the navigation bar.
2. Click on No.
Use the displayed electronic mail deal with to ship your check electronic mail out of your ESP to Electronic 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 overview your undertaking.
How do I examine the outcomes of my darkish mode electronic mail check?
Navigate to the Electronic mail Take a look at Abstract tab of your outcomes to preview your emails in darkish mode and light-weight mode.
Now, you should utilize the previews within the Electronic mail Take a look at Abstract tab to catch darkish mode disasters earlier than they occur. Take a look at our assist docs to study extra about electronic mail testing at Electronic mail on Acid.
What errors ought to I keep away from when operating a darkish mode electronic mail check?
Operating a darkish mode electronic mail check is identical as operating an everyday one. Right here’s a listing of frequent errors to keep away from to run a profitable check:
- Don’t ahead an electronic mail to the offered deal with when operating a check out of your ESP. This may end up in potential points with previews.
- Don’t ship multiple electronic mail on the similar time. This could trigger previews to load incorrectly. Ship every electronic mail at the least one second aside.
- Do examine that the examples you’re previewing suit your subscriber base.
Wrapping up
Our Electronic mail Previews in our Marketing campaign Precheck software make it simple to conduct darkish mode electronic mail testing. At Electronic mail on Acid, we consider testing ensures you ship perfection regardless of the mode. Whereas optimizing emails for darkish mode comes with its challenges, a little bit further effort improves the ROI of electronic mail advertising and marketing and provides you a aggressive edge.
Take Electronic mail on Acid for a check drive and see how we can assist
Writer: The Electronic mail on Acid Group
The Electronic mail on Acid content material staff is made up of digital entrepreneurs, content material creators, and straight-up electronic 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 electronic mail advertising and marketing.
Writer: The Electronic mail on Acid Group
The Electronic mail on Acid content material staff is made up of digital entrepreneurs, content material creators, and straight-up electronic 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 electronic mail advertising and marketing.
