Design av e-postnyhetsbrev: bästa praxis, mallar och exempel [2025]

E-postnyhetsbrev är fortfarande ett av de mest effektiva sätten att bygga relation med din publik. Men när prenumeranter får mängder av utskick varje dag är utformningen ofta det som avgör om brevet öppnas, klickas eller ignoreras.

Den här guiden går igenom det viktigaste inom design av e-postnyhetsbrev: grundprinciper, layouttyper, mobilanpassning, tillgänglighet och praktiska exempel som hjälper mottagaren att agera.

Varför design av e-postnyhetsbrev spelar roll

Innan vi går in på teknikerna är det viktigt att förstå varför design har så stor betydelse för resultatet.

Tresekundersregeln

Prenumeranter bestämmer ofta inom tre sekunder om de ska läsa vidare eller radera utskicket. Det snabba beslutet påverkas främst av visuell struktur, layout, färger, bildval och helhetskänsla.

Viktiga effekter av bra design

• Utskick med bilder kan ge högre klickfrekvens
• Väl utformade nyhetsbrev skapar betydligt mer engagemang
• Responsiv design förbättrar klick från mobilen
• Tydlig visuell hierarki gör innehållet lättare att ta till sig
• Konsekvent varumärkesprofil stärker igenkänning över tid

Designen påverkar alla viktiga nyckeltal: öppningar, klick, konverteringar och i slutändan intäkter.

Grundprinciper för design av e-postnyhetsbrev

1. Visuell hierarki

Visuell hierarki leder läsaren genom innehållet i den ordning du vill. Utan tydlig hierarki skannar mottagaren slumpmässigt och missar viktiga budskap.

Så skapar du effektiv visuell hierarki

Storlek: Större element drar uppmärksamheten först. Rubriken bör vara tydligt större än brödtexten, och knappar eller länkar för nästa steg ska vara enkla att hitta.

Färg: Starka eller kontrasterande färger skapar fokuspunkter. Använd varumärkets accentfärg för primära knappar och viktiga element.

Avstånd: Luft mellan elementen gör layouten lättare att läsa. För täta utskick känns röriga, medan mer luft ger ett mer premiumintryck.

Placering: Läsare skannar ofta i tydliga mönster. Placera det viktigaste innehållet där blicken naturligt rör sig.

Exempel på visuell hierarki

[LOGO]                                    [VISA I WEBBLAESARE]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

          STOR RUBRIK SOM FANGAR UPPMARKSAMHET
    Stodrubrik med mer sammanhang och nytta

                 [HERO-BILD]

Kort brodtext som forklarar varde for lasaren.
Hall stycken korta och enkla att skanna.

            [PRIMAR KNAPP]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   [SEKUNDART INNEHALL]    [SEKUNDART INNEHALL]

                [SIDFOT]

2. Konsekvent varumärkesprofil

Nyhetsbrevet ska direkt kännas igen som ditt. Konsekvens bygger förtroende och förstärker varumärket vid varje utskick.

Varumärkeselement att hålla konsekventa

• Logoplacering - samma plats i varje utskick, ofta uppe till vänster eller centrerat
• Färgpalett - använd 2-3 varumärkesfärger konsekvent
• Typografi - håll dig till 1-2 typsnittsfamiljer
• Bildstil - använd en konsekvent stil för foto eller illustration
• Röst och ton - matcha webbplatsen och övrig kommunikation

Checklista för konsekvens

3. Den inverterade pyramiden

Strukturera innehållet som en inverterad pyramid: viktigast först, stödjande detaljer längre ned.

        ╔════════════════════════════════════════╗
        ║          VIKTIGAST                    ║
        ║    Rubrik, huvudbudskap, hero         ║
        ╠════════════════════════════════════════╣
        ║      STOEDJANDE INFORMATION           ║
        ║   Sammanhang, fordelar, detaljer      ║
        ╠════════════════════════════════════════╣
        ║         TYDLIG HANDLING               ║
        ║    Nasta steg for lasaren             ║
        ╚════════════════════════════════════════╝

Strukturen gör att även mottagare som inte skrollar får med sig huvudbudskapet.

4. Tredjedelsregeln

