() translation by (you can also view the original English article)
Najbolji način da razumijete neki proces jest da ga sami napravite iz temelja. Danas ćemo učiniti upravo to sa e-mail dizajnom, gradeći HTML e-mail predložak počevši od nule.
Početak
Za početak, vrijedi spomenuti odakle sam nabavio resurse.
- Zgodne 2D ikone su od Pierre Borodina s Dribble stranice
- Fontovi koji su korišteni su Oil Can, Source Sans Pro i Mission Script
- Ikone društvenih medija su od Metrize Icons
Sada, kao što smo objansili u prethodnom tutorialu, morate početi s vašim HTML dokumentom s XHTML doctypeom:
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>
|
Nakon što smo to riješili, možemo nastaviti graditi ostatak strukture.
Izrada Tijela i Glavne Tablice
Prvo ćemo dodati opću strukturu za našu e-poštu, počevši od <body> taga. Postavit ćemo marginu i padding na body tagu na nulu kako bismo izbjegli neočekivani prostor.
Također ćemo dodati tablicu sa širinom od 100%. To djeluje kao pravi Body tag za našu e-poštu jer stiliranje body taga nije u potpunosti podržano. Ako biste željeli dodati boju pozadine u 'tijelo' svoje e-pošte, trebali biste ga primijeniti na ovu veliku tablicu umjesto toga.
Postavite svoj cellpadding i cellspacing na nulu kako biste izbjegli neočekivano mjesto u tablici.
Napomena: Ostaviti ćemo border ="1" na svim našim tablicama, tako da možemo vidjeti kostur našeg izgleda dok radimo. Ukloniti ćemo ih na kraju s jednostavnim Find & Replace.
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>
|
Ako atribut postoji u HTML-u, upotrijebite ga umjesto CSS-a
Sada stavite centralnu tablicu širine 600 piksela unutar container tablice. 600 piksela je sigurna maksimalna širina za vaše e-poruke da se komotno prikazuju unutar većine desktop i webmail klijenata na većini rezolucija zaslona.
Postavite ovu širinu pomoću HTML-a umjesto CSS-a, pomoću atributa širine. Zlatno pravilo u razvoju HTML e-pošte je: ako atribut postoji u HTML-u, upotrijebite taj umjesto CSS.
Zamijeniti ćemo naš 'Hello!' pozdrav ovom tablicom:
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>
|
Također smo dodali vrijednost stila unutarnje linije koja podešava border-collapse vrijednost u collapse. Ako ovo ne učinimo, novije verzije Outlooka će dodati mali prostor između naše tablice i našeg ruba.
Izrada Strukture i Zaglavlja
U našem dizajnu možemo vidjeti da je e-mail podijeljen na tri logična dijela, stoga ćemo za svaki kreirati redak.
Duplicirajmo jedan redak koji smo već napravili tako da imamo ukupno tri. Ja sam promijenila tekst u njima kako bismo mogli identificirati svaki redak.
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>
|
Sada ćemo ih obojiti prema dizajnu. Pošto je bgcolor validan HTML atribut, umjesto CSS-a ćemo to upotrijebiti da podesimo boju pozadine. Uvijek se sjetite upotrijebiti svih šest znamenki hex koda jer kratica od tri znamenke neće uvijek funkcionirati.
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, sada ćemo se usredotočiti na Row 1 (1. redak). Želimo podesiti padding na ćeliji i zatim ubaciti našu sliku.
Upotreba Padding-a
Kada u e-mailu koristite padding, uvijek morate odrediti svaku zasebnu vrijednost (gore, desno, dolje i lijevo) jer biste u suprotnom mogli dobiti nepredvidive rezultate. Shvatila sam da i dalje možete koristiti kratice, tj. padding:padding: 10px 10px 8px 5px;, ali ako imate problema trebali biste upotrijebiti dugi oblik, odnosno padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.
Ako imate još većih roblema s paddingom (na primjer, ako platforma za slanje ne odgovara vašem CSS-u) nemojte ga uopće koristiti. Samo ostavite prazne ćelije da kreirate prostor. Nema potrebe da koristite GIF-ove, samo pazite da dodate ćeliji style="line-height: 0; font-size: 0;" i smjestite &bnsp; unutar te dodijelite visinu ili širinu. Evo primjera:
1 |
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr> |
Također, imajte na umu da je sigurno koristiti padding na TD tagovima ali ne na P tagovima ili DIVovima. Oni se ponašaju mnogo više nepredvidivo.
Stoga ćemo upotrijebiti neki unutarnji CSS da dodamo padding ćeliji. Zatim ćemo ubaciti svoju sliku, dodajući alt tekst i dodajući style="display:block;" što je uobičajeno rješenje koje zaustavlja neke e-mail klijente dodajući praznine ispod vaših slika. Centrirati ćemo sliku dodajući align="center" našem td tagu. Također ćemo dodati alt tag koji je važan kod početnog učitavanja našeg e-maila, što će u većini slučajeva, biti bez slika.
Napomena: Ako je sadržaj našeg zaglavlja zaista važan za vašu poruku, nemojte upotrijebiti zaglavlje samo sa slikom. Ne zaboravite, slike su blokirane prema zadanim postavkama za većinu klijenata, pa ako postoji aspekt vašeg e-maila koji je od krucijalne važnosti, nikada ga nemojte uključiti kao sliku. U ovom primjeru, moje je zaglavlje prilično nepotrebno.
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>
|
Izrada Sadržaja
Prvo ćemo dodati padding središnjoj ćeliji tako da stupac unutar nje ima nešto prostora okolo, zbog našeg dizajna.
Sada ćemo dodati tablicu sa tri retka za naš glavni sadržaj - jedan za naslov, jedan za uvodni tekst i jedan za redak s dva stupca. Podesiti ćemo širinu ove tablice na 100% umjesto da koristimo vrijednost u pikselima jer će nam to kasnije pomoći ako želimo responzivani e-mail. Ako na svemu imate uvijek piksele, možete na kraju završiti s mnogim vrijednostima koje morate nadjačati medijskim upitima. Ako su širine vaših ugniježđenih tablica bazirane na postocima, tada će se sve prema njima prilagoditi kada podesite širinu roditelj elementa.
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>
|
Sada ćemo dodati naš sadržaj i padding središnjoj ćeliji.
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>
|
Sada ćemo dodati dva stupca sadržaju Row 3 (3. redak). Pošto želimo 'marginu' između te dvije ćelije, a margina nije podržana, napraviti ćemo tablicu od tri stupca s praznom ćelijom između dva vanjska stupca.
Koliko kod bih se željela držati postotaka, kada imate sadržaj koji je određene veličine, može biti prilično zeznuto konvertirati je u postotke (u ovom primjeru, stupci bi bili 48.1% što može biti zbunjujuće). Iz ovog razloga, pošto su naše dvije slike široke 260px, napraviti ćemo dva stupca koji su također široki 260px, sa marginom ćelije od 20px u sredini. To će ukupno biti 540px, što je 600px širine naše tablice minus padding od 30px s svake strane.) Obavezno smanjite veličinu fonta i visinu linije te dodajte znak &bnsp; u marginu ćelije.
Također ćemo podesiti valign na "top" za obje ćelije tako da budu vertikalno poravnate na vrhu, čak i ako jedan stupac ima više teksta od drugog. Zadano vertikalno poravnanje je "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>
|
Dodajmo sada naše slike i sadržaj tim stupcima. Pošto trebamo više redaka, ugnijezditi ćemo još jednu tablicu jer ne možemo upotrijebiti nikakve colspan ili rowspan tagove. Također ćemo dodati padding između slike i kopije u svakom stupcu.
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>
|
Ovdje smo podesili širinu slike koristeći HTML na 100% širine stupca. Ovo, opet, je zato da ako ovaj e-mail učinimo responzivnim, moramo samo upotrijebiti medijske upite da promijenimo širinu roditelj elementa. Morati ćemo nadjačati visinu u pikselima jer upotreba style='height: auto" sada neće raditi u svemu (khm, khm, Outlook). Stoga ćemo je podesiti koristeći piksele. . To znači da bismo morali podesiti height: auto!important na onim slikama koje koriste medijske upite da nadjačaju vrijednost u pikselima, ali to možemo učiniti sa jednom klasom. Pošto smo širinu podesili na postotke, to ne moramo nadjačati. Što manje stvari moramo nadjačati, to bolje.
Podnožje
Sada ćemo dodati padding u redak podnožja.
1 |
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> |
2 |
Row 3 |
3 |
</td>
|
Unutar te ćelije, ugnijezditi ćemo još jednu tablicu da dobijemo naša dva stupca.
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>
|
Napraviti ćemo još jednu malu tablicu za ikone društvenih medija. Podesiti ćemo njezinu roditelj ćeliju na align="right". Obavezno podesite border="0" na tim poveznicama slika (da izbjegnete plave poveznice) i ne zaboravite display:block.
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>
|
Sada ćemo dodati tekst i širinu našim ćelijama, čisto zbog sigurnosti, iako ima dovoljno bijelog prostora između njih. Ovu ćeliju ćemo podesiti na 75% i drugu na 25%.
1 |
<td width="75%"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
Unsubscribe to this newsletter instantly |
4 |
</td>
|
I to je to! Naš izgled je gotov.
Provjera Valjanosti
Pokrenimo kroz W3C Validator-a kako bismo bili sigurni da nema grešaka. Ako ste pažljivo pratili, reći će da je valjanost u redu.
Sada ćemo testirati sa Litmus-om kako bismo provjerili radi li dobro struktura našeg e-maila. Evo rezultata mojeg testa:
Oblikovanje Teksta
Naš prvi redak je zaglavlje. Upotrijebiti ćemo <b> tag da napravimo podebljani tekst jer, kao što već znamo, ako postoji u HTML-u, upotrijebiti ćemo ga umjesto CSS-a.
1 |
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> |
2 |
<b>Lorem ipsum dolor sit amet!</b> |
3 |
</td>
|
Također ćemo dodati ovaj unutarnji stil svim drugim ćelijama teksta:
1 |
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;" |
Zatim moramo oblikovati tekst podnožja, a također ćemo urediti i vezu za otkazivanje pretplate. Stilizirati ćemo tekstualni link za otkazivanje pretplate koristeći CSS i HTML <font> tag. Ovo udvostručavanje je najbolji način da se vaše veze nikad ne prikazuju zadanom plavom.
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>
|
I to je sve! Sve je tu. Vrijeme je da isključite rubove i pogledate kako lijepo izgleda. Nastavite i zamijenite svaki događaj border="1" s border="0".
U ovom trenutku izgleda pomalo otužno lebdeći u bijelom prostoru, pa idemo gore na našu prvu tablicu širine 600px i dodajmo:
1 |
style="border: 1px solid #cccccc;" |
Sada više ne izgleda kao da lebdi. Kao završni detalj, dodati ću 30px padding na dno prve ćelije da spriječim naglo zaustavljanje e-maila na dnu u nekim webmail klijentima (kao što je Apple Mail), i 10px padding na vrhu tako da plavo zaglavlje ima nešto slobodnog prostora.
1 |
<td style="padding: 20px 0 30px 0;"> |
I to je to! Svi ste sada spremni za završni test.
Završili smo!
Prije nego što kažemo da smo zaista gotovi, ako ste koristili bilo kakve komentare, sada ih se riješite. Neki email klijenti mogu se gušiti zbog komentara pa je najbolje da nemate nepotreban kod nigdje u svojim datotekama.
Sada je dobar trenutak za završni test, i tada je vaš HTML e-mail spreman za slanje!
Kako biste ovo što ste naučili podigli na novu razinu, pogledajte sljedeće tutoriale:
