Email Design Best Practices: Tips for Dark Mode, Mobile Styling & Klaviyo Fixes

Email design makes or breaks clicks and conversions. After an email is opened, you have about three seconds to engage. If your layout is off, you risk losing your viewers’ interest instantly. This one is all about the foundations of great design: fonts that don’t glitch, dark mode tricks, and how to stop Klaviyo from styling your mobile version like it’s 2012.

Let’s get into it. 

The building blocks of excellent email design

Good design should guide, not distract. A clear hierarchy keeps eyes moving and clicks coming. Think scannable headers, short blocks of text, and a strong call to action. Nail these basics, and you're already ahead of most brands in the inbox:

1. Layout that leads the eye

Use a simple, single-column structure for your emails. It’s cleaner, easier to scan, and won’t fall apart on mobile.  Also, keep your content flowing top to bottom with a clear visual hierarchy: headline, image, text, CTA. This keeps your viewers knowing where to look. 

2. Headings that work hard

Your headers should guide the reader and break up chunks of content. 

Don’t overcomplicate things. Keep them bold, short, and to the point. You don’t want to overwhelm your subscribers with too much information. If there are too many different blocks of text in one email, you risk boring readers. See this email example from OSEA nails it with this email by using clear, benefit-focused headings that quickly convey value and keep things simple. The content is easy to scan, with short paragraphs and key points that make it readable — no overwhelm here.

Image source: Milled

3. Text that’s actually readable

Body copy should sit at 14px or larger. No one wants to squint. Use web-safe fonts like Arial, Helvetica, Times New Roman, Verdana, and Georgia, as they are widely supported across different devices. Avoid walls of text. Short paragraphs or line breaks are much easier to read.

Pro tip: If you’re creating a fully commercial newsletter (like for an e-commerce store), centre-aligned text often works best visually. You can consider left-aligning the text if you need to include more detailed information for easier reading and better flow. See this example below:

Image source: Milled

4. Spacing is not a luxury

Use padding (white space) generously. It helps your elements breathe and stops your email from feeling crammed. If something feels off, it’s probably a spacing issue.

5. Buttons > links

CTAs should be bold, clickable, and not buried in text. 

There is no magic number for how many CTA buttons to include in an email. Too many and you spoil the reading experience and slow down conversions. Too little, and your readers will be left wondering what to do next. As a rule of thumb, if you're adding more than three, make sure you have a good reason and that they’re all easy to tap (44x44px is the sweet spot for thumbs). Ideally, the placement, number, copy and design of your CTAs should be constantly A/B tested and optimised depending on your niche audience. Read our full guide to optimising your CTA here, where we share all our best practices.

6. Images that serve a purpose

Avoid using one big image as your whole email. Not only does it scream “spam,” but if it doesn’t load, you’re toast. Balance visuals with live text so your message always gets through.

Image & GIF file size guidance:
To avoid clipping and slow load times:

• Keep the total email size under 102KB to prevent Gmail from clipping your message.

• Compress GIFs to 1MB or less when possible.

• Optimise individual images (ideally under 200KB per image).

• Use tools like TinyPNG or FreeConvert to reduce file sizes without sacrificing quality.

Also, be sure to balance visuals with live text so your message always gets through.

Pro tip: Design should always be functional. If you’re including an image, link it (either to your homepage or a product page). People tend to click images even if there are CTAs present.

Dark mode: Don’t get ghosted

Over 80% of people use dark mode on at least one device. If your email isn’t prepped, it won’t be displayed as intended. Here’s how to keep things looking slick when the lights go out:

Here's a sample of how the email appears in light and dark mode on a mobile device.

1. Use transparent PNGs carefully

White logos or icons with transparent backgrounds might disappear entirely in dark mode. To keep them visible, add a subtle outline or use a coloured background behind them.

2. Avoid pure white or pure black

Dark mode doesn’t just flip colours, it inverts them. Use off-white (#F4F4F4) and dark grey (#121212) to keep your design consistent across modes.

3. Don’t rely on images for text

Text embedded in images won’t adjust in dark mode. Use live text whenever possible and use web-safe fallback fonts to make sure your emails are readable even when custom fonts aren’t supported across all inboxes. We always recommend setting those up in your Klaviyo account so you know exactly how your live text will render.

4. Watch your buttons

If your CTA is white text on a transparent background, it might ghost out in dark mode. Always pair text with a solid fill or border to keep it visible.

5. Test like a maniac

Litmus, Mailtrap, your own inbox—wherever you can preview dark mode, do it. What looks great in light mode can be changed entirely with one click.

Pro tip: Use dark reader directly on Klaviyo and test inverting the site colours to check previews. 

Mobile readability: Where good emails go to die

Most people read emails on their phones, and yet, desktop still rules in most design tools. Your emails might look polished on a laptop, but they will fall short where the majority of your subscribers are scrolling if they are not properly optimised for mobile devices. 

Mobile readability issues to watch out for:

• Buttons that suddenly shrink or stretch (look out for text inside buttons getting shifted to the next line if it is too long)  

• Fonts that get really small or oddly spaced

• Images blowing up to full width

• Double padding that wasn’t there before

• Columns stacking in the wrong order

What happens in Klaviyo?

Klaviyo’s editor lets you style for desktop and mobile, but here’s the catch: if you apply styles to both, mobile can override desktop (or vice versa), especially with text size, spacing, and alignment.

How to fix it:

• Use mobile-specific visibility settings for blocks (hide/show on mobile vs. desktop but keep an eye on email size — using device-specific blocks can get your emails clipped)

• Keep column layouts simple (two maximum)

• Use percentage-based widths for images and buttons when possible

• Preview every email on mobile before you hit send

• Test in multiple inboxes (Gmail and Apple love breaking things differently)
  
  
  
  

Final Thoughts

Don’t make your subscribers guess what to do. 

Design is more than just aesthetics, it’s what makes your email accessible, engaging, and actionable. Even the best subject line can’t save a broken layout. Clean your layout, prep for dark mode, and fix your mobile view before you hit send. Test everything, optimise, then test again.

If you need more help with your email layouts, don’t rely on guesswork. Our boutique team at Melusine Studio are Klaviyo design experts. Get in touch, and we’ll create emails that look good, work everywhere, and get results.