Tredjedelsregeln kommer från foto och grafisk formgivning och hjälper dig skapa balanserade layouter.

Dela ytan i ett rutnät med tre delar på höjd och bredd. Placera viktiga element längs linjerna eller i skärningspunkterna för att skapa naturlig balans.

5. Luft är din vän

Tom yta mellan element är ett av de mest kraftfulla designverktygen. Den:

• Förbättrar läsbarheten genom att texten inte känns trång
• Skapar fokus genom att isolera viktiga element
• Signalera kvalitet eftersom premiumvarumärken ofta använder generöst med luft
• Minskar kognitiv belastning för läsaren

Rekommendation: Använd minst 20 px mellan större sektioner och 10-15 px mellan element inom samma sektion.

Email Newsletter Layout Types

Different newsletter purposes call for different layouts. Here are the most effective structures.

1. Single-Column Layout

Best for: Mobile-first audiences, story-driven content, minimalist brands

┌──────────────────────────────────────┐
│             [HEADER]                 │
├──────────────────────────────────────┤
│           [HERO IMAGE]               │
├──────────────────────────────────────┤
│           [HEADLINE]                 │
│          [BODY TEXT]                 │
│            [CTA]                     │
├──────────────────────────────────────┤
│        [SECONDARY CONTENT]           │
├──────────────────────────────────────┤
│             [FOOTER]                 │
└──────────────────────────────────────┘

Advantages:

• Perfect mobile responsiveness
• Easy to scan and read
• Simple to design and code
• Natural content flow

Best practices:

• Maximum width: 600px
• Line length: 50-75 characters
• One primary CTA per section

2. Two-Column Layout

Best for: E-commerce showcases, content roundups, side-by-side comparisons

┌──────────────────────────────────────┐
│             [HEADER]                 │
├──────────────────────────────────────┤
│           [HERO SECTION]             │
├─────────────────┬────────────────────┤
│   [PRODUCT 1]   │    [PRODUCT 2]     │
│    [IMAGE]      │     [IMAGE]        │
│    [TEXT]       │     [TEXT]         │
│    [CTA]        │     [CTA]          │
├─────────────────┴────────────────────┤
│             [FOOTER]                 │
└──────────────────────────────────────┘

Advantages:

• Shows multiple items efficiently
• Creates visual interest
• Good for comparison content

Best practices:

• Stack to single column on mobile
• Equal column widths for balance
• Minimum column width: 280px

3. Hybrid/Modular Layout

Best for: Content-rich newsletters, news digests, multi-topic communications

┌──────────────────────────────────────┐
│             [HEADER]                 │
├──────────────────────────────────────┤
│          [FEATURED STORY]            │
├─────────────────┬────────────────────┤
│   [STORY 2]     │    [STORY 3]       │
├─────────────────┴────────────────────┤
│         [FULL-WIDTH CTA]             │
├──────────┬───────────┬───────────────┤
│ [ITEM 1] │ [ITEM 2]  │  [ITEM 3]     │
├──────────┴───────────┴───────────────┤
│             [FOOTER]                 │
└──────────────────────────────────────┘

Advantages:

• Highly flexible
• Accommodates varied content types
• Creates visual rhythm

Best practices:

• Maintain clear section separation
• Use visual cues to show content hierarchy
• Test mobile rendering carefully

4. Z-Pattern Layout

Best for: Promotional emails, announcement newsletters

The Z-pattern follows the natural eye movement across a page, left to right, then diagonally down, then left to right again.

┌──────────────────────────────────────┐
│  [LOGO] ─────────────────► [NAV]     │  ← First horizontal scan
│      ╲                               │
│       ╲                              │  ← Diagonal movement
│        ╲                             │
│  [CONTENT] ──────────────► [CTA]     │  ← Second horizontal scan
└──────────────────────────────────────┘

Best practices:

• Place logo and navigation on the first horizontal line
• Position key visuals in the center diagonal path
• Put CTAs at the end of horizontal scan lines

5. F-Pattern Layout

Best for: Text-heavy newsletters, educational content

Readers scan in an F-pattern when encountering text-heavy content, two horizontal sweeps followed by a vertical scan down the left side.

