Priručnik za dizajn e-maila: raspored, mobilni prikaz, pristupačnost i provjera predložaka (2026)

Dizajn e-maila izravno utječe na to hoće li pretplatnici otvoriti poruku, pročitati je i nešto poduzeti. Loš dizajn vodi do obrisanih e-mailova, odjava i izgubljenog prihoda. Dobar dizajn donosi angažman, konverzije i vjernost brendu.

Ovo ažuriranje uklanja nepotkrijepljene tvrdnje o referentnim vrijednostima i pretvara članak u praktičan priručnik za dizajn e-maila za 2026. namijenjen timovima za marketinške, lifecycle i transakcijske e-mailove.

Zašto je dizajn e-maila važan

Prije dobrih praksi, pogledajmo zašto dizajn e-maila zaslužuje vašu pažnju.

Na što promjene dizajna stvarno utječu

Odluke o dizajnu koristite za smanjenje trenja, a ne za lov na nepotkrijepljena poboljšanja referentnih vrijednosti.

Cijena lošeg dizajna

Loš dizajn stvara mjerljiv operativni i marketinški rizik:

• Razbijeni rasporedi smanjuju povjerenje u brend.
• Poruke sastavljene samo od slika postaju nečitljive kad su slike blokirane.
• Nizak kontrast isključuje čitatelje i ne prolazi provjere pristupačnosti.
• Mali gumbi otežavaju dodir na mobitelu.
• Nedostatak alternativnog teksta slabi iskustvo bez slika i s čitačima zaslona.
• Velike slike usporavaju učitavanje i mogu stvoriti dojam da je poruka pokvarena.
• Slaba hijerarhija skriva glavnu akciju.
• Nedostaju li poveznice za odjavu, adresa ili postavke, nastaje rizik neusklađenosti.

1. dio: Dobre prakse za raspored e-maila

Temelj učinkovitog dizajna e-maila je raspored. On određuje kako teku informacije i vodi čitatelja prema željenoj akciji.

Raspored u jednom ili više stupaca

Rasporedi u jednom stupcu zlatni su standard modernog dizajna e-maila:

           ZAGLAVLJE

        GLAVNA SLIKA

        GLAVNI TEKST

    GUMB GLAVNOG POZIVA

      DODATNI SADRŽAJ

           PODNOŽJE

Prednosti rasporeda u jednom stupcu:

• Dosljedan prikaz u svim e-mail klijentima
• Prirodan tijek čitanja odozgo prema dolje
• Automatska prilagodba mobitelima
• Brže učitavanje
• Lakše održavanje dosljednosti brenda

Kada koristiti raspored u više stupaca:

• Prikaz više proizvoda
• Sadržaj u stilu newslettera s različitim temama
• Usporedbe značajki
• B2B publika koja većinom čita na računalu

Struktura obrnute piramide

Obrnuta piramida prirodno vodi čitatelja prema pozivu na akciju:

Takva struktura prirodno usmjerava pažnju na poziv na akciju.

Optimalna širina e-maila

Preporučena širina: 600-640 piksela

E-mailovi širi od 640 piksela mogu u nekim klijentima izazvati vodoravno pomicanje, što stvara loše korisničko iskustvo.

Bijeli prostor i prostor za disanje

Bijeli prostor nije prazan prostor. To je element dizajna koji:

• Odvaja odjeljke.
• Olakšava pregledavanje teksta.
• Daje gumbima poziva na akciju prostor da se istaknu.
• Smanjuje vizualni zamor.
• Prirodno vodi pogled.

Smjernice za razmake:

• Najmanje 20 px unutarnjeg razmaka uz rubove sadržaja
• 30-40 px između glavnih odjeljaka
• 15-20 px između odlomaka
• 10 px između stavki popisa

Dobre prakse za zaglavlje

Zaglavlje postavlja ton i odmah gradi prepoznatljivost brenda.

Ključni elementi zaglavlja:

1. Logotip - najviše 200 px širine, povezan s web-stranicom
2. Navigacija (neobavezno) - najviše 2-4 ključne poveznice
3. Tekst pretpregleda - nastavlja naslov, 40-100 znakova

