Blog

CATEGORY: Email marketingDesign

Welcome to the darkside

Welcome to the darkside

Dark Mode is taking over the inbox—and making sure emails look great in this reading environment is the new big challenge for email marketers.

What is Dark Mode?

Dark Mode is a reversed colour scheme that utilizes light-coloured typography, UI elements, and iconography on dark backgrounds—and it’s one of the hottest digital design trends in the past year.

Why do people prefer dark mode?

  • It’s easier on the eyes. Light text on a dark background is much better for minimizing eye strain, especially in low-light situations.
  • It reduces screen brightness, saving your battery life.
  • It can improve content legibility and can make it easier for some users to consume content on desktop and mobile.

 

Which email clients support dark mode?

These clients and apps currently offer Dark Mode—either as a setting that the user can set manually or by automatically detecting the user’s preferred colour scheme:

 

Mobile Apps

·         Gmail App (Android)

·         Gmail App (iOS)

·         Outlook App (Android)

·         Outlook App (iOS)

 

Desktop Clients

·         Apple Mail

·         Outlook 2019 (Mac OS)

·         Outlook 2019 (Windows)

 

Web Clients

·         Outlook.com

 

But just because all these email clients offer a way to set their UI to a dark colour scheme, that doesn’t mean that they handle your emails the same ways. 

If your subscribers are making that conscious decision to view emails in dark mode, it’s best to respect that. Just like you’d want to add ALT text in case your users prefer to have images off by default, you should build emails that respect darker interfaces, too.

While there’s plenty of advice out there for adequately optimising your email content for the average inbox, email marketers need to start learning how to work with both dark and light optimisation simultaneously, so that their audience can view these emails without issues.

 

Some things to consider even if you are not ready to fully commit to the dark side

1.      Consider how your logo or icons will appear in both standard and dark modes; Do you have a dark/black logo or white logo which will not show up to one or the other audience? Do you need to consider how you will ensure standout of your logo in either view. Equally you may think that the 'watermark' type appearance of a dark logo on a dark background is effective and your branding is adequately represented elsewhere that this is not an issue - but the only way to know is to take a look.


2.      Think about how your buttons will appear and ensure you don't lose the power of your CTA with a colour change. Your buttons need to retain both their stand out from the background and the link text within the button needs to be legible even when the button undergoes a dark mode colour change.


3.      Use transparent PNGs. A transparent image will allow the background colour change to seem more seamless with the design still intact. If your images are not transparent and include backgrounds ensure that there is enough padding to make this background appear more of a frame than a clipping path (which would appear more like an error to the recipient)


4.      Avoid mixing images and background colours. While many graphic designers may combine images and background colours to create buttons and other design elements, it may not be wise if you’re trying to implement both dark and light optimisation. Remember, if you’re using background colours, they’re likely to change between the dark and light modes, whereas images won’t.


5.      Do you need to outline your dark fonts to ensure that they stand out? When it comes to the fonts you choose, one hack that email on acid suggest is to try is adding a white keyline around your darker fonts. While the white keyline won’t show up much, if at all, in lighter settings, in dark mode, it’ll help define your text, making it easier to read.


6.      Don’t guess, test!

Always make sure you test and view your tests in both light and dark modes, because sometimes clients simply will not render as you expect.

This is 3 examples of the same campaign, the image in the centre is the standard mode rendering.  The two outside are two versions of outlook that treat the message in different ways in dark mode - as as you can see, whilst the image on the left behaves as you might expect, on the right the engine has chosen to reverse the text, but not the background colour of the email - giving very helpfully white text on a white background.... So as you can see, without looking at multiple clients to see how they will display your email you cannot be certain that the changes you make are going to work in all incarnations of your message. 


If you only take one thing from this first article in our dark mode series it has to be: Don't guess, test and check!! 

Solutions

Free email marketing healthcheck - icon

Email marketing healthcheck

We are confident that we can help you, which is why we offer a free healthcheck to identify potential issues with your current programme and free advice on things that could be done to improve it.

Get started