Newsletter Design: 15 Best Practices for More Clicks

A well-designed newsletter reads in seconds, leads the eye systematically to the CTA, and works on any device. A badly designed one does the same thing in twice the time and loses half the readers on the way. In this post we walk through 15 design rules that have proven their value in hundreds of A/B tests — from mobile layout to typography.

Why design decides

The average dwell time in a business email in 2026 is 9 seconds. Readers who do not immediately understand the topic and action in that window simply do not click. Design is not optional polish — it is the lever that turns a 10 % click rate into a 25 % click rate.

1. Design mobile-first, always

Over 70 % of newsletters are read on smartphones. That is not just "responsive layout" but: write the mobile design first, derive desktop from it. Not the other way round. Rules of thumb:

• One column, max width 600 px (often 480 px).
• Body text at least 16 px, headings 22–28 px.
• Buttons minimum 44 × 44 px (finger-friendly target).

2. Clear visual entry point

The first 100 pixels matter most. That is where you put:

• Logo (small, top-left or centred).
• Issue title or monthly theme.
• Your face or sender name (for personal newsletters).

No more giant header banners — they eat scroll depth and overwhelm mobile views.

3. One main message per issue

A newsletter is not a magazine. Pick one lead story and treat everything else as brief notes. Visually: title + lead + CTA big, the rest small in the lower third.

4. Hierarchy through typography

Work with clear size steps:

• H1 (issue title): 28–32 px
• H2 (section heading): 22–24 px
• Body text: 16–18 px
• Meta info (date, category): 12–14 px

Use at most two fonts: one sans-serif for headings, one for body. Or a single typeface throughout.

5. Optimise line length and height

Reading flow suffers if lines are too long or paragraphs too tight:

• Line length: 45–75 characters.
• Line height: 1.4–1.6× font size.
• Paragraph spacing: clearly bigger than line spacing — creates visual breathing.

6. Use white space deliberately

White space is not wasted space. It guides the eye. An email design with 30–40 % empty space feels premium; one with 10 % feels cramped.

7. CTA as the visual endpoint

The primary CTA should be:

• big enough (minimum 140 × 44 px).
• high contrast (brand colour on white, not the other way round).
• action-oriented label ("Read the article" instead of "click here").
• not immediately at the top — the reader must grasp the benefit first.

Bulletproof CTAs (HTML, not image buttons) are mandatory — some clients block images.

8. Never rely on images alone

Gmail and Outlook block images by default. That means:

• Any important info must also be text.
• Alt text on every image.
• Background colours on containers so the structure shows even without images.

9. Check dark-mode compatibility

Over 80 % of iOS and Android users use dark mode at least occasionally. Check:

• Does the logo disappear on dark background? Ship an SVG or PNG dark-mode variant.
• Do background colours invert unexpectedly?

Mailaura's editor shows dark and light preview directly in the browser.

10. Use colour sparingly

At most three colours per newsletter:

• Primary: brand colour for CTAs.
• Secondary: subtle for accents.
• Text: dark grey (not pure black).

Avoid rainbow designs. Consistency pays off in recognition.

11. Size images correctly

• Max width: 600 px (newsletter container).
• Format: JPG for photos (70–80 % quality), PNG for graphics with transparent background, SVG if the client supports it.
• File size: < 200 KB per image, < 1 MB total email (incl. HTML). Larger emails get truncated by Gmail.

12. Structure the footer properly

The footer is legally important and at the same time space for trust elements. Mandatory:

• Legal notice (company name, address, legal form, register/VAT).
• Unsubscribe link.
• Link to privacy policy.

Optional:

• Social media icons (small, subtle).
• Short note: "You are receiving this because you signed up at …".
• Contact link or "feel free to reply directly to this email".

13. Animations and GIFs sparingly

GIFs work in Apple Mail, Gmail Web, Thunderbird — but not always in Outlook. Outlook shows only the first frame. So: the first frame must make sense without animation. GIFs no larger than 1 MB, ideally under 500 KB.

14. Personalisation beyond the first name

Single name tokens (Hi Lisa!) are the minimum, not the maximum. Real value comes from:

• Dynamic content blocks: "Because you follow SEO, this article …"
• Time-based greetings: "Good morning" vs. "Good evening".
• Product recommendations based on purchase history.

Details in Newsletter personalisation.

15. Test before you send

Before every campaign goes to the list:

• Test send to yourself plus at least one Gmail and one Outlook account.
• Mail-Tester score > 9/10.
• Mobile preview (on a real phone, not just the editor simulator).
• Dark-mode preview.
• All links verified by real clicks.

Common design mistakes

• Too many images: when the overall image view is disabled, nothing is left.
• Text inside images: not searchable, not screen-reader accessible, penalised by spam filters.
• Neon colours: look cheap on desktop, strain the eyes on mobile.
• Italic or serif-heavy headlines: hard to read on smartphones.
• No preheader: the preheader (preview text) shows in the inbox right after the subject — if unused, you lose open rate.

Example: solid issue structure

1. Header (logo + issue number) — 80 px tall
2. Hero section (weekly topic + image + main link) — 400 px
3. Mini section ("briefly read") with 3 links — 250 px
4. CTA block (product, event, offer) — 200 px
5. Footer — 150 px

Total height between 900 and 1,200 pixels — one to two full mobile scrolls.

Tools for newsletter design

• Mailaura block editor: drag-and-drop, dark-mode preview, mobile preview directly.
• Figma + export: for complex layouts, design in Figma first, then re-build in HTML.
• Litmus / Email on Acid: rendering tests across 50+ email clients.

Conclusion

Newsletter design is decision design: once the eye knows where to go, the hand clicks it. Mobile-first, clear hierarchy, sparing colour palette, tested CTA — nothing more is needed to land a click rate well above industry average. If you want to start directly with a clean template, Mailaura's editor ships pre-built block layouts that already follow all 15 rules.