```
### Osvedčené postupy hero obrázka
Hero obrázky nastavujú vizuálny tón celého vášho e-mailu:
**Špecifikácie:**
- Šírka: 600px (zmenšuje sa pre mobil)
- Výška: 200 – 400px
- Veľkosť súboru: Pod 200KB
- Text v overlay: Vyhnite sa kritickému textu v obrázkoch
**Šablóna hero obrázka:**
```
HERO OBRAZ
(Lifestyle/produktová fotka)
Overlay text v HTML, nie
vložený v obrázku
```
### Pozadia obrázkov
Pozadia obrázkov pridávajú vizuálny záujem, ale majú obmedzenú podporu:
**Matica podpory:**
| Klient | Podpora pozadia obrázka |
| --- | --- |
| Apple Mail | Plná |
| iOS Mail | Plná |
| Gmail | Plná |
| Outlook (Windows) | Žiadna |
| Yahoo Mail | Plná |
**Vždy zahrňte fallback v pevnej farbe** pre používateľov Outlooku.
### Pokyny pre produktové obrázky
Pre e-commerce e-maily s produktmi:
- Konzistentné rozmery naprieč všetkými produktmi
- Biele alebo neutrálne pozadia
- Viacero uhlov, kde je to možné
- Minimálne 300px šírka pre produktové obrázky
- Priamy link na stránky produktov
## Časť 4: Mobilný dizajn e-mailov
Mobilné správanie sa líši podľa zoznamu a odvetvia, ale každý moderný e-mailový program potrebuje mobilne bezpečný dizajn. Skontrolujte si vlastný reporting e-mailových klientov a potom urobte z mobilného QA povinný krok pred odoslaním.
### Princípy mobilného dizajnu
**Prístup mobile-first:**
1. Najprv dizajnujte pre najmenšiu obrazovku
2. Skladajte obsah vertikálne
3. Zväčšite plochy ťuknutia
4. Zjednodušte navigáciu
5. Otestujte na skutočných zariadeniach
### Techniky responzívneho dizajnu
**Media queries pre mobil:**
```css
@media screen and (max-width: 600px) {
.content {
width: 100% !important;
padding: 10px !important;
}
.hide-mobile {
display: none !important;
}
}
```
### Dizajn priateľský pre dotyk
**Minimálne veľkosti plochy ťuknutia:**
| Prvok | Minimálna veľkosť |
| --- | --- |
| Tlačidlá | 44 × 44 pixelov |
| Linky | 44px výška |
| Rozostupy linkov | 10px medzi |
**Šablóna CTA tlačidla:**
```
NAKÚP TERAZ
Minimálna výška 44px
```
### Mobilná typografia
**Mobilné úpravy fontu:**
- Hlavný text: 16px minimum (zabraňuje zoomu na iOS)
- Nadpisy: 24 – 28px
- Riadkovanie: Zväčšite o 10% pre mobil
- Rozostupy odsekov: Zväčšite pre scrollovanie palcom
### Mobilné úvahy o obrázkoch
- Používajte plynulé šírky (max-width: 100%)
- Znížte počet obrázkov na mobile
- Zvážte skrytie dekoratívnych obrázkov
- Načítavajte menšie verzie obrázkov, kde je to možné
### Checklist mobilného testovania
- Testovať v iOS Mail
- Testovať v Gmail apke (iOS a Android)
- Testovať v Outlook apke
- Overiť načítavanie obrázkov na mobilných dátach
- Skontrolovať čas načítania pod 3 sekundy
- Overiť, že plochy dotyku sú dosť veľké
- Otestovať zobrazenie v tmavom režime
## Časť 5: Farba v dizajne e-mailov
Farba komunikuje emóciu, vedie pozornosť a posilňuje identitu značky. Strategické používanie farby zlepšuje výkon e-mailu.
### Psychológia farieb v e-maile
| Farba | Asociácia | Najlepšie použiť pre |
| --- | --- | --- |
| Modrá | Dôvera, pokoj | B2B, financie, tech |
| Zelená | Rast, zdravie | Eko, wellness, úspech |
| Červená | Naliehavosť, energia | Výpredaje, CTA, upozornenia |
| Oranžová | Priateľská, akcia | CTA, zvýraznenia |
| Fialová | Prémium, kreatívna | Luxus, krása |
| Žltá | Optimizmus, pozornosť | Varovania, zvýraznenia |
### Požiadavky na kontrast farieb
**Štandardy WCAG 2.1 AA:**
- Bežný text: minimálne 4,5:1 pomer kontrastu
- Veľký text (18px+): minimálne 3:1 pomer kontrastu
- UI komponenty: minimálne 3:1 pomer kontrastu
**Používajte kontrolóry kontrastu** na overenie prístupnosti:
| Kombinácia | Pomer kontrastu | Prejde/Zlyhá |
| --- | --- | --- |
| Čierna na bielom | 21:1 | Prejde |
| Biela na modrej (#0066CC) | 4,8:1 | Prejde |
| Šedá (#777) na bielom | 4,48:1 | Hraničné |
| Svetlošedá (#AAA) na bielom | 2,32:1 | Zlyhá |
### Úvahy o tmavom režime
Správanie v tmavom režime sa líši podľa operačného systému, aplikácie a e-mailového klienta. Dizajnujte pre oba režimy:
**Stratégie pre tmavý režim:**
1. **Priehľadné obrázky:** Použite PNG s priehľadnými pozadiami
2. **Inverzia farieb:** Otestujte, ako sa farby javia invertované
3. **Verzie loga:** Poskytnite svetlé a tmavé varianty loga
4. **Definícia okrajov:** Pridajte jemné okraje, aby sa zabránilo splynutiu
**Meta tag pre tmavý režim:**
```html
```
### Farby CTA tlačidiel
CTA by mali vyniknúť oproti okolitému obsahu:
**Návod pre farby CTA:**
- Použite hlavnú farbu značky, keď stále spĺňa požiadavky na kontrast.
- Použite kontrastnú akcentnú farbu, keď má paleta značky nízky kontrast tlačidiel.
- Otestujte naliehavé propagačné farby oproti správaniu odhlasovania a sťažností.
- Nespoliehajte sa iba na farbu; urobte text CTA jasným.
**Špecifikácie dizajnu tlačidla:**
```
TEXT TLAČIDLA (VEĽKÉ PÍSMENÁ) Pozadie: Farba značky
Text: Biely alebo tmavý kontrast
Padding: 15px 30px
Border radius: 4 – 8px
```
## Časť 6: Prístupnosť v dizajne e-mailov
Prístupný dizajn e-mailov zabezpečuje, že sa každý môže zapojiť do vášho obsahu, bez ohľadu na schopnosti. Je to etické aj praktické – prístupné e-maily fungujú lepšie pre všetkých používateľov.
### Základy prístupnosti
**Hlavné princípy (WCAG 2.1):**
1. **Vnímateľnosť** – Obsah môžu vnímať všetci používatelia
2. **Ovládateľnosť** – Rozhranie je navigovateľné a použiteľné
3. **Zrozumiteľnosť** – Obsah a ovládanie sú jasné
4. **Robustnosť** – Obsah funguje naprieč asistovanými technológiami
### Kompatibilita s čítačkami obrazovky
Čítačky obrazovky interpretujú váš e-mail pre zrakovo postihnutých používateľov:
**Osvedčené postupy:**
- Používajte sémantické HTML (h1, h2, p, ul)
- Pridajte role=“presentation” k layoutovým tabuľkám
- Zahrňte atribút lang v HTML tagu
- Poskytnite zmysluplný text linkov (nie „kliknite sem”)
- Použite aria-label pre zložité prvky
**Príklad:**
```html
Letný výpredajNakupujte naše najväčšie zľavy sezóny. Nakúp výpredaj |