┌──────────────────────────────────────┐
│  ████████████████████████████ ────►  │  ← First horizontal scan
│  ████████████████ ────────────────►  │  ← Second horizontal scan
│  █                                   │
│  █                                   │  ← Vertical scan
│  █                                   │
│  █                                   │
└──────────────────────────────────────┘

Best practices:

• Put important information in the first two lines
• Start paragraphs with important words
• Use left-aligned text for easy scanning

Mobile-First Email Design

With over 60% of emails opened on mobile devices, mobile optimization isn’t optional, it’s essential.

Mobile Design Requirements

Touch-Friendly Targets

• Minimum button size: 44x44 pixels
• Tap target spacing: At least 10px between clickable elements
• CTA placement: Centered and easy to reach with thumbs

Typography for Mobile

Single-Column Priority

Two-column layouts must stack gracefully on mobile:

Desktop:                    Mobile:
┌────────┬────────┐        ┌────────────────┐
│ COL 1  │ COL 2  │   →    │     COL 1      │
└────────┴────────┘        ├────────────────┤
                           │     COL 2      │
                           └────────────────┘

Mobile Optimization Checklist

• Single-column or responsive multi-column layout
• Font sizes readable without zooming (16px+ body)
• Buttons large enough to tap (44px minimum)
• Images scale properly
• No horizontal scrolling required
• Important content visible without scrolling
• Preview text optimized for mobile inboxes
• Loading time under 3 seconds

Responsive Design Techniques

Use CSS media queries to adapt your design:

/* Desktop styles */
.content-wrapper {
  width: 600px;
}

/* Mobile styles */
@media only screen and (max-width: 480px) {
  .content-wrapper {
    width: 100% !important;
  }

  .column {
    display: block !important;
    width: 100% !important;
  }

  .mobile-center {
    text-align: center !important;
  }
}

Note: Many email clients have limited CSS support. Use inline styles as the primary approach and media queries for enhancements.

Typography Best Practices

Typography can make or break your newsletter’s readability and brand perception.

Font Selection

Web-Safe Fonts

These fonts render consistently across email clients:

• Sans-serif: Arial, Helvetica, Verdana, Trebuchet MS
• Serif: Georgia, Times New Roman, Palatino

Web Fonts in Email

Modern email clients support web fonts via @font-face or Google Fonts. Always include fallbacks:

font-family: 'Open Sans', Arial, sans-serif;

Tip: Test web fonts across clients. Gmail, Apple Mail, and iOS Mail support them; Outlook does not.

Typography Guidelines

Line Length

• Optimal: 50-75 characters per line
• Maximum: 80 characters
• For 600px width: Use 16-18px font for ideal line length

Line Height (Leading)

• Body text: 1.5 to 1.7 times the font size
• Headlines: 1.2 to 1.3 times the font size

Font Pairing

Use contrast to create hierarchy:

Text Formatting Tips

• Use bold for emphasis, not underlining (which implies links)
• Limit ALL CAPS to short headlines or CTAs
• Left-align body text for easier reading
• Center headlines for visual balance
• Avoid justified text which creates uneven spacing

Image Optimization for Email

Images enhance newsletters but require careful optimization for performance and accessibility.

Image Types and Uses

Image Sizing Guidelines

• Maximum width: 600px (matches email width)
• Hero images: 600px x 300-400px
• Product images: 280-300px width
• Thumbnail images: 100-150px width

Image File Size Optimization

Large images slow loading and increase the chance of landing in spam folders.

Target file sizes:

• Hero images: Under 200KB
• Product images: Under 100KB
• Icons: Under 10KB
• Total email size: Under 1MB

Optimization techniques:

• Use JPEG for photographs (80-85% quality)
• Use PNG for graphics with transparency
• Compress images with tools like TinyPNG or ImageOptim
• Consider WebP format for supporting clients

Alt Text Best Practices

Alt text is crucial for accessibility and when images don’t load:

Good alt text:

<img src="hero.jpg" alt="Woman wearing our new Spring Collection blue linen dress, standing in a garden">

Poor alt text:

<img src="hero.jpg" alt="image" />
<img src="hero.jpg" alt="" />
<img src="hero.jpg" alt="hero-image-spring-2025-v2-final.jpg" />