Predložak zaglavlja:

     [LOGO]     |  Trgovina | Račun

   Pretpregled: nastavite
   naslov ovdje...

Osnove dizajna podnožja

Podnožje pokriva zakonske zahtjeve i nudi dodatnu navigaciju:

Obvezni elementi podnožja:

• Fizička poštanska adresa (zahtjev CAN-SPAM)
• Poveznica za odjavu (jasno vidljiva)
• Poveznica na postavke e-maila
• Poveznica na pravila privatnosti

Neobavezni elementi podnožja:

• Ikone društvenih mreža
• Poveznice za preuzimanje aplikacije
• Kontakt korisničke podrške
• Sporedna navigacija
• Podaci o registraciji tvrtke

2. dio: Tipografija u dizajnu e-maila

Tipografija određuje čitljivost i vizualni ton brenda. Tipografija u e-mailu traži posebnu pažnju zbog razlika u prikazu među klijentima.

Nizovi fontova sigurni za e-mail

Ne prikazuju se svi fontovi jednako u svim klijentima. Koristite nizove fontova sa zamjenama:

Sans-serif niz (moderan, čist):

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

Serif niz (tradicionalan, autoritativan):

font-family: Georgia, 'Times New Roman', Times, serif;

Web font sa zamjenama:

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

Web fontovi u e-mailu

Web fontovi jačaju dosljednost brenda, ali traže plan zamjene.

Podrška za web fontove u e-mail klijentima:

Pristup provedbi:

1. Web font definirajte kao primarni
2. Dodajte sličan sistemski font kao zamjenu
3. Testirajte prikaz u glavnim klijentima
4. Prihvatite postupnu degradaciju

Smjernice za veličinu fonta

Preporučene veličine fonta:

Nikad ne idite ispod 12 px ni za jedan tekst, jer postaje nečitljiv na mobitelu i stvara probleme s pristupačnošću.

Visina retka i razmaci

Pravilan prored znatno poboljšava čitljivost:

Smjernice za visinu retka:

• Naslovi: 1,1-1,3x veličine fonta
• Glavni tekst: 1,4-1,6x veličine fonta
• Sitni tekst: 1,5-1,7x veličine fonta

Primjer:

Glavni tekst 16 px  visina retka 1,5 = prored 24 px

Hijerarhija teksta

Stvorite vizualnu hijerarhiju koja vodi čitatelja kroz sadržaj:

NASLOV (28 px, podebljano)
Najvažnija poruka

Podnaslov (20 px, polupodebljano)
Prateći kontekst

Glavni tekst (16 px, obično)
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Ovdje idu detaljne informacije.

Sporedni tekst (14 px, obično, sivo)
Dodatni detalji, vremenske oznake i slično.

Dobre prakse poravnanja

• Naslovi: centrirano ili lijevo
• Glavni tekst: lijevo (nikad obostrano)
• Pozivi na akciju: centrirano
• Popisi: lijevo

Izbjegavajte obostrano poravnanje u e-mailovima jer neujednačeni razmaci među riječima otežavaju čitanje.

3. dio: Slike u dizajnu e-maila

Slike privlače pažnju i brzo prenose informacije. No stvaraju i moguće probleme s prikazom kojima treba pažljivo upravljati.

Popis za optimizaciju slika

Prije dodavanja bilo koje slike:

• Komprimirajte ispod 1 MB (idealno ispod 200 KB)
• Postavite eksplicitne atribute širine i visine
• Dodajte opisni alternativni tekst
• Koristite odgovarajući format datoteke
• Testirajte s isključenim slikama

Formati slikovnih datoteka

Dobre prakse za alternativni tekst

Alternativni tekst prikazuje se kad se slike ne učitaju, a čitaju ga i čitači zaslona.

Primjeri učinkovitog alternativnog teksta:

Smjernice za alternativni tekst:

• Do 125 znakova
• Opišite funkciju, ne izgled
• Uključite ključni tekst sa slike
• Ostavite prazno za čisto ukrasne slike

Responzivne slike

