```
### Hős kép bevált gyakorlatai
A hős képek megadják az egész e-mail vizuális hangnemét:
**Specifikációk:**
- Szélesség: 600px (mobilon kisebbre méretezi)
- Magasság: 200-400px
- Fájlméret: 200KB alatt
- Szöveg overlay: Kerüld a kritikus szöveget a képekben
**Hős kép sablon:**
```
┌─────────────────────────────────┐
│ │
│ HŐS KÉP │
│ (Életstílus/termékkép) │
│ │
│ Overlay szöveg HTML-ben, nem │
│ a képbe ágyazva │
│ │
└─────────────────────────────────┘
```
### Háttérképek
A háttérképek vizuális érdekességet adnak, de korlátozott támogatásuk van:
**Támogatási mátrix:**
| Kliens | Háttérkép támogatás |
| --- | --- |
| Apple Mail | Teljes |
| iOS Mail | Teljes |
| Gmail | Teljes |
| Outlook (Windows) | Nincs |
| Yahoo Mail | Teljes |
**Mindig illeszts be egyszínű tartalékot** az Outlook felhasználóknak.
### Termékkép irányelvek
Az e-kereskedelmi e-mailekhez termékeket bemutató esetén:
- Következetes méretek az összes termékben
- Fehér vagy semleges hátterek
- Több szög ha lehetséges
- Minimum 300px szélesség a termékképekhez
- Közvetlen link a terméklapokra
## 4. rész: Mobil e-mail design
Mivel az e-mailek több mint 60%-át mobileszközön nyitják meg, a mobil-első design elengedhetetlen.
### Mobil design elvek
**A mobil-első megközelítés:**
1. Tervezz a legkisebb képernyőre először
2. Rakj tartalmat függőlegesen egymásra
3. Növeld a koppintható célokat
4. Egyszerűsítsd a navigációt
5. Tesztelj valódi eszközökön
### Reszponzív design technikák
**Média lekérdezések mobilra:**
```css
@media screen and (max-width: 600px) {
.content {
width: 100% !important;
padding: 10px !important;
}
.hide-mobile {
display: none !important;
}
}
```
### Érintőbarát design
**Minimális koppintható cél méretek:**
| Elem | Minimális méret |
| --- | --- |
| Gombok | 44 x 44 pixel |
| Linkek | 44px magasság |
| Link távolság | 10px között |
**CTA gomb sablon:**
```
┌──────────────────────────────┐
│ │
│ VÁSÁROLJ MOST │
│ │
└──────────────────────────────┘
44px minimális magasság
```
### Mobil tipográfia
**Mobil betűtípus beállítások:**
- Törzsszöveg: 16px minimum (megakadályozza a közelítést iOS-en)
- Főcímek: 24-28px
- Sortávolság: 10%-kal növeld mobilon
- Bekezdéstávolság: Növeld a hüvelykujjas görgetéshez
### Mobil kép megfontolások
- Folyékony szélességeket használj (max-width: 100%)
- Csökkentsd a képek számát mobilon
- Fontold meg a dekoratív képek elrejtését
- Ha lehetséges, töltsd be a kisebb képverziót
### Mobil tesztelési ellenőrző lista
- Tesztelés iOS Mailen
- Tesztelés Gmail alkalmazáson (iOS és Android)
- Tesztelés Outlook alkalmazáson
- Ellenőrizd, hogy a képek celluláris kapcsolaton betöltődnek
- Ellenőrizd a betöltési időt 3 másodperc alatt
- Ellenőrizd, hogy a koppintható célok elég nagyok
- Teszteld a sötét mód megjelenítését
## 5. rész: Szín az e-mail designban
A szín érzelmet közvetít, irányítja a figyelmet és megerősíti a márkaidentitást. A stratégiai színhasználat javítja az e-mail teljesítményt.
### Színpszichológia az e-mailben
| Szín | Asszociáció | Legjobb erre |
| --- | --- | --- |
| Kék | Bizalom, nyugalom | B2B, pénzügy, tech |
| Zöld | Növekedés, egészség | Öko, wellness, siker |
| Piros | Sürgősség, energia | Akciók, CTA-k, figyelmeztetések |
| Narancssárga | Barátságos, cselekvés | CTA-k, kiemelések |
| Lila | Prémium, kreatív | Luxus, szépség |
| Sárga | Optimizmus, figyelem | Figyelmeztetések, kiemelések |
### Szín kontraszt követelmények
**WCAG 2.1 AA szabványok:**
- Normál szöveg: minimum 4,5:1 kontrasztarány
- Nagy szöveg (18px+): minimum 3:1 kontrasztarány
- UI komponensek: minimum 3:1 kontrasztarány
**Használj kontrasztellenőrzőket** az akadálymentesség ellenőrzéséhez:
| Kombináció | Kontrasztarány | Átmegy/Megbukik |
| --- | --- | --- |
| Fekete fehéren | 21:1 | Átmegy |
| Fehér kéken (#0066CC) | 4,8:1 | Átmegy |
| Szürke (#777) fehéren | 4,48:1 | Határeset |
| Világosszürke (#AAA) fehéren | 2,32:1 | Megbukik |
### Sötét mód megfontolások
A felhasználók több mint 80%-ának engedélyezve van a sötét mód. Tervezz mindkét módra:
**Sötét mód stratégiák:**
1. **Átlátszó képek:** Használj PNG-t átlátszó hátterekkel
2. **Szín invertálás:** Teszteld, hogyan jelennek meg a színek invertáltan
3. **Logó verziók:** Biztosíts világos és sötét logóvariánsokat
4. **Határ definíció:** Adj hozzá finom szegélyeket az összeolvadás megakadályozásához
**Sötét mód meta tag:**
```html
```
### CTA gomb színek
A CTA-knak ki kell tűnniük a környező tartalomból:
**Magas konverziójú CTA színek:**
- Elsődleges márka szín (felismerhetőséget épít)
- Kontrasztos kiemelő szín (figyelmet vonz)
- Narancssárga/piros (sürgősséget teremt)
- Zöld (pozitív cselekvés asszociáció)
**Gomb design specifikációk:**
```
┌──────────────────────────────┐
│ │
│ GOMB SZÖVEG (NAGYBETŰVEL) │ Háttér: Márka szín
│ │ Szöveg: Fehér vagy sötét kontraszt
└──────────────────────────────┘
Párnázás: 15px 30px
Szegély sugár: 4-8px
```
## 6. rész: Akadálymentesség az e-mail designban
Az akadálymentes e-mail design biztosítja, hogy mindenki foglalkozhasson a tartalommal, képességétől függetlenül. Etikai és praktikus egyszerre: az akadálymentes e-mailek minden felhasználónál jobban teljesítenek.
### Akadálymentesség alapjai
**Alapelvek (WCAG 2.1):**
1. **Észlelhető** - A tartalom minden felhasználó számára észlelhető
2. **Kezelhető** - A felület navigálható és használható
3. **Érthető** - A tartalom és működés egyértelmű
4. **Robusztus** - A tartalom segédtechnológiákon keresztül működik
### Képernyőolvasó kompatibilitás
A képernyőolvasók értelmezik az e-mailedet a látássérült felhasználók számára:
**Bevált gyakorlatok:**
- Használj szemantikus HTML-t (h1, h2, p, ul)
- Add hozzá a role=“presentation” attribútumot az elrendezési táblákhoz
- Illeszd be a lang attribútumot a HTML tagbe
- Biztosíts értelmes link szöveget (nem “kattints ide”)
- Használj aria-label attribútumot az összetett elemekhez
**Példa:**
```html
Nyári akcióVásárolj a szezon legnagyobb kedvezményeivel. Vásárolj az akcióban |