Priručnik za dizajn emaila: izgled, mobilni prikaz, pristupačnost i provjera predložaka (2026)

Dizajnirajte marketinške, lifecycle i transakcijske emailove uz praktične smjernice za raspored, tipografiju, slike, responzivni prikaz, tamni način, pristupačnost, testiranje i predloške.

Ovaj lokalizirani uvod usklađuje članak s izvornim vodičem i postavlja kontekst za hrvatske čitatelje. Tema nije samo popis alata ili definicija pojmova. Važno je razumjeti kada nešto koristiti, kako procijeniti rizik, koje podatke mjeriti i kako odluku povezati s prihodima, korisničkim iskustvom i kapacitetom tima.

U praksi je najkorisnije krenuti od poslovnog cilja. Ako je cilj više prijava, prioritet su jasna ponuda, obrazac i brza potvrda. Ako je cilj bolja isporučivost, prioritet su autentikacija domene, higijena liste i reputacija pošiljatelja. Ako je cilj brža podrška, prioritet su kanali, usmjeravanje razgovora i kvalitetna baza znanja. Isti alat može biti odličan za jedan tim, a pretežak ili preskup za drugi.

Što ovaj vodič pokriva

Ovaj vodič objašnjava kako razmišljati o temi Priručnik za dizajn emaila: izgled, mobilni prikaz, pristupačnost i provjera predložaka (2026) bez oslanjanja na površne usporedbe. Umjesto da gledate samo početnu cijenu ili najduži popis značajki, usporedite stvarne scenarije upotrebe, ograničenja plana, integracije, podatke koje alat može koristiti i vrijeme koje je potrebno da tim usvoji novi način rada.

Ključna pitanja za procjenu:

• Koji konkretan problem rješavate u sljedećih 30 do 90 dana?
• Koji kanal ili korisnički trenutak ima najveći utjecaj na rezultat?
• Koje podatke već imate i koliko su pouzdani?
• Tko će svakodnevno održavati kampanje, obrasce, automatizacije ili izvještaje?
• Kako ćete znati da je promjena uspjela?

Kako procijeniti opcije

Dobar izbor mora biti dovoljno jednostavan za svakodnevni rad, ali dovoljno snažan da podrži rast. Zato prvo dokumentirajte minimalne zahtjeve, a tek zatim dodatne mogućnosti. Minimalni zahtjevi obično uključuju pouzdano slanje ili prikupljanje podataka, jasnu analitiku, segmentaciju, integracije s CRM-om ili trgovinom, mogućnost testiranja i podršku za timove koji nisu tehnički.

Za usporedbe alata korisno je napraviti kratku tablicu s pet stupaca: primarni slučaj upotrebe, prednosti, ograničenja, cijena pri vašem stvarnom obujmu i napor implementacije. Takva tablica brzo pokaže razliku između alata koji dobro izgleda u demo prikazu i alata koji će tim stvarno koristiti svaki tjedan.

Operativni koraci

Prvo odaberite jedan scenarij s jasnim rezultatom. To može biti welcome sekvenca, obrazac za prikupljanje leadova, automatizacija nakon kupnje, provjera email liste, live chat na stranici s cijenama ili izvještaj koji povezuje kampanje s prihodom. Zatim postavite početnu verziju, provjerite poruke, mjerne oznake i pravila izuzimanja, pa tek onda širite na dodatne segmente.

Posebno pazite na kvalitetu podataka. Loše označeni kontakti, duplicirani zapisi, zastarjele liste i nejasne dozvole mogu pokvariti i najbolju strategiju. Prije većih kampanja provjerite izvore podataka, pravila privole, mapiranje polja i način na koji se rezultati vraćaju u CRM ili analitiku.

Kontrolna lista prije odluke

