The Biggest Challenges of Email Development in Dark Mode

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

If Simon and Garfunkel were email developers, they might have written this text for The Sound of Silence:

“Hello Dark Mode, my old friend,
I came back to program with you.”

Dark mode challenges are the latest in a long list of things email developers need to pay attention to as marketing teams prepare to launch new campaigns.

Dark mode emails can cause issues with inconsistent branding, inconsistent accessibility, and even reduced subscriber retention. Although these factors are usually not the sole responsibility of the email developer, developers are often asked to help find a solution.

Pathwire and Ascend2 teamed up on the Email After Dark survey to find out how marketers are handling dark mode email (or not). The results reveal what brands find most frustrating about designing and developing dark mode emails.

Let's take a look at some highlights from the Email After Dark survey. Then we'll talk about how email developers can come to the rescue when the rest of the marketing team freaks out.

Dark mode email survey results

Click here to view a full size image

Dark Mode Email Challenges for Developers

This is what our dark mode survey found 44% of respondents design and develop emails for dark mode at least some of the time. Of course, “design and develop” can mean different things to different people on the marketing team.

Email marketers can create templates that work well in both light and dark modes. Or they could code separate emails for dark mode settings. They may also preview emails in dark mode to catch problems before subscribers see them.

What's really interesting about this result is that it suggests that it won't be long before the majority of marketers will consider dark mode when sending emails. The survey revealed 28% of marketers plan to design and develop emails for dark mode. That means a total of 72% have dark mode on their email marketing radar.

Whether you're new to dark mode email or just want advice on overcoming the challenges, let's dive in and explore the dark side.

Optimize logos for dark mode

Topping the list of email marketing challenges is optimizing logos and images in dark mode, which 43% of marketers cite as one of their biggest challenges.

Using transparent PNG files for logos and images helps avoid white boxes around graphics in dark mode. However, it doesn't solve all your logo problems, such as: B. the disappearance of black text or poor contrast. Designers can try other simple solutions such as: B. adding subtle shine or drop shadows to logos.

However, when it comes to email developers, The @media (prefers-color-scheme) CSS query is your secret weapon. This allows you to code separate emails depending on the mode a subscriber uses. This means you can have a logo optimized for dark mode in one email and your regular logo file in the other.

This is what it could look like:

CSS:

@media (prefers-color-scheme:dark) { .dark-mode-hide{ display:none!important; } .dark-mode-show{ display:block!important; } }

HTML

note: The following code tells Outlook to ignore the dark mode logo.

Optimize email code

Although the @media query (prefers-color-scheme) is a practical solution, it also has a downside. Support for email clients is limited to those that use WebKit as their rendering engine. That means you're considering support in Apple Mail, Thunderbird, and some versions of Outlook for Mac.

Gmail's lack of @media query support is definitely frustrating. That's probably why at 34% Optimizing email code for dark mode was the second most cited challenge.

There are some specific fixes for dark mode in Gmail and Outlook. Check out developer Nicole Merlin's advice on troubleshooting dark mode issues in Outlook. She also made a video which you can watch below.

Rémi Parmentier from HTeuMeuLeu.com also has some expert tips for dealing with the troublemakers of dark mode emails. Learn how to use CSS blending modes to fix Gmail dark mode issues and learn how to make email responsive to Outlook.com dark mode.

Of course, the only way to ensure your code is optimized for dark mode settings is to test and preview each email.

Branding and color reversal

Designers and email developers often work together to ensure campaigns are on brand.

So when dark mode emails in off-brand colors show up in your inbox, you need to work together and figure out what you can do about it.

The Email After Dark survey found 33% of marketers cite inconsistent branding in dark mode emails as a top challenge. This is often due to the automatic color inversion, which 31% describe as a challenge in dark mode. Some clients automatically invert all CSS color properties, others only partially invert the colors.

How big customers deal with color inversion in dark mode

Testing emails before sending is the best way to spot inconsistent branding. Pathwire's Email on Acid lets you share unlimited email previews with others on your team to get feedback on whether dark mode emails stray too far from brand guidelines.

My colleague at Pathwire, Sr. Graphic Design Francois Sahli, recommends keeping designs simple. For example, if you stick with black text and a white background, the color reversal will be seamless. Francois also reminds us that we may never get things absolutely perfect.

“If there are small deviations in dark mode, it’s not the end of the world. Unless it’s a very important element of the email, it may not be worth putting in so much effort.”
~ Francois Sahli, Senior Graphic Designer, Pathwire

Reduced email engagement

Of course, the email elements you want your subscribers to interact with are important. If something becomes invisible in dark mode, people won't click on it. For this reason 28% of marketers in our survey are worried about reduced engagement of poor UX in dark mode emails.

Email developers should pay close attention to the coding of call-to-action buttons. Using bulletproof buttons with live text and CSS instead of a button graphic ensures that your button colors still stand out and are on-brand in dark mode.

Measuring the popularity of dark mode

Understanding subscriber behavior may not be one of the top tasks and responsibilities of an email developer. However, it's easy to see why it would be valuable for email marketers to know how many emails appear in the list in dark mode.

Here's some good news… Email on Acid now offers dark mode open tracking in our analytics. If an email client supports the preferences-color-scheme-dark media query, you can see how many subscribers are viewing dark mode campaigns. This can help you decide how much time and effort you want to invest in dark mode email optimization.

Increased workload for developers and designers

The dark mode settings in email have caused some headaches among designers and developers. But as always, we learn to adapt. Finally, we adapt our processes and create resources that help us meet new challenges.

The dark mode challenges are no different. 23% of survey participants cited increased workload as their top concern. However, once an email team builds a library of components that work in dark mode, the production process becomes more efficient.

Even better, you can also work with others in the organization to set dark mode standards in your brand guidelines. This keeps the dark mode experience consistent across the web, apps, and email inbox.

Inconsistent email client rendering

Only 20 percentage points separated the highest dark mode email challenge from the lowest challenge. This is a sign that marketers have become aware of the way dark mode complicates email marketing efforts and that teams are paying attention to the email experience.

Only 23% of marketers reported inconsistent presentation and support across email clientsHowever, this problem is directly related to other challenges, such as: B. Color inversion and code optimization.

If you're still in the dark about dark mode emails, you should start by testing templates and new campaigns. Email on Acid allows you to use the email editor to view and correct HTML emails in dark mode. Additionally, the platform offers dark mode previews from major customers.

It's not easy to deliver emails perfectly! But with the right tools and a little effort, email developers can optimize the experience for subscribers regardless of mode.

Author: Megan Boshuyzen

Megan is a graphic designer and email developer who has worked on all aspects of email marketing. She believes that good emails for good causes make a positive difference in the world. Megan currently works as an email developer for Sinch Email. Visit their website and learn more at megbosh.com.

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps