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

Bumuo ng HTML Email Template Mula mula sa Scratch

by
Length:LongLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Final product image
What You'll Be Creating

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. 

Ngayon, tulad ng ating tinalakay sa nakaraang pagtuturo, kakailanganin mong simulan ang iyong HTML na dokumento sa isang XHTML na doctype:

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

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:

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.

2

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.

3

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.

4

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 &nbsp; sa loob at bigyan ito ng isang diretsong taas o lapad. Narito ang isang halimbawa:

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.

6

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.

7

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.

8

Ngayon ay idagdag natin sa ating nilalaman, at magdagdag ng ilang padding sa gitnang cell.

9

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 &nbsp; 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".

10

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.

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.

13

Ang Footer

Ngayon ay idagdag natin ang ating padding sa hanay ng footer.

14

Sa loob ng linyang iyon, maghihintay tayo ng isa pang table upang makuha ang ating dalawang haligi.

15

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.

17

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

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.

email-build-valid

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:

email-build-litmus
Tingnan ang nasa online

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.

Atin ding idagdag ang inline na estilo sa lahat ng iba pang mga cell ng teksto:

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.

20

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"

21

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:

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.

23

At iyan!  Ikaw ay handa na para sa huling pagsubok.

email-build-litmus-finished
Tingnan ang nasa online

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:

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.