Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design

Paggawa ng Simpleng Responsive HTML Email

by
Length:LongLanguages:

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:

Final-Product-Both

Para Simulan Ito

Okay, simulan natin sa walang laman na canvas.

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:

Maari mong gamitin ang natatanging class sa pamamagitan ng pag gamit ng attribute selector para sa iyong body tag sa CSS.

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:

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.

Paggawa ng Header

 Ngayon idadagdag natin ang unang hilera sa table — ang header. Idagdag ang mga istilong ito sa hilera na nagawa na natin:

At sa iyong CSS, idagdag ang padding para sa header:

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:

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.

Responsive-AlignedTables

Hanggat may inilaan kang kahit papaano 25px na espasyo, ang iyong table ay gagano ng naaayon sa inaasahan.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
Maglaan kahit papano ng 25px na espasyo para tumigil ang Outlook sa pagsalansan ng iyong tables

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:


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.

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.

Ngayon sa loob ng ating cell idagdag natin ang heading na may istilo.

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:

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).

01-header

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.

Ang ating CSS para sa bahaging ito:

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.

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:

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:

Email-TwoCol

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.

Sa ating CSS:

Paggawa ng Panghuling Plain Text Row

Panghuli magdadagdag tayo ng hilera ng text na walang border sa baba:

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.

Magdadagdag tayo ng requisite na istilo para sa ating footer sa CSS:

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.

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:

At idaragdag ang sumusunod na CSS sa query sa media:

Email-Footer-MQs

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:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.