• Cilj je zapisan jednom rečenicom i povezan s metrikom.
• Segmenti su jasni i ne preklapaju se nepotrebno.
• Poruke su prilagođene trenutku korisnika, a ne samo internom kalendaru.
• Postoje pravila za izuzimanje korisnika koji su već kupili, odjavili se ili otvorili zahtjev za podršku.
• Testiranje je dovoljno jednostavno da se rezultat može protumačiti.
• Izvještavanje pokazuje klikove, konverzije, prihod ili uštedu vremena, a ne samo aktivnost.
• Tim zna tko održava sadržaj, tko prati rezultate i tko odobrava promjene.

Sljedeći koraci

Najbolji rezultat dolazi iz malih, dobro izmjerenih poboljšanja. Pokrenite osnovnu verziju, provjerite isporuku i podatke, usporedite rezultat s početnim stanjem i zatim dodajte složenije grananje, personalizaciju ili dodatne kanale. Tako zadržavate kontrolu, smanjujete rizik i gradite sustav koji se može ponavljati.

Part 3: Images in Email Design

Images capture attention and convey information quickly. But they also create potential rendering issues that require careful management.

Image Optimization Checklist

Before adding any image:

• Compress to under 1MB (ideally under 200KB)
• Set explicit width and height attributes
• Add descriptive alt text
• Use appropriate file format
• Test with images disabled

Image File Formats

Alt Text Best Practices

Alt text displays when images don’t load and is read by screen readers.

Effective alt text examples:

Alt text guidelines:

• Keep under 125 characters
• Describe function, not appearance
• Include key text from images
• Leave empty for purely decorative images

Responsive Images

Ensure images scale properly across devices:

<img src="image.jpg"
     width="600"
     height="400"
     alt="Description"
     style="max-width: 100%; height: auto;">

Hero Image Best Practices

Hero images set the visual tone for your entire email:

Specifications:

• Width: 600px (scales down for mobile)
• Height: 200-400px
• File size: Under 200KB
• Text overlay: Avoid critical text in images

Hero image template:

┌─────────────────────────────────┐
│                                 │
│        HERO IMAGE               │
│    (Lifestyle/product shot)     │
│                                 │
│   Overlay text in HTML, not     │
│   embedded in image             │
│                                 │
└─────────────────────────────────┘

Background Images

Background images add visual interest but have limited support:

Support matrix:

Always include a solid color fallback for Outlook users.

Product Image Guidelines

For e-commerce emails featuring products:

• Consistent dimensions across all products
• White or neutral backgrounds
• Multiple angles when possible
• Minimum 300px width for product images
• Link directly to product pages

Part 4: Mobile Email Design

With over 60% of emails opened on mobile devices, mobile-first design is essential.

Mobile Design Principles

The mobile-first approach:

1. Design for smallest screen first
2. Stack content vertically
3. Enlarge tap targets
4. Simplify navigation
5. Test on actual devices

Responsive Design Techniques

Media queries for mobile:

@media screen and (max-width: 600px) {
  .content {
    width: 100% !important;
    padding: 10px !important;
  }
  .hide-mobile {
    display: none !important;
  }
}

Touch-Friendly Design

Minimum tap target sizes:

CTA button template:

┌──────────────────────────────┐
│                              │
│       SHOP NOW               │
│                              │
└──────────────────────────────┘
       44px minimum height

Mobile Typography

Mobile font adjustments:

• Body text: 16px minimum (prevents zoom on iOS)
• Headlines: 24-28px
• Line height: Increase by 10% for mobile
• Paragraph spacing: Increase for thumb scrolling

Mobile Image Considerations

• Use fluid widths (max-width: 100%)
• Reduce image count on mobile
• Consider hiding decorative images
• Load smaller image versions when possible

Mobile Testing Checklist

• Test on iOS Mail
• Test on Gmail app (iOS and Android)
• Test on Outlook app
• Verify images load on cellular
• Check loading time under 3 seconds
• Verify touch targets are large enough
• Test dark mode rendering

Part 5: Color in Email Design

Color communicates emotion, guides attention, and reinforces brand identity. Strategic color use improves email performance.