Pobrinite se da se slike pravilno skaliraju na svim uređajima:

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

Dobre prakse za glavnu sliku

Glavna slika postavlja vizualni ton cijelog e-maila:

Specifikacije:

• Širina: 600 px (smanjuje se na mobitelu)
• Visina: 200-400 px
• Veličina datoteke: ispod 200 KB
• Tekst preko slike: ne stavljajte ključan tekst u sliku

Predložak glavne slike:

        GLAVNA SLIKA
  (fotografija stila života/proizvoda)

   Tekst preko slike u HTML-u,
   ne ugrađen u sliku

Pozadinske slike

Pozadinske slike dodaju vizualni interes, ali imaju ograničenu podršku:

Matrica podrške:

Uvijek dodajte zamjensku jednobojnu pozadinu za korisnike Outlooka.

Smjernice za slike proizvoda

Za e-mailove e-trgovine s proizvodima:

• Iste dimenzije za sve proizvode
• Bijela ili neutralna pozadina
• Više kutova kad je moguće
• Najmanje 300 px širine za slike proizvoda
• Izravne poveznice na stranice proizvoda

4. dio: Dizajn e-maila za mobitele

Ponašanje na mobitelu razlikuje se po listi i djelatnosti, ali svaki moderni e-mail program treba dizajn siguran za mobitele. Provjerite vlastita izvješća o e-mail klijentima, a zatim provjeru na mobitelu učinite obveznim korakom prije slanja.

Načela mobilnog dizajna

Pristup koji kreće od mobitela:

1. Najprije dizajnirajte za najmanji zaslon
2. Sadržaj slažite okomito
3. Povećajte područja za dodir
4. Pojednostavite navigaciju
5. Testirajte na stvarnim uređajima

Tehnike responzivnog dizajna

Media upiti za mobitele:

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

Dizajn prilagođen dodiru

Najmanje veličine područja za dodir:

Predložak gumba poziva na akciju:

       KUPITE SADA

       najmanje 44 px visine

Tipografija na mobitelu

Prilagodbe fonta za mobitel:

• Glavni tekst: najmanje 16 px (sprječava zumiranje na iOS-u)
• Naslovi: 24-28 px
• Visina retka: povećajte za 10% na mobitelu
• Razmak između odlomaka: povećajte za pomicanje palcem

Slike na mobitelu

• Koristite fluidne širine (max-width: 100%)
• Smanjite broj slika na mobitelu
• Razmislite o skrivanju ukrasnih slika
• Kad je moguće, učitavajte manje verzije slika

Popis za testiranje na mobitelu

• Testirajte u iOS Mailu
• Testirajte u aplikaciji Gmail (iOS i Android)
• Testirajte u aplikaciji Outlook
• Provjerite učitavaju li se slike preko mobilne mreže
• Provjerite je li učitavanje kraće od 3 sekunde
• Provjerite jesu li područja za dodir dovoljno velika
• Testirajte prikaz u tamnom načinu

5. dio: Boje u dizajnu e-maila

Boja prenosi emociju, usmjerava pažnju i jača identitet brenda. Promišljena upotreba boja poboljšava učinak e-maila.

Psihologija boja u e-mailu

Zahtjevi za kontrast boja

Koristite alate za provjeru kontrasta kako biste potvrdili pristupačnost:

Tamni način

Ponašanje tamnog načina razlikuje se po operacijskom sustavu, aplikaciji i e-mail klijentu. Dizajnirajte za oba načina:

Strategije za tamni način:

1. Prozirne slike: koristite PNG s prozirnom pozadinom
2. Inverzija boja: testirajte kako izgledaju invertirane boje
3. Verzije logotipa: pripremite svijetlu i tamnu varijantu logotipa
4. Definirani obrubi: dodajte suptilne obrube kako se elementi ne bi stopili

Meta oznaka za tamni način:

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

Boje gumba poziva na akciju

Pozivi na akciju moraju se isticati od okolnog sadržaja:

Smjernice za boje poziva na akciju:

