() translation by (you can also view the original English article)
Egy folyamat megértésének legjobb módja, hogy te magad mész végig rajta, az elejétől a végéig. Ma pont ezt fogjuk megtenni az email dizájnnal, mivel egy HTML email sablont készítünk, az alapoktól kezdve.
Vágjunk bele
Kezdésként érdemes megemlíteni, hogy honnan szereztem a hozzávaló erőforrásokat.
- Az imádnivaló 2D ikonokat Pierre Borodintől, a Dribbbleről
- A használt betűtípusok az Oil Can, Source Sans Pro és a Mission Script
- A közösségi média ikonok a Metrize Iconstól vannak
Ahogy azt már az előző bemutatóban átbeszéltük, a HTML email dokumentumodat egy XHMTL doctype-pal kell elkezdened:
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
5 |
<title>Demystifying Email Design</title> |
6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
7 |
</head>
|
8 |
</html>
|
Ha ezt elrendeztük, nekiállhatunk a szerkezet többi részének felépítéséhez.
A Body és a fő táblázat létrehozása
Először is egy mindent átfogó szerkezetet adunk az emailünknek, a <body> taggel kezdve. A body tag margóját és térközét nullára állítjuk, hogy elkerüljük a nem várt üres részeket.
Hozzáadunk egy táblázatot is 100% szélességgel. Egy egy valódi body tagként működik az emailünk számára, mivel a body tag stilizálása nem teljes mértékben támogatott. Ha szeretnél egy háttérszínt hozzárendelni az emailed 'body' részéhez, akkor helyette ehhez a nagy táblázathoz kell beállítanod.
Állítsd be a cellaközt és cellatávot nullára, hogy elkerüld a váratlan üres részeket a táblázatban.
Megjegyzés: Az összes táblázatunkat border="1"-en hagyjuk, így látni fogjuk menet közben az elrendezésünk vázát. A végén majd egy egyszerű Keresés és Cserével eltávolítjuk őket.
1 |
<body style="margin: 0; padding: 0;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Hello! |
6 |
</td>
|
7 |
</tr>
|
8 |
</table>
|
9 |
</body>
|
Ha egy attribútum létezik HTML-ben, használjuk azt CSS helyett
Most helyezz el egy középre igazított, 600 pixel széles táblázatot a container táblázaton belül. A 600 pixel egy megbízható maximális szélesség az emailek kényelmes megjelenítéséhez a legtöbb asztali és webmail kliensen, a legtöbb képernyőfelbontáson.
Állítsd be ezt a szélességet HTML használatával CSS helyett, a width attribútummal. A HTML email fejlesztés aranyszabálya: ha egy attribútum létezik HTML-ben, akkor inkább azt használjuk CSS helyett.
A kis 'Hello!' üdvözletünket le fogjuk cserélni erre a táblára:
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Hello! |
5 |
</td>
|
6 |
</tr>
|
7 |
</table>
|
Hozzáadtunk egy inline stílus tulajdonságot is, ami a border-collapse tulajdonságot collapse-ra állítja. Ha ezt nem tesszük meg, az Outlook újabb verziói egy kis térközt hagynak a táblázatunk és a szegélyünk között.
A szerkezet és a fejléc kialakítása
A dizájnunkban láthatjuk, hogy az email három logikai részre tagolódik, ezért létre fogunk hozni egy sort mindegyiknek.
Duplázzuk meg a sima sort és így már összesen három sorunk lesz. Megváltoztattam a szöveget bennük, így könnyen azonosítani tudjuk az egyes sorokat.
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td>
|
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
Most kiszínezzük a dizájnnak megfelelően. Mivel a bgcolor egy érvényes HTML attribútum, ezt fogjuk használni a háttérszín beállítására a CSS helyett. Ne felejtsd el a teljes, hat karakteres hexakódot használni, mivel a három karakteres rövidítés nem mindig működik.
1 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> |
2 |
<tr>
|
3 |
<td bgcolor="#70bbd9"> |
4 |
Row 1 |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td bgcolor="#ffffff"> |
9 |
Row 2 |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td bgcolor="#ee4c50"> |
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
Oké, ezután a Row 1-re összpontosítunk. Szeretnénk kiigazítani a cella térközét, majd beilleszteni a képünket.
Térköz használata
Amikor térközt használunk egy emailben, mindig meg kell határozni minden egyes értéket (felső, jobb, alsó és bal), különben nem várt eredményeket kaphatunk. Elvileg itt használhatsz rövidítéseket, pl.: padding: 10px 10px 8px 5px;, de ha valami problémát okozna, akkor a teljes formát írd le, pl.: padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.
Ha még ennél is nagyobb problémáid akadnak a térközzel (például ha a küldő platformod leszedi a CSS-t róla), akkor egyáltalán ne használd. Egyszerűen csak üres cellákkal csinálj teret. Nem kell térköz GIFeket használni, csak add hozzá a style="line-height: 0; font-size: 0;"-t a cellához, helyezz el benne egy -t és adj neki magasságot vagy szélességet Itt egy példa rá:
1 |
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr> |
Figyelj rá, hogy a TD tageken biztonságosan lehet térközt alkalmazni, de a P vagy DIV tageken nem. Azok sokkal kiszámíthatatlanabbul viselkednek.
Ezért használni fogunk némi inline CSS-t a cella térközének megadására. Ezután beillesztjük a képünket, hozzárakjuk az alt szöveget és a style="display:block;"-ot, ami egy olyan általános javítás, ami megakadályozza az email klienseket abban, hogy réseket hagyjon a képeid alatt. A képet középre igazítjuk az align="center" hozzáadásával a td tagunkhoz. Hozzáadunk egy alt taget is, ami azért fontos, mert amikor az emailunk először betöltődik, a legtöbb esetben nem mutatja a képeket.
Megjegyzés: Ha a fejléced tartalma nagyon fontos az üzeneted szempontjából, ne használj csak-képből álló fejlécet. Figyelj rá, hogy a képeket alapból a legtöbb kliens blokkolja, ezért ha van valamilyen létfontosságú része az emailednek, azt soha ne képként helyezd el benne. Ugyanakkor ebben a példában a fejlécem meglehetősen felesleges.
1 |
<td align="center" bgcolor="#70bbd9" style="padding: 40px 0 30px 0;"> |
2 |
<img src="images/h1.gif" alt="Creating Email Magic" width="300" height="230" style="display: block;" /> |
3 |
</td>
|
Egy tartalmi rész létrehozása
Először is adunk némi térközt a középső cellának, így a benne lévő táblázat körül lesz egy kis hely pont úgy, ahogy a dizájnunkban is szerepel.
Most hozzá fogunk adni egy táblázatot három sorral a fő tartalmunkhoz – egyet a szalagcímnek, egyet a bemutatkozó szövegnek, és egyet a két oszlopos sornak. Ennek a táblázatnak a szélességét 100%-ra állítjuk ahelyett, hogy pixelben adnánk meg, mivel ez segíthet a későbbiekben, amikor reszponzívvá akarjuk tenni az emailünket. Ha mindig pixeles szélességeket adsz meg mindenhol, akkor a media query-k sok értéket felül fognak írni. Ha a táblázatod szélességét százalékos alapon adod meg, utána pedig beállítod a szülő elem szélességét, minden megfelelően fog igazodni.
1 |
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"> |
2 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
3 |
<tr>
|
4 |
<td>
|
5 |
Row 1 |
6 |
</td>
|
7 |
</tr>
|
8 |
<tr>
|
9 |
<td>
|
10 |
Row 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
<tr>
|
14 |
<td>
|
15 |
Row 3 |
16 |
</td>
|
17 |
</tr>
|
18 |
</table>
|
19 |
</td>
|
Most hozzáadjuk a tartalmunkat és némi térközt a középső cellához.
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Lorem ipsum dolor sit amet! |
5 |
</td>
|
6 |
</tr>
|
7 |
<tr>
|
8 |
<td style="padding: 20px 0 30px 0;"> |
9 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
10 |
</td>
|
11 |
</tr>
|
12 |
<tr>
|
13 |
<td>
|
14 |
Row 3 |
15 |
</td>
|
16 |
</tr>
|
17 |
</table>
|
Utána hozzáadjuk a kétoszlopos tartalmunkat a Row 3-hoz. Mivel szeretnénk 'margót' a két cella közé, de a margó nem támogatott, létre fogunk hozni egy háromoszlopos táblázatot, egy üres cellával a két másik oszlop között.
Bármennyire is szeretek a százalékokhoz ragaszkodni, amikor egy konkrét méretű tartalom van, akkor nehéz átalakítani azt százalékra (ebben a példában az oszlopoknak 48,1%-nak kellene lennie, ami zavaró lehet). Ez okból, mivel a két képünk 260px széles, szintén 260px széles oszlopokat csinálunk, középen 20px-es margójú cellával. (Ez összesen 540px, ami a 600px széles táblázatunk mínusz a 30px-es térköz a két oldalán.) Figyeljünk rá, hogy a margó cellában lenullázzuk a betűméretet és sormagasságot, és adjunk hozzá egy nem megtörő szóköz ( ) karaktert.
A valign-t is állítsuk be "top"-ra mindkét cellánál, így függőlegesen a tetejére lesznek igazítva, még akkor is, ha az egyik cellában több szöveg van, mint a másikban. Az alapértelmezett függőleges igazítás a "middle".
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
Column 1 |
5 |
</td>
|
6 |
<td style="font-size: 0; line-height: 0;" width="20"> |
7 |
|
8 |
</td>
|
9 |
<td width="260" valign="top"> |
10 |
Column 2 |
11 |
</td>
|
12 |
</tr>
|
13 |
</table>
|
Most adjuk hozzá a képeinket és tartalmainkat azokhoz az oszlopokhoz. Mivel több sorra lesz szükségünk, elhelyezünk egy másik táblázatot benne, mivel nem használhatjuk a colspan és rowspan tageket. A képek közé szintén rakunk némi térközt, és lemásoljuk mindegyik oszlopa.
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td width="260" valign="top"> |
4 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
5 |
<tr>
|
6 |
<td>
|
7 |
<img src="images/left.gif" alt="" width="100%" height="140" style="display: block;" /> |
8 |
</td>
|
9 |
</tr>
|
10 |
<tr>
|
11 |
<td style="padding: 25px 0 0 0;"> |
12 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
13 |
</td>
|
14 |
</tr>
|
15 |
</table>
|
16 |
</td>
|
17 |
<td style="font-size: 0; line-height: 0;" width="20"> |
18 |
|
19 |
</td>
|
20 |
<td width="260" valign="top"> |
21 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
22 |
<tr>
|
23 |
<td>
|
24 |
<img src="images/right.gif" alt="" width="100%" height="140" style="display: block;" /> |
25 |
</td>
|
26 |
</tr>
|
27 |
<tr>
|
28 |
<td style="padding: 25px 0 0 0;"> |
29 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. |
30 |
</td>
|
31 |
</tr>
|
32 |
</table>
|
33 |
</td>
|
34 |
</tr>
|
35 |
</table>
|
Itt a képeink szélességét HTML használatával az oszlopszélesség 100%-ára állítottuk be. Megismételve, ez azért van, hogy ha ezt az emailt reszponzívvá akarjuk tenni, akkor csak a media query-ket használhatjuk a szülő elem szélességének megváltoztatásához. Felül kell írnunk a pixelekben megadott magasságot, mivel a style="height: auto" nem fog működni mindenhol (khm, khm, Outlook). Ezért pixelek használatával adjuk meg. Ez azt jelenti, hogy a height: auto!important-ot kell beállítani azokon a képeken, amik media query-t használnak a pixel értékek felülírására, de ezt megoldhatjuk egy egyszerű osztállyal. Mivel a szélességet százalékban adtuk meg, ezért azt nem kell felülírni. Minél kevesebb dolgot kell felülírni, annál jobb.
A lábléc
Most hozzáadjuk a térközünket a lábléc sorunkhoz.
1 |
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> |
2 |
Row 3 |
3 |
</td>
|
A cellán belül elhelyezünk egy másik táblázatot, hogy megkapjuk a két oszlopunkat.
1 |
<table border="1" cellpadding="0" cellspacing="0" width="100%"> |
2 |
<tr>
|
3 |
<td>
|
4 |
Column 1 |
5 |
</td>
|
6 |
<td>
|
7 |
Column 2 |
8 |
</td>
|
9 |
</tr>
|
10 |
</table>
|
Létrehozunk egy másik kis táblázatot a közösségi média ikonjainknak. A szülő celláját beállítjuk align="right"-ra. Figyelj rá, hogy a border="0" ezeken a kép linkeken (hogy elkerüljük a kék link szegélyt), és ne felejtsd a display:blockot.
1 |
<td align="right"> |
2 |
<table border="0" cellpadding="0" cellspacing="0"> |
3 |
<tr>
|
4 |
<td>
|
5 |
<a href="http://www.twitter.com/"> |
6 |
<img src="images/tw.gif" alt="Twitter" width="38" height="38" style="display: block;" border="0" /> |
7 |
</a>
|
8 |
</td>
|
9 |
<td style="font-size: 0; line-height: 0;" width="20"> </td> |
10 |
<td>
|
11 |
<a href="http://www.twitter.com/"> |
12 |
<img src="images/fb.gif" alt="Facebook" width="38" height="38" style="display: block;" border="0" /> |
13 |
</a>
|
14 |
</td>
|
15 |
</tr>
|
16 |
</table>
|
17 |
</td>
|
Most hozzáadjuk a szövegünket és adunk egy szélességet a celláinknak, csak a biztonság kedvéért, még akkor is, ha sok whitespace van közöttük. Ezt a cellát 75%-ra állítjuk, és a másikat pedig 25%-ra.
1 |
<td width="75%"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
Unsubscribe to this newsletter instantly |
4 |
</td>
|
És meg is van! Kész az elrendezésünk.
Érvényesítés
Futtassuk le a W3C Validatoron, hogy lássunk, semmi sem rossz vagy hibás Ha idáig pontosan követtél, akkor azt fogja mondani, hogy átmentél.
Ezután végigfuttatunk egy Litmus tesztet, hogy biztosak legyünk benne, az emailünk szerkezete nagyszerűen működik. Íme az én tesztem összegzése:
Szövegünk stilizálása
Az első sorunk a fejléc. A b taget használjuk félkövér szöveg létrehozására, mert ahogy azt már tudjuk, ha létezik HTMLben, akkor azt használjuk CSS helyett.
1 |
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> |
2 |
<b>Lorem ipsum dolor sit amet!</b> |
3 |
</td>
|
Ezt az inline stílust hozzáadjuk a többi szövegcellához is:
1 |
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;" |
Ezután a lábléc szövegét kell stilizálnunk, valamint elhelyezni a leiratkozás linkünket. A leiratkozás linkünket CSS és a HTML <font> tag használatával stilizáljuk. Ennek a megduplázása a legjobb mód arra, hogy biztosítsuk, a linkjeid többé ne az alapértelmezett kék színnel jelenjenek meg.
1 |
<td style="color: #ffffff; font-family: Arial, sans-serif; font-size: 14px;"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
<a href="#" style="color: #ffffff;"><font color="#ffffff">Unsubscribe</font></a> to this newsletter instantly |
4 |
</td>
|
És meg is vagyunk! Minden benne van. Itt az idő, hogy kikapcsold a szegélyeket és megnézd, milyen szép. Menj végig rajta és cseréld le a border="1" minden előfordulását border="0"-ra.
Ezen a ponton egy kicsit úgy néz ki, mintha lebegne a fehér térben, ezért menjünk fel az első 600px széles táblázatunkhoz és adjuk hozzá:
1 |
style="border: 1px solid #cccccc;" |
Most már nem úgy néz ki, mint ami lebegne. Végső simításként hozzáadok egy 30px-es alsó térközt a legelső cella aljához, hogy megakadályozzam az emailünk hirtelen megszakadását az alján néhány webmail kliensben (mint az Apple Mail), és 10px térközt a tetején, mert így a kék fejlécünk egy kicsit levegősebb lesz.
1 |
<td style="padding: 20px 0 30px 0;"> |
És ennyi! Készen állsz a végső próbára.
Röviden ennyi!
Mielőtt végleg befejeznénk, ha használtál bármilyen kommentet, akkor szabadulj meg tőlük. Némelyik email kliensnek a torkán akadhatnak a kommentek, ezért nem a legokosabb, ha szükségtelen kód van bárhol a fájljaidban.
Itt az idő a végső teszt elvégzésére, és utána a HTML emailed készen áll az elküldésre!
Vidd a következő szintre, amit tanultál, nézd meg a következő bemutatókat:
- Egy egyszerű, reszponzív HTML email létrehozása
- Gyorstipp: Ne felejtsd el stilizálni az ALT szövegedet
- Egy időtálló, reszponzív email létrehozása media query-k nélkül