Alt text guidelines:

• Describe what the image shows
• Include relevant keywords naturally
• Keep under 125 characters
• Make it meaningful, not just “image of…”

Retina Display Optimization

For crisp images on high-resolution screens, use images at 2x the display size:

• Display size: 300px width
• Image file: 600px width
• Set explicit width in HTML

<img src="product-600w.jpg" width="300" style="width: 300px; max-width: 100%;" alt="Product description">

Color Psychology and Usage

Color influences emotions, guides attention, and reinforces brand identity.

Color Psychology in Email

Color Ratio Guidelines

Follow the 60-30-10 rule:

• 60%: Primary/background color
• 30%: Secondary color
• 10%: Accent color (CTAs, highlights)

Color Contrast for Accessibility

Ensure sufficient contrast between text and backgrounds:

• Normal text: Minimum 4.5:1 contrast ratio
• Large text (18px+): Minimum 3:1 contrast ratio
• Use tools: WebAIM Contrast Checker

High contrast examples:

• Black (#000000) on white (#FFFFFF) - 21:1
• Dark blue (#003366) on white - 12.6:1
• White on dark purple (#4A154B) - 10.8:1

CTA Button Colors

Your call-to-action buttons should stand out immediately:

• Use your highest-contrast accent color
• Maintain consistency across all emails
• A/B test different colors to optimize performance
• Ensure the color differs from body text links

Email Accessibility

Accessible email design ensures all subscribers can engage with your content, including those using assistive technologies.

WCAG Guidelines for Email

The Web Content Accessibility Guidelines (WCAG) apply to email:

1. Perceivable

• Provide text alternatives for images (alt text)
• Don’t rely on color alone to convey information
• Ensure sufficient color contrast
• Make text resizable without breaking layout

2. Operable

• All functionality available via keyboard
• Give users enough time to read content
• Don’t use flashing content that could trigger seizures

3. Understandable

• Use clear, simple language
• Maintain consistent navigation
• Provide clear error messages

4. Robust

• Use valid HTML
• Test across different email clients
• Ensure compatibility with assistive technologies

Accessible Email Checklist

• All images have descriptive alt text
• Color contrast meets WCAG AA standards (4.5:1)
• Links are descriptive (“Read our guide” not “Click here”)
• Font size is at least 14px (16px preferred)
• Email has a logical reading order
• Tables are used for layout only, not data (or have proper headers)
• Language is declared in HTML
• Focus indicators are visible for interactive elements

Screen Reader Considerations

Structure your email for screen reader users:

• Use semantic HTML when possible (h1, h2, p, etc.)
• Provide a plain-text version
• Include a “View in browser” link
• Avoid “image-only” emails
• Test with VoiceOver, NVDA, or JAWS

Effective CTA Design

Your call-to-action is where design meets conversion. Get it right.

CTA Button Best Practices

Size and Shape

• Minimum size: 44px height, 120px width
• Padding: At least 12-16px vertical, 24-32px horizontal
• Shape: Rounded corners (4-8px) often outperform sharp corners

Color and Contrast

• Use your brightest accent color
• Ensure high contrast with background
• Button text should be highly readable

Text Guidelines

• Use action-oriented verbs: “Shop Now,” “Get Started,” “Download”
• Create urgency when appropriate: “Claim Your Discount”
• Keep it short: 2-5 words
• Avoid generic text: “Click Here,” “Submit,” “Learn More”

CTA Placement

• Primary CTA: Above the fold (visible without scrolling)
• Secondary CTA: After supporting content
• One primary CTA per email (avoid decision paralysis)

High-Converting CTA Examples

Button vs. Text Links

Use buttons for primary actions and text links for secondary actions:

[SHOP NOW]  ← Primary button (high visual weight)

or browse our new arrivals →  ← Secondary text link

Email Newsletter Examples by Industry

Let’s examine effective newsletter designs across different industries.

E-commerce Newsletter Design

Key elements:

• High-quality product photography
• Clear pricing display
• Multiple product showcases
• Strong promotional messaging
• Easy-to-tap “Shop” buttons

Layout recommendation: Modular grid with product cards

┌────────────────────────────────────┐
│         SALE BANNER                │
├────────────────────────────────────┤
│        [HERO PRODUCT]              │
│         30% OFF                    │
│       [SHOP NOW]                   │
├─────────────┬──────────────────────┤
│  [PROD 1]   │     [PROD 2]         │
│   $49.99    │      $79.99          │
├─────────────┴──────────────────────┤
│     FREE SHIPPING OVER $75         │
└────────────────────────────────────┘

SaaS/Tech Newsletter Design

Key elements:

• Clean, minimalist aesthetic
• Feature highlights with icons
• Educational content focus
• Clear value propositions
• Professional imagery

Layout recommendation: Single-column with feature blocks

┌────────────────────────────────────┐
│      NEW FEATURE ANNOUNCEMENT      │
├────────────────────────────────────┤
│        [FEATURE SCREENSHOT]        │
├────────────────────────────────────┤
│ ✓ Benefit one                      │
│ ✓ Benefit two                      │
│ ✓ Benefit three                    │
├────────────────────────────────────┤
│         [TRY IT NOW]               │
└────────────────────────────────────┘

Media/Publishing Newsletter Design

Key elements:

• Strong typography hierarchy
• Article previews with images
• Category organization
• Author bylines
• Read time indicators

Layout recommendation: Card-based content grid

┌────────────────────────────────────┐
│        TOP STORY                   │
│   [LARGE IMAGE]                    │
│   Headline text here               │
│   Brief excerpt...                 │
├─────────────┬──────────────────────┤
│  [STORY 2]  │    [STORY 3]         │
│   Headline  │     Headline         │
├─────────────┴──────────────────────┤
│         MORE STORIES →             │
└────────────────────────────────────┘

B2B/Professional Services Newsletter Design

Key elements:

• Conservative, professional design
• Thought leadership content
• Case studies and data
• Event promotions
• Resource downloads

Layout recommendation: Professional single-column

┌────────────────────────────────────┐
│      [COMPANY LOGO]                │
├────────────────────────────────────┤
│    THIS MONTH'S INSIGHTS           │
├────────────────────────────────────┤
│  📊 Industry Report                │
│     Key findings from our latest   │
│     market analysis...             │
│          [READ MORE]               │
├────────────────────────────────────┤
│  📅 Upcoming Webinar               │
│     March 15 at 2pm EST            │
│         [REGISTER]                 │
└────────────────────────────────────┘

Email Design Tools and Resources

Design Platforms

Drag-and-drop builders:

• Brevo (formerly Sendinblue) - Integrated with Tajo
• Mailchimp
• Klaviyo
• Campaign Monitor

Professional design tools:

• Figma (design and prototyping)
• Adobe XD
• Sketch

Template Resources

Free templates:

• Brevo template library
• Litmus Community templates
• Email on Acid templates

Premium templates:

• ThemeForest email templates
• Envato Elements
• Creative Market

Testing Tools

• Litmus - Email preview across 90+ clients
• Email on Acid - Cross-client testing
• Mail Tester - Spam score checking
• Accessible Email - Accessibility validation

Common Email Design Mistakes to Avoid

1. Image-Heavy Emails

Problem: Some email clients block images by default. Image-only emails appear blank.

Solution: Always include live text. Use images to enhance, not replace, content.

2. Too Many CTAs

Problem: Multiple competing CTAs create decision paralysis.

Solution: One primary CTA per email. Use text links for secondary actions.

3. Ignoring Mobile

Problem: Designs that look great on desktop fail on mobile.

Solution: Design mobile-first. Test on multiple devices before sending.

4. Poor Contrast

Problem: Low-contrast text is hard to read and fails accessibility standards.

Solution: Use contrast checking tools. Maintain 4.5:1 minimum ratio.

5. Overcrowded Layouts

Problem: Dense designs overwhelm readers and reduce engagement.

Solution: Embrace whitespace. Focus on fewer, higher-quality content pieces.

6. Inconsistent Branding

Problem: Emails that don’t match your website confuse subscribers.

Solution: Create email brand guidelines. Use templates to maintain consistency.

7. Slow-Loading Emails

Problem: Large files take too long to load, especially on mobile.

Solution: Compress images. Keep total email size under 1MB.

Creating Your Newsletter Design with Tajo

Tajo makes professional email newsletter design accessible to everyone through its integration with Brevo’s powerful email builder.

Built-In Design Features

• Pre-built templates - Professional designs ready to customize
• Drag-and-drop editor - No coding required
• Mobile preview - See how emails render on all devices
• Brand asset library - Store logos, colors, and fonts
• Image editor - Crop, resize, and optimize in-platform
• A/B testing - Test different designs to optimize performance

Dynamic Content Blocks

Personalize newsletter design with dynamic elements:

• Product recommendations based on browse/purchase history
• Personalized images with subscriber names or locations
• Conditional content based on customer segments
• Real-time inventory showing in-stock items

Multi-Channel Consistency

Design once, deploy everywhere:

• Email templates that match your brand
• SMS formatting optimized for mobile
• WhatsApp messages with rich media support
• Unified customer experience across all channels

Frequently Asked Questions

Vad är the ideal width for an email newsletter?

The standard and recommended width for email newsletters is 600 pixels. This width works well across most email clients and devices while providing enough space for content. For mobile, emails should be responsive and adjust to the screen width, typically stacking multi-column layouts into a single column.

How many images should I include in my newsletter?

There’s no fixed rule, but a good guideline is to maintain a 60:40 text-to-image ratio. This ensures your email displays properly when images are blocked and helps with deliverability. Most newsletters perform well with 1-3 hero or feature images plus smaller product or supporting images. Always include alt text and avoid image-only emails.

What fonts work best for email newsletters?

Web-safe fonts like Arial, Helvetica, Georgia, and Verdana render consistently across all email clients. You can use web fonts (Google Fonts, Adobe Fonts) with proper fallbacks, but be aware that some clients like Outlook will display the fallback font. Stick to 1-2 font families maximum for clean, professional designs.

How do I make my emails accessible?

Key accessibility practices include: using alt text on all images, maintaining 4.5:1 color contrast for text, using descriptive link text (not “click here”), ensuring minimum 14-16px font sizes, providing a plain-text version, and structuring content with proper heading hierarchy. Test with screen readers when possible.

Should I use dark mode design for newsletters?

Yes, you should consider dark mode. Over 80% of users have dark mode enabled on at least one device. Design tips include: avoid pure white backgrounds (use off-white), provide both light and dark logo versions, use transparent PNGs for graphics, and test your emails in both light and dark mode. Some email clients will automatically invert colors, so test thoroughly.

What’s the best image format for email?

JPEG is best for photographs and complex images with many colors. PNG is ideal for graphics with transparency, logos, and images with text. GIF works for simple animations. WebP offers better compression but has limited email client support, always provide fallbacks. Keep file sizes under 200KB for main images and aim for under 1MB total email size.

How do I improve my email newsletter click rates?

To improve click rates: place your primary CTA above the fold, use contrasting button colors, write action-oriented button text, ensure buttons are at least 44px tall for easy tapping, limit the number of CTAs (one primary per email), create visual hierarchy that leads to your CTA, and A/B test different designs, colors, and placements.

How often should I update my newsletter design?

Maintain consistent branding for recognition while making small optimizations continuously based on performance data. Consider a major design refresh every 12-18 months to stay current with design trends. Always A/B test significant changes before rolling them out to your entire list. Seasonal variations and special edition designs can provide variety without losing brand consistency.

Slutsats

Email newsletter design is both an art and a science. The principles covered in this guide, visual hierarchy, mobile optimization, accessibility, typography, and strategic CTA placement, form the foundation of newsletters that engage and convert.

Remember these key takeaways:

1. Design for mobile first - The majority of your subscribers will read on phones
2. Prioritize clarity - Every element should serve a purpose
3. Maintain brand consistency - Build recognition with every send
4. Test continuously - Small improvements compound over time
5. Focus on accessibility - Design for all subscribers, not just most

Great newsletter design isn’t about following every trend, it’s about creating clear, engaging, on-brand communications that respect your subscribers’ time and attention.

Ready to create beautiful, high-converting newsletters? Get started with Tajo and access professional email templates, drag-and-drop design tools, and powerful personalization features, all backed by Brevo’s industry-leading deliverability.