• Koristite primarnu boju brenda ako i dalje zadovoljava zahtjeve kontrasta.
• Koristite kontrastnu naglasnu boju ako paleta brenda ima slab kontrast gumba.
• Hitne promotivne boje testirajte i prema stopi odjava i pritužbi.
• Ne oslanjajte se samo na boju; tekst poziva neka bude jasan.

Specifikacije dizajna gumba:

   TEKST GUMBA (VELIKA SLOVA)   Pozadina: boja brenda
                                Tekst: bijeli ili tamni kontrast

   Unutarnji razmak: 15px 30px
   Zaobljenje rubova: 4-8px

6. dio: Pristupačnost u dizajnu e-maila

Pristupačan dizajn e-maila osigurava da svatko može koristiti vaš sadržaj, bez obzira na sposobnosti. To je i etično i praktično, jer pristupačni e-mailovi bolje rade za sve korisnike.

Osnove pristupačnosti

Temeljna načela (WCAG 2.1):

1. Opazivo - sadržaj mogu opaziti svi korisnici
2. Upravljivo - sučelje je moguće koristiti i kroz njega se kretati
3. Razumljivo - sadržaj i rad su jasni
4. Robusno - sadržaj radi s pomoćnim tehnologijama

Kompatibilnost s čitačima zaslona

Čitači zaslona tumače vaš e-mail korisnicima oštećena vida:

Dobre prakse:

• Koristite semantički HTML (h1, h2, p, ul)
• Tablicama za raspored dodajte role=“presentation”
• U HTML oznaku uključite atribut lang
• Pišite smislen tekst poveznica (ne “kliknite ovdje”)
• Za složene elemente koristite aria-label

Primjer:

<html lang="hr">
  <table role="presentation">
    <tr>
      <td>
        <h1>Ljetna rasprodaja</h1>
        <p>Iskoristite naše najveće popuste ove sezone.</p>
        <a href="/sale" aria-label="Kupite proizvode s ljetne rasprodaje">
          Na rasprodaju
        </a>
      </td>
    </tr>
  </table>
</html>

Navigacija tipkovnicom

Neki korisnici kreću se kroz e-mailove bez miša:

• Osigurajte da se sve poveznice mogu fokusirati
• Održavajte logičan redoslijed tabulatora
• Neka stanje fokusa bude vidljivo
• Izbjegavajte zamke za tipkovnicu

Vizualna pristupačnost

Za korisnike s oštećenjem vida:

Kognitivna pristupačnost

Za korisnike s kognitivnim teškoćama:

• Koristite jasan, jednostavan jezik
• Sadržaj podijelite u kratke odjeljke
• Navigacija neka bude dosljedna
• Izbjegavajte bljeskajući sadržaj
• Korisnicima dajte kontrolu nad automatskom reprodukcijom

Alati za testiranje pristupačnosti

Preporučeni alati:

• Litmus Accessibility Checker
• Email on Acid
• WAVE Web Accessibility Evaluation
• Testiranje čitačem zaslona (NVDA, VoiceOver)

7. dio: Predlošci i primjeri e-mailova

Primijenite ove dobre prakse kroz okvire predložaka za uobičajene vrste e-mailova.

Predložak promotivnog e-maila

Svrha: potaknuti trenutačnu prodaju ili konverzije

  LOGO          Trgovina | Račun

      [GLAVNA SLIKA/BANNER]
     Ljetna rasprodaja: 30% popusta

     NASLOV (privlačan)
     Prateći tekst (kratak)

         KUPITE SADA

   Proizvod 1   Proizvod 2
   [Slika]      [Slika]
   49 $         79 $
   [Kupi]       [Kupi]

  Podnožje: Društvene mreže | Odjava
  Adresa | Privatnost

Predložak newslettera

Svrha: pružiti vrijednost i održati angažman

  LOGO           Broj 42

  ISTAKNUTI ČLANAK
  [Velika slika]
  Naslov i izvadak
  [Pročitajte više]

  JOŠ PRIČA

  [Sličica] Naslov priče 2
            Kratak izvadak...

  [Sličica] Naslov priče 3
            Kratak izvadak...

  BRZE POVEZNICE
  Poveznica 1 | Poveznica 2 | Poveznica 3

  Podnožje

