Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)
Sa pagtuturong ito ipapakita ko kung papaano gumawa ng simpleng responsive HTML email na gagana sa bawat email ng kliyente, kasama na ang mga bagong smartphone na email clients apps. Gumagamit ito ng kaunting media queries at fluid width na ideya para masigurado ang compatibility nito.
Media Queries: Kalahati Lang sa Solusyon
Noon ang media queries ay medyo sapat na para makakuha ng responsive emails na gumagana sa iOS at Android mail applications, pareho ay gumagana sa media queries.
Simula noon, dumami ang mail applications na ginawa para sa iOS at Android, na may iba ibang antas ng support para sa responsive email development na paraan.
Ang pinakasikat ay ang bagong update sa Gmail app para sa Android, na doble pa sa popularidad sa dati ng mail app para sa mga gumagamit ng Android(na sa ngayon ay bumubuo ng 11% ng kabuuang opens). Kahit kailan ay hindi ito gumana sa media queries, at magpahanggang ngayon, subalit pinapaliit nito ang sukat ng iyong email sa pamamagitan ng pagkasya ng sukat ng outer table sa loob ng viewable area ng screen. Mahirap itong i-kontrol at, at kapag nakasalalay ang buong email mo sa media queries para lumabas ng maayos sa mobile, nagkakaroon ito ng hindi magandang resulta.
Bakit ang Fluid ang Patok
Ang magandang balita ay maaari ka ng mag-disenyo at gumawa ng email na lalabas na maganda sa bawat mail app, pati na iyong hindi gumagana sa media queries. Magagawa mo ito sa pamamagitan ng pag gamit ng fluid layout.
Subalit, mayroong ibang desenyo na dapat ikaw ang gagawa. Iyong magandang pantay na column layouts na nakasalansan sa isang hilera ay hindi gumaganda sa pamamaraang ito. Kung kaya mong hindi gamitin ang mga ito, may iba pang mas magandang disenyo na gagana.
Narito ang gagawin namin ngayon:
Para Simulan Ito
Okay, simulan natin sa walang laman na canvas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Simple Responsive HTML Email</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
</style>
</head>
<body yahoo bgcolor="#f6f8f1">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> Ang
gagawin natin dito ay ang pangunahing pahina na may header, doctype at
container table na may itim na background na nilagay(pareho sa body at big
wrapper trable, dahil ang pagi-istilo ng body tag ay hindi gaanong gumagana). Para
sa karagdagang impormasyon sa pangunahing setup, tingnan ang Build an HTML
Email Template from Scratch.
Idinagdag ko ang pangunahing content table sa gitna na may class ng ‘content’.
Tandaan
Paalala: Mapapansin mo sa pagtuturong ito na ilalagay ko ang CSS sa ulo ng dokumento. Naglagay ako ng istilo sa ulo ng dokumento kapag gagamitin ko uli ito, at gumawa ng one-off styles inline.
Mahalaga:Kapag gagamit ka ng CSS rules
sa ulo ng iyong dokumento, kailangan mong gumamit ng tool para gagana ito sa inline
pagkatapos ng proseso. Kapag gagamit ka ng MailChimp o Campaign
Monitor, ang mga ito ay awtomatikong magmumungkahi para sa iyong styles inline
kapag inimport mo ang iyong disenyo. Kailangan mo itong gawin dahil ang ibang
kliyente, katulad ng Gmail, ay hindi papansinin o tatanggalin ang laman ng
iyong tag <style>, o hindi papansinin ang mga ito. Maaari ka ring gumamit ng tool katulad
ng Premailer para paganahin ang iyong CSS inline. Kapag gagamit ka ng Premailer o
kaparehong tool, alalahaning alisin ang iyong media queries bago ang
proseso(dahil gusto naming mapanatili itong nasa orihinal na porma ), tapos
ipasok uli ito sa dulo. Ang MailChimp at Campaign Monitor ang
bahala sa iyo dito.
Pagtago ng Istilo sa Mobile sa Yahoo!
Mapapansin mo na ang body tag ay may karagdagang katangian. Ang Yahoo mail ay madalas ipakita na ang media queries ay parang ebanghelyo, kung kaya para maiwasan ito, kailangan mong gumamit ng attribute selectors. Ang pinakamabilis na paraan para gawin ito para sa akin(bilang mungkahi ng Email on Acid) ay sa simpleng pagdagdag ng arbitrary attribute sa body tag. Ginagamit ko ang mungkahi ng ‘yahoo’ subalit maari ang kahit na anong gusto mo:
<body yahoo>
Maari mong gamitin ang natatanging class sa pamamagitan ng pag gamit ng attribute selector para sa iyong body tag sa CSS.
body[yahoo] .class {} Dalawang Istilo Para Ma-Perpekto ang Fluid Method
Makikita mo, ang ating ‘content’ table ay naka-set sa 100% na lawak para maging fluid ito at masakop ang lapad ng mga screens ng smartphone at tablet. Ilalagay din natin sa maxim na lapad na 600px para maiwasan ang pagsakop ng kabuuang screen ng email sa malaking devices.
Mayroon ng dalawang medyo nakakalito na bagay na kailangan natin bigyan ng atensyon para masigurado na lahat ay lalabas ayon sa plano sa lahat ng email clients. Ang dalawang pagaayos ay salamat sa magaling na pagtuturo ni Tina Ye sa pamamaraang ito na makikita sa FogCreekBlog.
1. Solusyon sa Kawalan ng Max-Width Support
Sa kasamaang-palad,ang max-width ay
hindi gumagana sa email clients. Para lumabas ng maayos ang iyong email
sa Outlook at Lotus Notes 8 & 8.5, kailangan nating i-wrap ang bawat table
sa conditional code na gagawa ng table na may naka set na lapad para masakop
lahat. Tinatarget nito ang IE(na rendering
engine na gamit ng Lotus Notes) at Microsoft Outlook.
Ira-wrap natin ang table sa conditional code:
<!--[if (gte mso 9)|(IE)]> <table width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="content" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> Hello! </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
2. Pag-aayos Para sa Apple Mail
Kakaiba, ang Apple Mail (kadalasan ay hindi pumapalya na email client) ay hindi rin gumagana sa max-width property. Bagaman hindi ito gumagana sa media queries, maari tayong magdagdag ng isa na magsasabi dito na maglagay ng lapad sa ating ‘content’ class table, basta ang viewport ay ilalabas ang buong 600px.
<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style> Paggawa ng Header
Ngayon idadagdag natin ang unang hilera sa table — ang header. Idagdag ang mga istilong ito sa hilera na nagawa na natin:
<td class="header" bgcolor="#c7d8a7"> Hello! </td>
At sa iyong CSS, idagdag ang padding para sa header:
.header {padding: 40px 30px 20px 30px;} Pagdagdag ng Unang Responsive na Hilera
Ngayon gagawa tayo ng unangunang responsive na hilera. Ang paraan para gawin ito ay gumawa ng dalawang tables na ‘lulutang’ kasunod sa bawat isa sa pamamagitan ng pag gamit ng ‘align’ HTML property.
Pangalawang Hanay
Palitan ang ating maliit na "Hello!" Pagbati sa mga sumusunod:
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="70" style="padding: 0 20px 20px 0;"> <img src="images/icon.gif" width="70" height="70" border="0" alt="" / > </td> </tr> </table>
Gagawin natin ang 70px table at magdadagdag din ng padding na magsisilbing gutter sa gitna ng dalawang hanay. Ang padding sa ilalim ay maglalagay ng patayong espasyo kapag ang dalawang hanay ay nasalansan sa mobile.
Kanang Hanay
Gagawa tayo ng kanang hanay sa pamamagitan ng paghilera uli ng table kaliwa. Ang table na ito ay magiging 445px ang lawak, kung saan mayroon pa tayong natitirang 25px sa kanang banda. Napakahalaga nito dahil an Outlook ay awtomatikong sasalansanin ang iyong tables kapag walang kahit papaano ay 25px na nakalaan sa kahit na anong hilera.
Hanggat may inilaan kang kahit papaano 25px na espasyo, ang iyong table ay gagano ng naaayon sa inaasahan.
Tigil! Alternatibong Maiksing Paraan Para Lituhin ang Outlook
Para magawa ang katangiang ito, maari mo ring gamitin ang conditional code para lituhin ang Outlook sa pag-aakalang may isinira kang cell at nagbukas ng panibago. Pagkatapos ng closing tag ng iyong unang table, at bago ang opening tag para sa pangalawa, ilagay ito:
<!--[if mso]> </td><td> <![endif]-->
Ituloy lang…
Sa mas malawak, bandang kanan na table, gagamitin natin ang parehong paraan na ginamit natin sa ating container table, na naglalaman ng paggawa ng class at paglalagay din ng conditional wrapper code. Gusto nating gawin ang table na 100% ang lapad sa mobile, kung saan magpa-pop down ito sa ilalim ng table sa bandang kaliwa.
<!--[if (gte mso 9)|(IE)]> <table width="425" align="left" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">style="width: 100%; max-width: 425px;"> <tr> <td height="70"> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
Dito makikita niyo na gumawa ako ng class na tinawag na 'col425' para sa table na ito, ang 425px na lapad ng hanay. Ini-wrap ko ang table sa conditional code kung saan ipapaloob ito sa 425px na lapad ng table. Idagdag natin ang class sa Media Query na ginawa din natin para sa Apple Mail.
.col425 {width: 425px!important;} Ngayon sa loob ng ating cell idagdag natin ang heading na may istilo.
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="subhead" style="padding: 0 0 0 3px;"> CREATING </td> </tr> <tr> <td class="h1" style="padding: 5px 0 0 0;"> Responsive Email Magic </td> </tr> </table>
Nagdagdag ako ng ibang classes sa bawat cell para magawan ng istilo, at saka ibang istilo na gagamitin ko sa ibang uri ng text sa susunod:
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;} Ang header natin ay tapos na, at makikita mo sa ibaba kung papaano ang dalawang hanay ay nakasalansan sa mobile. Para makita muna bago mo ito gawin, kailangan mong pansamantalang i-comment out ang min-device-width media queries, dahil inuubliga nito ang saktong lapad sa desktop).
Paggawa ng Isang Hanay na Text Row
Para gumawa ng isang hanay na text row, magdagdag lamang ng bagong hilera sa ating ‘content’ table. Magdadagdag tayo ng ‘innerpadding’ class sa mga hilera na ito na may ilang magagamit pa na padding values. Maglalagay din tayo ng class ng ‘borderbottom’ para makapaglagay ng border sa bawat hilera.
<tr> <td class="innerpadding borderbottom"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="h2"> Welcome to our responsive email! </td> </tr> <tr> <td class="bodycopy"> 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. </td> </tr> </table> </td> </tr>
Ang ating CSS para sa bahaging ito:
.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;} Paggawa ng Dalawang Hanay na Artikulo
Ngayon gagawa tayo ng responsive na hilera eksaktong katulad ng ating header, subalit may konting pagkakaiba sa sukat para magkaroon ng mas malaking imahe.
<tr>
<td class="innerpadding borderbottom">
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" style="padding: 0 20px 20px 0;">
<img src="images/article1.png" width="115" height="115" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bodycopy">
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.
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#e05443" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45">
<a href="#">Claim yours!</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr> Nagdagdag tayo ng button dito na may class ‘buttonwrapper’. Naglalaman ito ng padded cell na may set ng kulay ng background, at ng text link sa loob. Mas pipiliin ko ang paraang ito dahil magagawi mong magkaroon ng fluid width buttons na makakatulong kapag gagawa ng reusable na template, kung saan ang lapad ng bawat button ay magiiba sa bawat gamit nito. Kung mayroon ka ng dati pang naka-set na width para sa iyong buttons maari mong piliing gamitin ang Bulletproof Button Generator kesa sa Campaign Monitor.
Ang istilo natin para sa button:
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;} Bukod sa ating naka set na lapad para dito sa bagong class ‘col380’, idadagdag din natin ang sukat sa ating listahan ng mga istilo para mapangalagaan ang Apple Mail. Ganito na ang itsura:
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
} 
Paggawa ng Isang Hanay na Imahe
Ito ay napakasimpleng hilera; isi-set lamang natin ang imahe sa 100% na lapad ng email at siguraduhing ang taas nito ay naka-set sa awtomatik gamit ang CSS.
<tr> <td class="innerpadding borderbottom"> <img src="images/wide.png" width="100%" border="0" alt="" /> </td> </tr>
Sa ating CSS:
img {height: auto;} Paggawa ng Panghuling Plain Text Row
Panghuli magdadagdag tayo ng hilera ng text na walang border sa baba:
<tr> <td class="innerpadding borderbottom"> 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. </td> </tr>
Paggawa ng Footer
Para gumawa ng footer, magdadagdag tayo ng bagong hilera na may table sa loob. Isa sa mga hilera ay maglalaman ng ibang table para sa ating social media icons.
<tr> <td class="footer" bgcolor="#44525f"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" class="footercopy"> &reg; Someone, somewhere 2013<br/> <a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly </td> </tr> <tr> <td align="center" style="padding: 20px 0 0 0;"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="37" style="text-align: center; padding: 0 10px 0 10px;"> <a href="http://www.facebook.com/"> <img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" /> </a> </td> <td width="37" style="text-align: center; padding: 0 10px 0 10px;"> <a href="http://www.twitter.com/"> <img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" /> </a> </td> </tr> </table> </td> </tr> </table> </td> </tr>
Magdadagdag tayo ng requisite na istilo para sa ating footer sa CSS:
.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;} Samantalahin ang mga Buttons Para sa Mobile
Sa mobile, mas maganda kung ang buong
button ay link, hindi lang ang text, dahil mas mahirap pindutin ang maliit na
text link gamit ang kamay. Dahil hindi possible na gagana ito sa
iyong desktop clients (ang padding ay hindi gumagana ng lubusan sa <a> tags),ito ay isangbagay na idinagdag ko sa bersyon ng mobile gamit ang media queries.
Kailangan nating alisin ang kulay sa <td> kung saan ito ay kasalukuyang nakalagay, at ibalik uli ito sa <a> tag kasama ng maraming padding.
Gagamitin ko pareho max-width at max-device-width sa media
query na ito para maiwasan ang bug sa Outlook.com on IE9.
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body[yahoo] .buttonwrapper {background-color: transparent!important;}
body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;}
} Ngayon kapag pumindot ka kahit saan sa may kulay na button sa mobile, ito ay link!
Karagdagan Para Mas Mapaganda ang Media Queries
Kung gusto mo, maaari ka ng gumawa ng karagdagang paraan para mas mapaganda sa iyong layout sa mapapagitan ng paglagay ng pangalan sa class sa mga bahagi na nais mong i-kontrol, at paggawa ng bagong tuntunin sa loob ng media query na kakagawa lang natin sa itaas.
Bilang halimbawa, gagawin natin ang unsubscribe link na button, sa pamamagitan ng pagdagdag ng class sa link:
<a href="#" class="unsubscribe"> <font color="#ffffff">Unsubscribe</font> </a> <span class="hide">from this newsletter instantly</span>
At idaragdag ang sumusunod na CSS sa query sa media:
body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;} body[yahoo] .hide {display: none!important;} 
Maaari mo ring piliin ang .innerpadding,.header at .footer classes para mabawasan ang bilang ng padding sa kliyente gumagamit ng media queries.
Subukan at Gawin na Ito!
Bilang pangwakas,palaging siguraduhin na nasusuri ito (gamit ang W3C validator — dapat may isa lamang na error sa proprietary ‘yahoo’ attribute sa body tag) at suriing mabuti gamit ang live na mga gamit at web preview na serbisyo katulad ng Litmus o Email on Acid.
Magsaya sa paggawa ng responsive emails na magmumukhang maganda sa bawat email client!
Para magamit ang natututunan ng mas higit pa, tingnan ang susunod na pagtuturo:
