Email Marketing
What makes a good subject line?
Subject lines are an important part of your email, so here's how to not mess them up.
Read More →
Does Dark Mode mess with the background imagery in your email designs? Here's how to fix it.
Do you love using background images in your emails? Us too. Background images provide countless opportunities to be creative, they give your designs depth, and just make your email designs a little bit special. But if youre using background imagery regularly, you might have noticed that Dark Mode — especially in Gmail — will adjust your colors in a way that can make copy on background images unreadable. Urgh!
So, does the growing popularity of Dark Mode mean you can no longer work with background images? Fear no more, fellow fans of background imagery. Together with ActionRockets email code wizard Jay Oram we share a simple trick to make your background images work in Dark Mode.
To understand why background images can be an issue in Dark Mode, let's look at how we traditionally approach combining copy and background imagery.
When you design for background images, one of the crucial things youll want to be aware of is that theres enough contrast between your background image and the copy you put on top of it. So you might use bright copy on a dark background image (or vice versa) to ensure that your copy is easy to read when placed on top of your image.
Check out this example of one of Taxi's emails. We've put a dark wash over our background image to make sure that the white copy on top of it is readable:
This is looking good so far. But now, let's look at what happens when Dark Mode comes into play.
Quite a few email clients now offer their users to switch to Dark Mode — that's a reversed color scheme that's optimized for low-light environments and that many users find to be more gentle to the eye.
If we look at how that email from above renders in the Gmail app on iOS, in bright and Dark Mode, here's what we see:
Have you seen a similar issue with your emails? Wanted to tear your hair out? Yeah, we know that feeling.
Gmails Dark Mode automatically turns the bright copy on top of our image into a dark color but since the image below stays the same, the color contrast becomes so low that the copy is impossible to read. This isn't a great experience for our subscribers.
But heres the good news. Email designer extraordinaire Jay has a trick up his sleeve to help us out of this Dark Mode misery. Over to you Jay!
_____
Jay Oram is an Email Coder & Interactive email specialist at ActionRocket. Throughout Darktober ActionRocket aim to get brands Dark Mode ready. Helping to review how Dark Mode affects them from a quick review, to in depth audits and updating their email design systems. Drop them an email at hello@actionrocket.co, reach out to them on Twitter — or say hi on the #emailgeeks Slack.
______
First of all, some bad news: If you think there's a way you can simply target Dark Mode using media queries or similar, prepare to be disappointed. Currently we can only target Dark Mode for some email clients, and the two causing the most issues for background images — Windows 10 Mail and Gmail — are not on that list.
So the savvy email geek has to find alternative solutions.
There are a few design tweaks that could help: Changing your background image to one that will work with both light and dark text colors can be an option but unfortunately this is quite difficult and may not fit with your current design. You could also try changing your text color to something more neutral, like #777777 or similar, that will work on multiple background colors and still give a good contrast.
But if that's not an option for you, read on.
If you need to keep your background image the same, the secret to making things work in Dark Mode lies in adding a semi-transparent colored layer between your background image and your copy like this:
When looking at this email on the Gmail App, here's what we'll see:
Gmail's Dark Mode will change the color of your font (just like it did in our original example) but it will also change the color of the new layer that we just added. So while our font changes from bright to a dark, our layer changes from a dark grey to a brighter one — and the copy remains easy to read.
It's important that you make sure you test your color choices to make sure they look good in both bright and Dark Mode. But in general, our experiments found that as long as you ensure that there's enough contrast between your original font and background layer, your copy will be easy to read in Dark Mode.
Coding a background color behind your text can be done in a number of ways, using the HTML attribute bgcolor="#f4f4f4" or adding it to your inline style or CSS as background-color: #f4f4f4;
When adding a background color, it is also a good idea to check the padding around your text, as it may need a bit more space around the edge to display your new color.
You can use solid colors for your new layer or, if you'd like to see your background image shine through like you saw in the example above, add a bit of opacity to the background color. You can easily do that using the rgba() color type. While rgb covers the parameters red, green, and blue, rgba adds another channel — alpha — to the mix. This value lets you specify the opacity of the color from 0.0 (fully transparent) to 1.0 (fully opaque).
When you translate this into your code, you'll want to set a solid background color first, and then define your rgba color. That's because some email clients (looking at you, Outlook for Windows =@) don't support opacity. If rgba is supported, your slightly opaque color will display — and if it's not, it will fall back to the hex color provided.
style="background-color: #0000ff; background-color:rgba(0,0,255,0.3);"
Are you looking for the copy-and-paste ready sample code? Here's the codepen.
Optimizing for Windows 10 Mail
As always, Windows throws a spanner in the works. Currently in Windows 10 Mail, the background color is changed in line with the rest of the Dark Mode changes. However, text on top of a background color (on top of a background image) does not change. The only way to make sure your text keeps a high enough contrast is to pick a text color that is neutral enough to work on dark and light background colors.
If you're using Taxi to create your campaigns, you can set up a background image module in your Email Design System, making it easy for your team to add background imagery to their campaigns. Take a look at the blog on Animated backgrounds' or this blog showing how to implement Taxi Syntax into a background image module to get started.
Making your background image Dark-Mode-proof by adding a colored layer is just as easy. You can add your background color to either the <table> containing the content or the <td> your text is in, and use Taxi Syntax to make the colors editable in the email editor. Set your color format to rgba and an additional slider will be added to the color picker for transparency:
<field name="my_field" type="color" format="rgba"/>
Then wherever you define your background color in your HTML, you'll need to use the field mentioned above. For example:
<table replace-style="background-color:{{my_field}};"></table>
Read more on how to apply field content here.
When your team creates their next email, they can easily adjust the background color and opacity of the color layer to match the background image of their choice — no coding required.
Our friends over at ActionRocket and Email on Acid have turned down the lights and gone dark for October, in a campaign they're calling Darktober . Check out their blog or follow them on Twitter.
Taxi helps marketing teams make better quality email, quicker, at a larger scale.
