() translation by (you can also view the original English article)
Ang pinakamamagandang paraan upang maintindihan ang anumang proseso ay upang dalhin ito sa iyong sarili, mula sa ibaba pataas. Ngayon, gagawin lang natin ang disenyo ng email, sa pamamagitan ng pagbuo HTML email template mula sa scratch.
Para sa Pag-uumpisa
Upang magsimula, ito ay mahalaga na malaman kung saan ko makukuha ang ilan sa mga mapagkukunan.
- Ang mga magagandang 2D na icon ay sa pamamagitan ng Pierre Borodin sa Dribbble
- Ang ginamit na typefaces ay Oil Can, Source Sans Pro at Mission Script
- Ang mga icon ng social media ay nagmula Metrize Icons
Ngayon, tulad ng ating tinalakay sa nakaraang pagtuturo, kakailanganin mong simulan ang iyong HTML na dokumento sa isang XHTML na doctype:
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>
|
Sa ganitong pagkaka-ayos, maaari nating umpisahan ang pagtatayo ng natitirang bahagi ng istraktura.
Paglikha ng Katawan at Pangunahing Talaan
Una, magdaragdag tayo ng isang pangkalahatang istraktura
para sa ating email, na nagsisimula sa isang pagalan <body> tag. Ilalagay din natin ang margin at padding sa pangalan ng
katawan sa zero upang maiwasan ang anumang hindi inaasahang espasyo.
Magdaragdag din tayo ng table na may lapad na 100%. Gumagana ito bilang isang tunay na pangalan ng katawan para sa aming email, dahil ang estilo ng pangalan ng katawan ay hindi ganap na sinusuportahan. Kung gusto mong magdagdag ng isang kulay ng background sa êbodyí ng iyong email, kailangan mong ilapat ito sa malaking mesa na ito.
Itakda ang iyong cellpadding at cellspacing sa zero upang maiwasan ang anumang hindi inaasahang puwang sa table.
Tandaan: Tayo ay mag-iiwan ng hangganan="1" sa
lahat ng aming mga table, upang makita natin ang balangkas ng ating layout
habang ginagawa natin. Inalis natin ang mga ito sa dulo gamit ang isang simpleng
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>
|
Kung umiiral ang isang kagamitan sa HTML, gamitin iyon sa halip na CSS
Ngayon ilagay ang isang centered table na 600 pixel ang lapad sa loob ng lalagyan ng table. Ang 600 pixels ay isang ligtas na pinakamalaking lapad para sa iyong mga email upang maipakita nang kumportable sa loob ng karamihan sa mga kliyente sa desktop at webmail sa karamihan ng mga resolusyon ng screen.
Itakda ang lapad na ito gamit ang HTML sa halip na CSS, sa pamamagitan ng pag-gamit ng malapad na katangian. Ang pinaka-magandang dapat tandaan ay sa pagpapaunlad ng HTML ng email: kung ang isang katangian ay umiiral sa HTML, gamitin iyon sa halip na CSS.
Papalitan natin ang ating maliit na ëHello! Í na pagbati sa table na ito:
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>
|
Nagdagdag din kami ng isang nakalagay na estilo na
nagtatakda ng border-collapse na pagmamay-ari upang collapse. Kung hindi natin gagawin ito, ang mga mas bagong bersyon ng
Outlook ay magdaragdag ng isang maliit na puwang sa pagitan ng aming table at
ng ating hangganan.
Paglikha ng Istraktura at Header
Sa ating disenyo, maaari nating makita na ang email ay nahahati sa tatlong lohikal na seksyon, kaya lumikha tayo ng isang hilera para sa bawat isa.
Ating gayahin ang nag-iisang hilera na ginawa natin upang magkaroon tayo ng tatlong kabuuan. Binago ko ang teksto sa loob ng mga ito upang madaling makilala natin ang bawat hilera.
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>
|
Ngayon ay kulayan natin sila ayon sa disenyo. Bilang bgcolor ay isang wastong katangian ng HTML, gagamitin
namin iyan upang piliin ang kulay ng background sa halip na CSS. Laging tandaan na gamitin ang buong anim na karakter ng
isang hex code, dahil ang tatlong karakter na shorthand ay hindi parating
gumagana.
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>
|
Ngayon, susunod na tayo sa pag-focus sa Row 1. Gusto nating ayusin ang padding sa cell at pagkatapos ay ipasok ang ating imahe.
Paggamit ng Padding
Kapag gumagamit ng padding sa email, dapat mong laging alamin
ang bawat solong halaga (itaas, kanan, ibaba at kaliwa) kung hindi makakakuha
ka ng mga hindi inaasahang resulta. Nakikita ko na maaari mo pa ring gamitin ang shorthand, i.e. padding: 10px 10px 8px 5px;, ngunit kung nagkakaproblema ka ay baka gusto mong isulat ito ng longform, padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;
Kung nagkakaroon ka ng mas malaking problema sa padding
(halimbawa, kung ang iyong ipinapadala na platform ay bumubuga ang iyong CSS),
huwag gamitin ito sa lahat. Gamitin lamang ang mga walang laman na cell upang lumikha ng
espasyo. Hindi na kailangang gumamit ng spacer GIFs, siguraduhing idagdag mo style="line-height: 0; font-size: 0;" sa cell, ilagay ang isang sa loob at bigyan ito ng isang diretsong taas o lapad. Narito ang isang halimbawa:
1 |
<tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr> |
Tandaan din na ligtas na gamitin ang padding sa TD tags ngunit hindi sa P tag o DIVs. Sila ay kumikilos nang higit pa sa inaasahan.
Kaya, gagamitin natin ang ilang mga inline na CSS upang
magdagdag ng padding sa cell. Pagkatapos ay ipasok natin ang ating larawan, idagdag ang
alt text at idaragdag style="display:block;" kung saan ay isang pangkaraniwang pag-aayos na
humihinto sa ilang mga email ng mga kliyente na nagdadagdag ng mga puwang sa
ilalim ng iyong mga imahe. Ilagay natin ang imahe sa pamamagitan ng pagdagdag ng align="center" sa
ating tag na td. Magdaragdag din tayo ng isang alt tag na mahalaga para sa
kapag ang ating email ay umandar sa simula na, sa karamihan ng mga kaso, ay may
mga imahe na hindi gumagana.
Tandaan: Kung ang mga nilalaman ng iyong header ay mahalaga sa iyong mensahe, huwag gumamit ng isang header na imahe lamang. Tandaan, ang mga imahe ay hinarangan sa pamamagitan ng default para sa karamihan ng mga kliyente, kaya kung mayroong isang aspeto ng iyong email na mahalaga, hindi ito isama bilang isang imahe. Gayunpaman, sa halimbawang ito, ang aking header ay medyo sobra.
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>
|
Paglikha ng Area ng Nilalaman
Una, magdaragdag tayo ng ilang mga padding sa gitnang cell upang ang mesa sa loob ay may ilang espasyo sa paligid nito, ayon sa aming disenyo.
Ngayon ay magdaragdag kami ng table na may tatlong hanay para sa aming pangunahing nilalaman ó para sa headline, isa para sa panimulang teksto, at isa para sa hanay na may dalawang haligi. Itatakda natin ang lapad ng lalagyanan na ito sa 100% sa halip na gumamit ng isang pixel na halaga dahil makakatulong ito sa atin sa karagdagang pababa sa hanay kung gusto nating gawing sumasagot ang ating email. Kung palagi kang may lapad ng pixel sa lahat, maaari kang magtapos ng maraming mga halaga upang palitan ang mga katanungan sa media. Kung ang iyong nais na lapad sa lalagyanan ay batay sa mga porsyento, at pagkatapos ay kapag napalitan mo ang lapad ng elemento ng mas malaki, ang lahat ay ibagay kung paano ito dapat.
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>
|
Ngayon ay idagdag natin sa ating nilalaman, at magdagdag ng ilang padding sa gitnang cell.
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>
|
Ngayon ay idaragdag natin ang ating dalawang haligi ng nilalaman sa Hilera 3. Dahil gusto natin ang isang pagitan ng dalawang mga cell na ito, ngunit hindi sinusuportahan ang margin, lumikha tayo ng tatlong talahanayan na may isang walang laman na cell sa pagitan ng dalawang panlabas na haligi.
Hangga't nais mong manatili sa mga porsyento, kapag mayroon
kang nilalaman na isang tiyak na sukat, maaari itong maging nakakalito upang
palitan ito sa isang porsyento (sa halimbawang ito, ang mga haligi ay magiging
48.1% na maaaring maging nakalilito). Para sa kadahilanang ito, dahil ang aming dalawang mga imahe
ay 260px ang lapad, lumikha kami ng mga haligi na din 260px ang lapad, na may
isang 20px margin cell sa gitna. (Ito ay kabuuang 540px, na kung saan ay ang 600px na lapad
ng ating lalagyanan na may kabawasan ang padding ng 30px sa magkabilang panig.) Tiyaking zero ang iyong font-size at line-height at
magdagdag ng isang hindi napuputol na espasyong karakter sa margin
cell.
Itatakda din natin ang pagkakalagay sa "itaas"
para sa parehong mga cell upang sila ay patayo na nakahanay sa itaas, kahit na
ang isang haligi ay may higit pang teksto kaysa sa isa pa. Ang default vertical
alignment ay "gitna". Ang default vertical alignment ay "gitna".
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>
|
Ngayon ay idagdag natin ang ating mga larawan at nilalaman sa mga hanay na iyon. Tulad ng kailangan natin ng maramihang mga hilera, tayo ay maglalagay pa ng isa pang talahanayan dahil hindi natin magagamit ang anumang mga tag na colspan o rowspan. Magdaragdag din tayo ng ilang padding sa pagitan ng imahe at kopya sa bawat haligi.
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>
|
Narito at naitakda natin ang lapad ng mga larawan gamit ang
HTML sa 100% ng lapad ng haligi. Ito, muli, ay upang kung ginawa natin ang email na ito bilang
sumasagot, kailangan lang natin gamitin ang mga query sa media upang baguhin
ang lapad ng elemento ng mas malaki. Dapat nating palitan ang taas sa mga pixel dahil gumagamit
ng estilo="height: auto" na ngayon ay hindi na aandar sa lahat ng
bagay (ubo ubo, Outlook). Kaya itinatakda natin ito gamit ang mga pixel. Nangangahulugan ito na kailangan nating itakda ang taas: height: auto!important sa mga larawang iyon gamit ang mga kagamitan sa media upang palitan ang halaga ng pixel, ngunit maaari nating gawin iyon sa iisang klase. Habang itinatakda natin ang lapad bilang porsyento, hindi natin kailangang palitan iyon. Ang mas kaunting mga bagay upang palitan ang mas maganda.
Ang Footer
Ngayon ay idagdag natin ang ating padding sa hanay ng footer.
1 |
<td bgcolor="#ee4c50" style="padding: 30px 30px 30px 30px;"> |
2 |
Row 3 |
3 |
</td>
|
Sa loob ng linyang iyon, maghihintay tayo ng isa pang table upang makuha ang ating dalawang haligi.
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>
|
Gumawa tayo ng isa pang maliit na table para sa ating mga
icon ng social media. Itakda natin ang cell na malaki nito upang paghanayin align="right" Tiyaking setborder border="0" sa mga link na ito ng
imahe (upang maiwasan ang isang asul na hangganan ng link) at huwag kalimutan
ang 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>
|
Ngayon ay idagdag natin ang ating teksto at magdagdag ng isang lapad sa ating mga cell, para lamang maging ligtas, kahit na mayroong maraming malapad na espasyo sa pagitan nila. Itatakda natin ang cell na ito sa 75% at ang iba pa sa 25%.
1 |
<td width="75%"> |
2 |
® Someone, somewhere 2013<br/> |
3 |
Unsubscribe to this newsletter instantly |
4 |
</td>
|
At doon ay mayroon tayo! Kumpleto na ang aming layout.
Pagpapatunay
Patakbuhin ito sa pamamagitan ng W3C Validator upang matiyak na walang masama o sira. Kung sumunod ka nang eksakto, sasabihin mo na tapos na ito.
Susunod na nagpapatakbo tayo ng isang pagsubok sa pamamagitan ng Litmus upang tiyakin na ang istraktura ng ating email ay maayos na umaandar. Narito ang isang buod ng ating pagsubok:
Pag-istilo ng ating Teksto
Ang ating unang hanay ay ang heading. Gagamitin natin ang <b> tag upang lumikha ng
naka-bold na teksto dahil, tulad ng nalalaman na natin, kung umiiral ito sa
HTML, ginagamit natin iyon sa halip na CSS.
1 |
<td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"> |
2 |
<b>Lorem ipsum dolor sit amet!</b> |
3 |
</td>
|
Atin ding idagdag ang inline na estilo sa lahat ng iba pang mga cell ng teksto:
1 |
style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;" |
Susunod na kailangan natin sa estilo ng footer text, at
weíll rin maglinis ng ating mga link sa pag-alis sa pagkaka-subscribe. Susuriin natin ang ating teksto sa pag-alis sa
pagkaka-subscribe gamit ang parehong CSS at tag na HTML <font>. Ang pagdodoble ay ang pinakamahusay na paraan upang matiyak
na ang iyong mga link ay hindi kailanman lalabas sa default na asul.
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>
|
At doon ay patapos na tayo! Lahat ay nasa. Oras na upang tigilan ang mga hangganan at
makita itong maganda ang hitsura. Pumunta sa pamamagitan at palitan ang bawat pagkakataon ng
border="1" na may hangganan border="o"
Sa puntong ito, ito ay naghahanap ng isang maliit na malungkot na lumulutang sa puting espasyo, kaya pumunta sa ating unang 600px na lapad na talahanayan at idagdag:
1 |
style="border: 1px solid #cccccc;" |
Ngayon hindi na ito lumilitaw na lumulutang na ngayon. Bilang pangwakas na pag-gawa, ako ay magdaragdag ng 30px ng padding sa ilalim ng pinakaunang cell, upang maiwasan ang ating email mula sa pagtigil ng biglang sa ibaba sa ilang mga kliyente sa webmail (tulad ng Apple Mail), at 10px ng padding sa itaas, kaya na ang ating mga asul na header ay may isang maliit na bit ng lalagyanan.
1 |
<td style="padding: 20px 0 30px 0;"> |
At iyan! Ikaw ay handa na para sa huling pagsubok.
Iyan ang isang pagtatapos!
Bago natin tapusin ang araw na ito, kung ginamit mo ang anumang mga komento, tanggalin ang mga ito. Ang ilang mga email na kliyente ay maaaring mabagtas sa mga komento kaya ito ay pinaka-maganda, hindi na magkaroon ng anumang mga hindi kinakailangang koda kahit saan sa iyong mga gamit.
Ngayon ay isang magandang panahon upang makagawa ng isang pangwakas na pagsubok, at pagkatapos, ang iyong HTML email ay handa na upang magpadala!
Upang kunin ang natutuhan mo sa susunod na lebel, tingnan ang susunod na mga pagtuturo:
