Tips for Viewing Dark-themed Designs - Optimize Email Experience

[user41581]

Designing an email with the primary brand color is black. The emails are being reversed for those who have their computers set to dark mode. Any tips on getting a Constant Contact email to look the way it was designed.... 

(viewing emails with predominantly black designs and noticing the images appear in reverse) all tips tricks welcomed - thank you!

[William_A]

Hello @user41581 ,

Which apps are you noticing the dark mode causing a black background to be inversed in? When I test send to my Gmail accounts, the black background shows in dark mode for both my white background and black background versions of the email.

Generally speaking, the best practice if an email program you believe your contacts are predominantly using is improperly recoloring for dark mode, is to use as neutral of coloring as possible - grays, black, and white - which it sounds like you're already doing for at least the background. Otherwise the only other option would be to suggest your contacts not use dark mode at all. 

For our article going over some general best practices and advise on dark mode, click here.

There's unfortunately a very limited number of options for working around this since it's entirely dependent on the receiving end - both the device and the email program / app's way of handling dark mode. Typically speaking, the email programs will default to black backgrounds and white lettering for the dark modes, while leaving other elements alone, but there can be discrepancies from one program to another.

Some other Community users may have other ideas as far as their methods of avoiding this for at least their device setups, and may chime in with their advice. Personally, when I've encountered an email that didn't format properly in dark mode on my phone or computer, I've just temporarily toggled to light mode for that particular email. 

See also:

Display Issues – Why does my email look different when received?

[DavidFischerSolutionsForGrowth]

Designing an email with dark colors can be challenging. If you would like, post a link to the email here and I can take a look at it and perhaps provide specific suggestions. Reach out if you have any questions, I'm always happy to help.

[user41581]

how do I send you a link?

[William_A]

Hi @user41581 ,

For emails that have been sent out, we generate a unique URL that can be shared in other programs. For step-by-step and visual guidance on accessing this URL, I'd recommend following along with this article. 

[DavidFischerSolutionsForGrowth]

Click on one of the emails you have already sent out.
Go to Details.
The last line contains the Email link.
Copy that link and post it here.
I have attached a screenshot that illustrates this. Please reach out if you have any questions.

[user41581]

Hi - good morning - did you receive the link I sent?

[DavidFischerSolutionsForGrowth]

I don't see the link. Please copy it and post it here.

[user41581]

https://myemail-api.constantcontact.com/Last-chance-before--.html?soid=1104539807008&aid=kLDAIXadEAE

[DavidFischerSolutionsForGrowth]

Thank you for the link. I see that you are balancing the dark blocks at the top and the bottom with a white background for the information in between. It looks good, but as you mentioned, it can present a problem when viewing in dark screen mode. One solution would be to avoid using a black background for the entire top portion of the email. 

• You could have the top bar with the logo be black and the body with Tommy’s image in white. That would still provide the balance in your design.
• Direct Your Focus could also be in black.
• In addition, choose a color for the background in Constant Contact that contrasts a bit with the white, perhaps a light grey, so when your email is viewed on a desktop there isn’t a sea of white showing around the body of the email.

Because this is an email introducing your audience to Exhibit Craft, other suggestions to consider are:

• Add contact information at the top of the email so your audience doesn’t have to scroll down and hunt for a way to contact you.
• Include one video from your YouTube account to show off the exhibits such as this one https://youtu.be/WqQw5sTX400?feature=shared or your most recent https://youtu.be/TseX3t_lHhU?feature=shared
• Offer a promotion to incentivize your audience.

Add more CTA buttons to link and drive traffic to your website:

• Show a few images with completed exhibits so your audience can see the fantastic results. The gif you have included is very fast and difficult to register. The images also include the exhibits prior to completion. You have a great photo gallery on your website. Show the completed images. (Drive home the idea that this is what you will get when you work with us.)
• Include a button to “View More Exhibits” and link to the gallery page on your website.
• To spark further interest and another opportunity to drive traffic to your website, link to a blog post from your website. Include a few lines and a button to “Read More”

I hope this is helpful. Feel free to schedule a call to discuss this further and learn about how Solutions for Growth can help you achieve your marketing goals.