Color Psychology in Email

Color Contrast Requirements

WCAG 2.1 AA standards:

• Regular text: 4.5:1 contrast ratio minimum
• Large text (18px+): 3:1 contrast ratio minimum
• UI components: 3:1 contrast ratio minimum

Use contrast checkers to verify accessibility:

Dark Mode Considerations

Over 80% of users have dark mode enabled. Design for both modes:

Dark mode strategies:

1. Transparent images: Use PNG with transparent backgrounds
2. Color inversion: Test how colors appear inverted
3. Logo versions: Provide light and dark logo variants
4. Border definition: Add subtle borders to prevent blending

Dark mode meta tag:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

CTA Button Colors

CTAs should stand out from surrounding content:

High-converting CTA colors:

• Primary brand color (builds recognition)
• Contrasting accent color (draws attention)
• Orange/red (creates urgency)
• Green (positive action association)

Button design specifications:

┌──────────────────────────────┐
│                              │
│   BUTTON TEXT (ALL CAPS)     │  Background: Brand color
│                              │  Text: White or dark contrast
└──────────────────────────────┘
   Padding: 15px 30px
   Border radius: 4-8px

Part 6: Accessibility in Email Design

Accessible email design ensures everyone can engage with your content, regardless of ability. It’s both ethical and practical, accessible emails perform better for all users.

Accessibility Fundamentals

Core principles (WCAG 2.1):

1. Perceivable - Content can be perceived by all users
2. Operable - Interface is navigable and usable
3. Understandable - Content and operation are clear
4. Robust - Content works across assistive technologies

Screen Reader Compatibility

Screen readers interpret your email for visually impaired users:

Best practices:

• Use semantic HTML (h1, h2, p, ul)
• Add role=“presentation” to layout tables
• Include lang attribute in HTML tag
• Provide meaningful link text (not “click here”)
• Use aria-label for complex elements

Example:

<html lang="en">
  <table role="presentation">
    <tr>
      <td>
        <h1>Summer Sale</h1>
        <p>Shop our biggest discounts of the season.</p>
        <a href="/sale" aria-label="Shop summer sale items">
          Shop the Sale
        </a>
      </td>
    </tr>
  </table>
</html>

Keyboard Navigation

Some users navigate emails without a mouse:

• Ensure all links are focusable
• Maintain logical tab order
• Provide visible focus states
• Avoid keyboard traps

Visual Accessibility

For users with visual impairments:

Cognitive Accessibility

For users with cognitive disabilities:

• Use clear, simple language
• Break content into short sections
• Provide consistent navigation
• Avoid flashing content
• Give users control over auto-play

Accessibility Testing Tools

Recommended tools:

• Litmus Accessibility Checker
• Email on Acid
• WAVE Web Accessibility Evaluation
• Screen reader testing (NVDA, VoiceOver)

Part 7: Email Templates and Examples

Apply these best practices with template frameworks for common email types.

Promotional Email Template

Purpose: Drive immediate sales or conversions

┌─────────────────────────────────┐
│  LOGO          Shop | Account  │
├─────────────────────────────────┤
│                                 │
│      [HERO IMAGE/BANNER]        │
│       Summer Sale: 30% Off      │
│                                 │
├─────────────────────────────────┤
│                                 │
│     HEADLINE (compelling)       │
│     Supporting copy (brief)     │
│                                 │
│     ┌─────────────────────┐     │
│     │    SHOP NOW         │     │
│     └─────────────────────┘     │
│                                 │
├─────────────────────────────────┤
│   Product 1  │  Product 2      │
│   [Image]    │  [Image]        │
│   $49        │  $79            │
│   [Buy]      │  [Buy]          │
├─────────────────────────────────┤
│  Footer: Social | Unsubscribe  │
│  Address | Privacy             │
└─────────────────────────────────┘

Newsletter Template

Purpose: Provide value and maintain engagement

