```
### 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:**
| Klijent | Podrška za pozadinske slike |
| --- | --- |
| Apple Mail | Potpuna |
| iOS Mail | Potpuna |
| Gmail | Potpuna |
| Outlook (Windows) | Nema |
| Yahoo Mail | Potpuna |
**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:**
```css
@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:**
| Element | Najmanja veličina |
| --- | --- |
| Gumbi | 44 x 44 piksela |
| Poveznice | 44 px visine |
| Razmak između poveznica | 10 px |
**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
| Boja | Asocijacija | Najbolje za |
| --- | --- | --- |
| Plava | Povjerenje, smirenost | B2B, financije, tehnologija |
| Zelena | Rast, zdravlje | Ekologija, wellness, uspjeh |
| Crvena | Hitnost, energija | Rasprodaje, pozivi na akciju, upozorenja |
| Narančasta | Prijateljski, akcija | Pozivi na akciju, isticanje |
| Ljubičasta | Premium, kreativnost | Luksuz, ljepota |
| Žuta | Optimizam, pažnja | Upozorenja, isticanje |
### Zahtjevi za kontrast boja
*Najmanji kontrast prema WCAG 2.1 AA*
**Koristite alate za provjeru kontrasta** kako biste potvrdili pristupačnost:
| Kombinacija | Omjer kontrasta | Prolazi/ne prolazi |
| --- | --- | --- |
| Crno na bijelom | 21:1 | Prolazi |
| Bijelo na plavom (#0066CC) | 4,8:1 | Prolazi |
| Sivo (#777) na bijelom | 4,48:1 | Granično |
| Svijetlosivo (#AAA) na bijelom | 2,32:1 | Ne prolazi |
### 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:**
```html
```
### 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
Ljetna rasprodajaIskoristite naše najveće popuste ove sezone. Na rasprodaju |