Hey, anyone faces dark mode challenges and uses only visual based emails? how does this influence your deliverability?
What altrenative solutions can you suggest?
Solved
Any feedback on visual based on emails
+3Best answer by rqcha
Hi
Thanks for posting!
- Make sure that the headers and footers are designed in a way that looks good in dark mode and are not image-heavy so that there are portions of the email that show up immediately upon opening.
- Split your emails up into multiple images – for example, if your entire email image is 1000x3000 pixels, I split it into 3 1000x1000 pixel images that are all connected.
- Alt text – an important thing I didn’t know for a very long time is that alt text can be as long as you’d like it to be! I make sure that all of the alt text contains all of the text from the image in addition to image descriptions.
- Segmenting – this is only tangentially related to visual design, but I have found that doing lots of engagement segmenting means that our email recipients are very engaged and invested in the content that we’re sending them. The higher your open rates and click rates, the better your deliverability!
- Sometimes I open emails and gasp at how they look in dark mode – I think definitely adjusting branding so that they look good in light and dark mode can really help. I would even A/B test with different color schemes to better figure out which branding and visuals work the best.
I’m very invested in design-first marketing, so I understand how tricky it can be to figure out how to do the most optimized marketing while also adhering to strict visual guidelines. I’m always down to chat about graphic design + visuals, so let me know if you have any other questions!
+3Hi there! Using only visual-based emails (image-heavy emails) can impact deliverability and accessibility, especially in dark mode settings. Here’s why and how to optimize them:
Challenges with Visual-Based Emails in Dark Mode:
1. Inverted or Altered Colors: Some email clients automatically invert or modify colors, making your images look different.
2. Unreadable Text in Images: If text is embedded within an image instead of using actual HTML text, it might not adjust properly for dark mode.
3. Email Clients Blocking Images: Some email clients block images by default, leading to a poor user experience.
4. Accessibility Issues: Screen readers can’t interpret image-based text, making emails inaccessible to visually impaired users.
5. Slow Load Times: Large image files can slow email load times, especially on mobile networks.
Solutions & Best Practices:
Use a Hybrid Email Design
• Combine HTML text and images instead of relying solely on images.
• This ensures content remains readable in all modes.
Use Transparent or Adaptable Images
• Instead of white backgrounds, use transparent PNGs or SVGs that adapt well to dark mode.
• Avoid light-colored images that might disappear against a dark background.
Dark Mode-Friendly Colors
• Use colors that contrast well in both light and dark modes (e.g., medium grays instead of pure black or white).
• Test your designs in dark mode across multiple email clients.
Include Alt Text for Images
• If images don’t load, alt text ensures users still get the message.
Optimize Images for Faster Loading
• Compress images using tools like TinyPNG or Squoosh to reduce load time.
Test Across Different Email Clients
• Use tools like Litmus or Email on Acid to preview emails in various environments.
Alternative Solutions
If you still want to use visual-heavy emails, consider:
• Interactive elements (GIFs, CSS animations) that adapt better to different modes
• Dark mode-friendly templates provided by Klaviyo or other email builders
• A/B testing different formats to see what works best for your audience
Hi
Thanks for posting!
- Make sure that the headers and footers are designed in a way that looks good in dark mode and are not image-heavy so that there are portions of the email that show up immediately upon opening.
- Split your emails up into multiple images – for example, if your entire email image is 1000x3000 pixels, I split it into 3 1000x1000 pixel images that are all connected.
- Alt text – an important thing I didn’t know for a very long time is that alt text can be as long as you’d like it to be! I make sure that all of the alt text contains all of the text from the image in addition to image descriptions.
- Segmenting – this is only tangentially related to visual design, but I have found that doing lots of engagement segmenting means that our email recipients are very engaged and invested in the content that we’re sending them. The higher your open rates and click rates, the better your deliverability!
- Sometimes I open emails and gasp at how they look in dark mode – I think definitely adjusting branding so that they look good in light and dark mode can really help. I would even A/B test with different color schemes to better figure out which branding and visuals work the best.
I’m very invested in design-first marketing, so I understand how tricky it can be to figure out how to do the most optimized marketing while also adhering to strict visual guidelines. I’m always down to chat about graphic design + visuals, so let me know if you have any other questions!
Raquel Caticha 🌱 Marketing elf with design opinions at Hazel Village 🌰
1 person likes this
Reply
Rich Text Editor, editor1
Editor toolbars
Press ALT 0 for help
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.