5 tips for newsletters in dark mode

Dark mode is enjoying increasing popularity with users – and not just for aesthetic reasons. At the same time, it poses challenges for advertisers, for example in the design and development of HTML mailings.

In Dark Mode, screens show backgrounds dark, texts, on the other hand, light and many apps, including Slack, Twitter or Facebook, already support this mode in the settings. Aside from the fact that the dark mode offers a nice change of pace, device manufacturers say there are other reasons to switch to the dark side. Allegedly dark backgrounds are easy on the eyes and even if this argument is controversial, it is clear that it is more pleasant in low light or in the evening when the display is not bright. In addition, the reduced screen brightness saves battery power on many devices.

What is advantageous for the user often makes it difficult for web developers. Because many e-mail clients already support dark mode and, as a result, also convert entire e-mails. So that HTML newsletters and mailings in particular do not lose anything in terms of design, you should consider a few points.

Be careful with images and gradients in the background

It can be particularly unattractive if the background contains images, because some e-mail clients do not reverse them – but the text on top of them does. It can happen that the newsletter only consists of black or white blocks and isolated call-to-actions. The following applies here: ideally design backgrounds using CSS so that dark mode converts them together with the font.

In this sense, color gradients are also difficult to control. When choosing the colors, web designers should keep in mind that legibility remains with the font color inverted.

Yes, but for what ?! When Dark Mode changes the font color but not the background. (Screenshot: Artus Interactive)

More effort in asset creation

What does not fit is made to fit! A good film, but a bad credo for asset creation in newsletters – at least since dark mode has existed. In the past, product images with different heights and widths could be put together to create a clean listing view, now they appear on a black background as an unsightly patchwork quilt. Here it is advisable to trim the same asset types identically.

Almost finished!

Please click on the link in the confirmation email to complete your registration.

Would you like more information about the newsletter? Find out more now

It is therefore not uncommon for a transparent background to be the best choice. Because dark mode always reveals what you actually wanted to hide: corners and edges.

Even a transparent background would not have done the footer icons a favor in dark mode. (Screenshot: Artus Interactive)

Set the right scene for the logo in every mode

However, transparent backgrounds for images are not always sufficient, because this is where the next danger lurks, especially with cut-out black logos or generally dark elements. Dark mode often makes them simply invisible.

To prevent this, there are two options: either do not use the logo with a transparent background so that the appropriate contrast between the background and the logo is ensured. Or, with a transparent background with white outlines and shading, put the legibility in the right light in dark mode.

Invisible in light mode, sometimes sorely missed in dark mode: white outlines. (Screenshot: Instagram / Artus Interactive)

Think about loopholes

Of course, you can also save yourself all the stress: If you want to be absolutely sure that mails look good in all modes and clients, you can rely on very simple plain text mails. They are usually black and white and can therefore be inverted without any problem. And they do not contain any complex design elements that can cause problems in dark mode.

Plain-text emails also have other advantages: They are easy to design, have an appropriate format for a wide variety of occasions and are data-efficient. They are also better off bypassing spam filters. And there are indeed prominent examples: Walmart has – apart from the HTML header and footer – Plain text used for communication during the pandemic.

Finally, web designers cannot avoid testing HTML emails adequately, because no matter how much you prepare yourself for any problems in theory, there are many pitfalls in practice. For example, different mail clients display dark mode differently. Apart from the complete dark mode, which inverts everything, there are a few clients that do not change anything in dark mode. Others partially invert, for example by only showing areas with light backgrounds as dark, while others remain untouched.

In the end, what also applied before dark mode applies: test mailings in all clients on different devices and in all variants and modes before sending them.

You might be interested in that too

Leave a Reply

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