┌─────────────────────────────────┐
│  LOGO           Issue #42      │
├─────────────────────────────────┤
│                                 │
│  FEATURED ARTICLE               │
│  [Large image]                  │
│  Headline and excerpt           │
│  [Read More]                    │
│                                 │
├─────────────────────────────────┤
│  MORE STORIES                   │
│                                 │
│  [Thumb] Story 2 headline       │
│          Brief excerpt...       │
│                                 │
│  [Thumb] Story 3 headline       │
│          Brief excerpt...       │
│                                 │
├─────────────────────────────────┤
│  QUICK LINKS                    │
│  Link 1 | Link 2 | Link 3      │
├─────────────────────────────────┤
│  Footer                         │
└─────────────────────────────────┘

Transactional Email Template

Purpose: Confirm actions and provide essential information

┌─────────────────────────────────┐
│  LOGO                          │
├─────────────────────────────────┤
│                                 │
│  Order Confirmed                │
│  Thank you, [Name]!             │
│                                 │
├─────────────────────────────────┤
│  ORDER DETAILS                  │
│  ─────────────────────────────  │
│  Order #: 12345                 │
│  Date: March 8, 2026            │
│  Total: $149.99                 │
│                                 │
│  ITEMS                          │
│  [Image] Product Name    $99    │
│  [Image] Product Name    $50    │
│                                 │
│  Subtotal:              $149    │
│  Shipping:              FREE    │
│  Total:                 $149    │
│                                 │
│  ┌─────────────────────┐        │
│  │  TRACK ORDER        │        │
│  └─────────────────────┘        │
│                                 │
├─────────────────────────────────┤
│  SHIPPING ADDRESS               │
│  John Smith                     │
│  123 Main Street                │
│  City, State 12345              │
│                                 │
├─────────────────────────────────┤
│  Need help? Contact support     │
│  Footer                         │
└─────────────────────────────────┘

Welcome Email Template

Purpose: Introduce brand and encourage first action

┌─────────────────────────────────┐
│  LOGO                          │
├─────────────────────────────────┤
│                                 │
│      [HERO/LIFESTYLE IMAGE]     │
│                                 │
├─────────────────────────────────┤
│                                 │
│  Welcome to [Brand], [Name]!    │
│                                 │
│  Brief, warm introduction.      │
│  Why they made a great choice.  │
│                                 │
│  YOUR WELCOME OFFER             │
│  ─────────────────────────────  │
│  15% OFF                        │
│  Code: WELCOME15                │
│                                 │
│  ┌─────────────────────┐        │
│  │    SHOP NOW         │        │
│  └─────────────────────┘        │
│                                 │
├─────────────────────────────────┤
│  WHAT MAKES US DIFFERENT        │
│                                 │
│  [Icon] Benefit 1               │
│  [Icon] Benefit 2               │
│  [Icon] Benefit 3               │
│                                 │
├─────────────────────────────────┤
│  Follow us: Social icons        │
│  Footer                         │
└─────────────────────────────────┘

Part 8: Email Design Testing

Even well-designed emails can break in certain clients. Comprehensive testing catches issues before your audience sees them.

Pre-Send Testing Checklist

Content review:

• Spelling and grammar checked
• All links working and tracked
• Personalization tokens work correctly
• Subject line and preheader optimized
• Unsubscribe link present and working

Design review:

• Images display correctly
• Alt text present on all images
• Mobile rendering verified
• Dark mode tested
• Loading time under 3 seconds

Technical review:

• HTML validates
• CSS inline where needed
• File size under 100KB
• Images hosted on reliable CDN

Email Client Testing Matrix

Test in the most popular clients for your audience:

Testing Tools

Recommended testing platforms:

1. Litmus - Comprehensive previews, analytics
2. Email on Acid - Previews, accessibility testing
3. Mailtrap - Staging environment testing
4. Testi@ - Free basic testing

A/B Testing Design Elements

Test design variations to optimize performance:

Email Design with Tajo and Brevo

Implementing these best practices becomes streamlined when you have the right tools. Tajo’s integration with Brevo provides:

Built-in Design Tools

• Drag-and-drop editor with mobile-responsive templates
• Brand kit integration for consistent colors and fonts
• Image library with automatic optimization
• Accessibility checker built into the editor

Template Management

• Pre-built templates based on best practices
• Custom template creation with reusable blocks
• Version control for template updates
• Multi-language support for global campaigns

Testing and Optimization

• Preview across devices before sending
• A/B testing for design elements
• Performance analytics tied to design choices
• Deliverability monitoring for design impact

Multi-Channel Consistency

• Unified design system across email, SMS, and WhatsApp
• Consistent branding automatically applied
• Cross-channel templates for campaign continuity

Frequently Asked Questions

Što je the ideal email width for design?

The optimal email width is 600-640 pixels. This ensures compatibility across all major email clients and prevents horizontal scrolling. For mobile-first designs, some designers use 480px. Avoid exceeding 640px to prevent rendering issues.

How do I make my emails mobile-friendly?

Use a single-column layout, set minimum font sizes at 16px, make buttons at least 44x44 pixels, use fluid images with max-width: 100%, and test on actual mobile devices. Implement responsive CSS with media queries to adjust layouts for smaller screens.

Should I use web fonts in email design?

You can use web fonts, but include fallback system fonts since Gmail and Outlook for Windows don’t support them. Define your font stack with web font first, followed by similar system fonts. Test to ensure your design looks acceptable with fallback fonts.

How do I design emails for dark mode?

Use transparent PNG images where possible, test how your colors appear when inverted, provide light and dark logo versions, and add subtle borders to prevent elements from blending into dark backgrounds. Include the color-scheme meta tag to signal dark mode support.

What image file format should I use for emails?

Use JPEG for photographs and images with gradients, PNG for graphics with transparency or text, and GIF for simple animations. Keep all images under 200KB for optimal loading. Avoid SVG due to limited email client support.

How many CTAs should an email have?

Focus on one primary CTA per email to maximize conversions. You can include secondary CTAs, but ensure your primary action stands out visually through size, color, and placement. Multiple equal CTAs create decision paralysis.

What’s the minimum text contrast ratio for accessibility?

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for regular text and 3:1 for large text (18px or larger). Use online contrast checkers to verify your color combinations meet these standards.

How do I test emails across different clients?

Use email testing platforms like Litmus or Email on Acid that render previews across dozens of email clients. At minimum, test in Gmail (web and mobile), Apple Mail, iOS Mail, and Outlook (Windows). Create a testing matrix based on your audience’s most-used clients.

Should I include a plain-text version of my email?

Yes, always include a plain-text alternative. Some users prefer plain text, and it helps with deliverability. Your email service provider typically generates this automatically, but review it to ensure readability.

How long should marketing emails be?

Match length to purpose: promotional emails should be 50-125 words with strong visuals, newsletters can be 200-500 words with scannable sections, and educational content may be longer but well-structured. Focus on scannability regardless of length, and test to find what works for your audience.

Zaključak

Email design is both an art and a science. The best practices covered in this guide, from layout and typography to mobile optimization and accessibility, provide the foundation for creating emails that engage, convert, and build lasting customer relationships.

Remember these core principles:

1. Design for mobile first - Most emails are opened on phones
2. Keep it simple - Single-column, clear hierarchy, one primary CTA
3. Prioritize accessibility - Good accessibility improves results for everyone
4. Test thoroughly - Preview across clients and devices before sending
5. Iterate based on data - A/B test design elements continuously

Great email design isn’t about following trends, it’s about clear communication that drives action. Apply these principles consistently, and you’ll see measurable improvements in your email marketing performance.

Ready to create beautifully designed emails that convert? Get started with Tajo and access professional templates, built-in testing tools, and seamless multi-channel campaign management.