Predložak transakcijskog e-maila

Svrha: potvrditi radnje i pružiti ključne informacije

  LOGO

  Narudžba potvrđena
  Hvala, [Ime]!

  DETALJI NARUDŽBE

  Narudžba br.: 12345
  Datum: 8. ožujka 2026.
  Ukupno: 149,99 $

  STAVKE
  [Slika] Naziv proizvoda    99 $
  [Slika] Naziv proizvoda    50 $

  Međuzbroj:             149 $
  Dostava:               BESPLATNA
  Ukupno:                149 $

    PRATITE NARUDŽBU

  ADRESA DOSTAVE
  Ivan Horvat
  Glavna ulica 123
  Grad, Županija 12345

  Trebate pomoć? Kontaktirajte podršku
  Podnožje

Predložak e-maila dobrodošlice

Svrha: predstaviti brend i potaknuti prvu akciju

  LOGO

      [GLAVNA SLIKA/STIL ŽIVOTA]

  Dobro došli u [Brend], [Ime]!

  Kratko, toplo predstavljanje.
  Zašto je to bio dobar izbor.

  VAŠA PONUDA DOBRODOŠLICE

  15% POPUSTA
  Kod: WELCOME15

      KUPITE SADA

  PO ČEMU SMO DRUGAČIJI

  [Ikona] Prednost 1
  [Ikona] Prednost 2
  [Ikona] Prednost 3

  Pratite nas: ikone društvenih mreža
  Podnožje

8. dio: Testiranje dizajna e-maila

I dobro dizajnirani e-mailovi mogu se u nekim klijentima razbiti. Temeljito testiranje hvata probleme prije nego što ih vidi publika.

Popis provjera prije slanja

Pregled sadržaja:

• Provjereni pravopis i gramatika
• Sve poveznice rade i prate se
• Oznake personalizacije rade ispravno
• Naslov i pretpregled su optimizirani
• Poveznica za odjavu postoji i radi

Pregled dizajna:

• Slike se ispravno prikazuju
• Sve slike imaju alternativni tekst
• Provjeren prikaz na mobitelu
• Testiran tamni način
• Učitavanje kraće od 3 sekunde

Tehnički pregled:

• HTML je valjan
• CSS je ugrađen gdje je potrebno
• Veličina datoteke ispod 100 KB
• Slike su na pouzdanom CDN-u

Matrica testiranja e-mail klijenata

Testirajte u klijentima koje vaša publika najviše koristi:

Alati za testiranje i dizajn

Alate birajte prema tijeku rada:

Prije odabira alata provjerite aktualne cijene i ograničenja paketa. Neki proizvodi su usmjereni na izradu, neki na provjeru, a neki na oboje.

A/B testiranje elemenata dizajna

Testirajte varijacije dizajna kako biste optimizirali učinak:

Sljedeći koraci

Dizajn e-maila je i kreativna disciplina i proizvodni sustav. Raspored, tipografija, slike, pristupačnost, prikaz i proces provjere utječu na to mogu li pretplatnici razumjeti poruku i djelovati.

Zapamtite ova temeljna načela:

1. Dizajnirajte najprije za mobitel - svaka važna kampanja treba provjeru na mobitelu
2. Neka bude jednostavno - jedan stupac, jasna hijerarhija, jedan glavni poziv na akciju
3. Pristupačnost na prvom mjestu - dobra pristupačnost poboljšava rezultate za sve
4. Temeljito testirajte - pregledajte u klijentima i na uređajima prije slanja
5. Ponavljajte na temelju podataka - stalno A/B testirajte elemente dizajna

Odličan dizajn e-maila ne znači praćenje svakog trenda. Riječ je o jasnoj komunikaciji koja preživi stvarne uvjete u pristigloj pošti.

Gdje se uklapa Tajo

Tajo je alat za izradu integracija. Izgradite integracije. Postavite agente na njih. Neka oni vode angažman. Tajo je u ranom pristupu. Zatražite rani pristup