Email Marketing at AutomationMga Video sa Marketing at Benta

Pag-unawa sa Mga Hamon (At Pagkadismaya) ng HTML Email Design

Kung magbubukas ka ng isang sistema ng pamamahala ng nilalaman upang bumuo ng mga web page, ito ay isang medyo simpleng proseso. Sinusuportahan ng mga modernong web browser HTML, CSS, at JavaScript sa mahigpit na pamantayan sa web. At kakaunti lang sila ng mga browser na kailangang alalahanin ng mga designer. May mga pagbubukod, siyempre... at ilang simpleng workaround o function na partikular sa mga browser na iyon.

Dahil sa pangkalahatang mga pamantayan, diretsong bumuo ng mga tagabuo ng pahina sa mga sistema ng pamamahala ng nilalaman. Sumusunod ang mga browser sa HTML5, CSS, at JavaScript... at makakagawa ang mga developer ng mga hindi kapani-paniwalang mahusay na solusyon para gumawa ng mga web page na tumutugon sa mga device at pare-pareho sa mga browser. Dalawang dekada na ang nakalipas, halos lahat ng web designer ay gumagamit ng desktop software upang bumuo ng mga web page. Ngayon, medyo hindi karaniwan para sa isang web designer na bumuo ng isang web page – mas madalas kaysa sa hindi, sila ay bumubuo ng mga template at gumagamit ng mga editor sa mga system ng nilalaman upang punan ang nilalaman. Ang mga editor ng website ay hindi kapani-paniwala.

Ngunit ang mga editor ng email ay nasa likod. Narito kung bakit…

Ang Pagdidisenyo ng Mga HTML na Email ay Higit Na Kumplikado Kaysa Para sa Isang Website

Kung gusto ng iyong kumpanya ng magandang HTML na email na idinisenyo, ang proseso ay mas kumplikado kaysa sa pagbuo ng isang web page para sa ilang kadahilanan:

  • Walang Pamantayan – WALANG mahigpit na pagsunod sa mga pamantayan sa web ng mga email client na nagpapakita ng HTML na email. Halos bawat email client at bawat bersyon ng bawat email client ay kumikilos nang iba. Ang ilan ay pararangalan ang CSS, mga panlabas na font, at modernong HTML. Ang iba ay pinarangalan ang ilang inline na istilo, nagpapakita lamang ng isang koleksyon ng mga font, at binabalewala ang lahat maliban sa mga istrukturang batay sa talahanayan. Medyo katawa-tawa na walang gumagawa sa isyung ito. Bilang resulta, ang pagdidisenyo ng mga template na patuloy na nagre-render sa mga kliyente at device ay naging malaking negosyo at maaaring magastos.
  • Seguridad ng Email Client – Kamakailan, nag-update ang Apple Mail upang harangan ang lahat ng mga larawan sa mga HTML na email bilang default na hindi naka-embed sa email. Maaari kang magbigay ng pahintulot na i-load ang mga ito ng email nang paisa-isa o kailangang paganahin ang mga setting upang hindi paganahin ang setting na ito. Kasama ng mga setting ng seguridad ng email client, mayroon ding mga corporate setting.
  • Security ng IT – Maaaring mag-deploy ang iyong IT team ng mga mahigpit na ruleset sa kung anong mga object ang maaaring aktwal na i-render sa isang email. Kung ang iyong mga larawan, halimbawa, ay nagmula sa isang partikular na domain na hindi naka-whitelist sa isang corporate firewall, ang mga larawan ay hindi lalabas sa iyong email. Minsan, kinailangan naming bumuo ng mga email at i-host ang lahat ng larawan sa server ng korporasyon upang makita ng sarili nilang mga empleyado ang mga larawan.
  • Mga Nagbibigay ng Serbisyo sa Email – Para lumala pa, ang mga tagabuo ng email na mga nagbibigay ng serbisyo sa email (ESPs) aktwal na nagpapakilala ng mga problema sa halip na hadlangan ang mga ito. Habang pino-promote nila ang kanilang editor ay What You See Is What You Get (WYSIWYG), ang kabaligtaran ay kadalasang totoo sa disenyo ng email. I-preview mo ang email sa kanilang platform, at makikita ng tatanggap ang lahat ng problema sa disenyo. Ang mga kumpanya ay madalas na hindi sinasadyang pumili para sa isang editor na mayaman sa tampok sa halip na isang naka-lock, na iniisip na ang isa ay may mas maraming mga tampok. Ang kabaligtaran ay totoo... kung gusto mo ng mga email na pare-parehong nagre-render sa lahat ng email client, mas simple, mas mabuti, dahil mas kaunti ang maaaring magkamali.
  • Pag-render ng Email Client – Daan-daang mga email client ang nag-render ng HTML sa iba't ibang paraan sa mga desktop, app, mobile device, at webmail client. Bagama't ang iyong mahusay na text editor sa iyong email service provider ay maaaring may setting para maglagay ng heading sa iyong email, ang padding, margin, taas ng linya, at laki ng font ay maaaring mag-iba para sa bawat email client. Bilang resulta, kailangan mong gawing pipi ang HTML at i-code ang bawat solong elemento nang iba (tingnan ang halimbawa sa ibaba) - at madalas na magsulat sa mga pagbubukod na partikular sa email client - upang makakuha ng email na magre-render nang tuluy-tuloy. Walang simpleng mga uri ng block, kailangan mong gumawa ng mga layout na batay sa talahanayan na katumbas ng pagbuo para sa web tatlumpung taon na ang nakakaraan. Ito ang dahilan kung bakit ang anumang bagong layout ay nangangailangan ng parehong pag-develop at cross-email client at pagsubok ng device. Ang nakikita mo sa iyong inbox ay maaaring ibang-iba sa nakikita ko sa aking inbox. Iyon ang dahilan kung bakit tulad ng mga tool sa pag-render Email Sa Acid or Litmus ay kinakailangan upang matiyak na gumagana ang iyong mga bagong disenyo sa lahat ng mga email client. Narito ang isang maikling listahan ng mga sikat na email client at ang kanilang mga rendering engine:
    • Paggamit ng Apple Mail, Outlook para sa Mac, Android Mail at iOS Mail WebKit.
    • Paggamit ng Outlook 2000, 2002 at 2003 internet Explorer.
    • Paggamit ng Outlook 2007, 2010 at 2013 Microsoft Word (oo, Salita!).
    • Ginagamit ng mga kliyente ng webmail ang kani-kanilang engine ng kanilang browser (halimbawa, gumagamit ang Safari ng WebKit at gumagamit ang Chrome ng Blink).

Isang Halimbawa ng HTML para sa Web vs. Email

Kung gusto mo ng isang halimbawa na naglalarawan sa pagiging kumplikado ng pagdidisenyo sa email kumpara sa web, narito ang isang perpektong halimbawa mula sa artikulo ng Mailbakery 19 Malaking Pagkakaiba sa Pagitan ng Email at Web HTML:

Email HTML

Dapat tayong bumuo ng isang serye ng mga talahanayan na isinasama ang lahat ng inline na istilo na kinakailangan upang mailagay nang maayos ang button at matiyak na maganda ang hitsura nito sa mga email client. Ang isang kasamang tag ng istilo ay nasa itaas din ng email na ito upang isama ang mga klase.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

HTML web

Maaari naming gamitin ang isang panlabas na stylesheet na may mga klase para tukuyin ang case, alignment, kulay, at laki ng isang anchor tag na lalabas bilang isang button.

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

Paano Iwasan ang Mga Isyu sa Disenyo ng Email

Ang mga isyu sa disenyo ng email ay maiiwasan sa pamamagitan ng pagsunod sa isang disenteng proseso:

  1. Pagsubok sa Template – Ang pag-unawa sa mga email client na ginagamit ng iyong mga subscriber at pagtiyak na ang iyong HTML na email ay ganap na nasubok sa mobile at desktop ay kritikal bago mag-deploy ng anumang template. Maaari kaming magdisenyo ng isang email nang literal mula sa isang layout ng Photoshop... ngunit ang paghiwa at paghiwa nito sa isang table-driven, cross-email client ay mahalaga sa pag-deploy ng mga disenyo ng email na pinakamainam at pare-pareho.
  2. Panloob na Pagsusuri – Kapag ang iyong template ay idinisenyo at nasubok, dapat itong ipadala sa isang panloob na listahan ng binhi sa loob ng organisasyon upang suriin at aprubahan. Baka gusto mo pang magsimula sa isang napakalimitadong subset ng mga indibidwal upang matiyak munang walang firewall o mga isyu sa seguridad na nauugnay sa pag-render ng email sa loob. Kung bumubuo ito ng isang instance sa isang bagong service provider ng email, maaari ka ring makakita ng ilang mga isyu sa pag-filter o pag-block na nauugnay sa kahit na pagkuha ng iyong email sa inbox.
  3. Template Versioning – Huwag baguhin ang iyong mga layout o disenyo nang hindi gumagawa ng bagong bersyon ng iyong template na maaaring idisenyo, masuri nang maayos, at i-deploy. Gustung-gusto ng maraming negosyo ang mga one-off na disenyo para sa bawat campaign... ngunit nangangailangan iyon ng bawat email na idisenyo, binuo, at i-deploy para sa bawat campaign. Nagdaragdag ito ng isang toneladang oras sa panloob na proseso ng marketing sa email. At, nanganganib na hindi mo maunawaan kung anong mga elemento sa iyong email ang mahusay na gumaganap kaysa sa kung anong mga elemento ang hindi. Ang pagkakapare-pareho ay hindi lamang isang paraan upang gawing mas madali ang proseso, mahalaga din ito sa pag-uugali ng iyong mga subscriber.
  4. Mga Pagbubukod sa Email Service Provider – Halos bawat email service provider ay may paraan ng paglutas sa mga isyu na ipinakilala ng kanilang email builder. Madalas kaming makakapagdagdag ng raw CSS sa isang account – o kahit na magkaroon ng content block na kailangang isama sa bawat email – para magamit ng kumpanya ang built-in na email editor at hindi nito masira ang disenyo ng iyong email. Siyempre, maaaring mangailangan iyon ng ilang pagsasanay at kontrol sa proseso para i-deploy ang mga hakbang na iyon para matiyak na nasusunod ang mga ito. O – maaaring literal na gusto mo lang na bumuo ng iyong disenyo ng email sa isang solusyon na napatunayang gumagana sa mga kliyente at device, pagkatapos ay i-paste ito muli sa iyong email service provider.

Mga Platform ng Disenyo ng Email

Dahil ang mga platform ng serbisyo sa email ay gumawa ng hindi magandang trabaho sa pagbuo at pagpapanatili ng cross-client at cross-device na tuluy-tuloy na nai-render na mga builder, maraming mahuhusay na platform ang dumating sa merkado. Ang isa na madalas naming ginagamit ay Stripo.

Ang Stripo ay hindi lamang isang tagabuo ng email, mayroon din silang library ng higit sa 900 mga template na madaling ma-import. Sa sandaling idisenyo mo ang email, maaari mong ipadala ang email sa 60+ na ESP, at mga email client, kasama na Intuit Mailchimp, HubSpot, Kampanya Monitor, AWeber, eSputnik, Tanawan, at Gmail. Pinakamaganda sa lahat ng mga template ng Stripo ay may kasamang mga pagsubok sa pag-render ng email upang matiyak mong nasubok ang mga ito at tuluy-tuloy na gumagana sa mahigit 40 email client.

Mag-login Sa Demo ng Stripo Editor

Douglas Karr

Douglas Karr ay CMO ng OpenINSIGHTS at ang nagtatag ng Martech Zone. Nakatulong si Douglas sa dose-dosenang matagumpay na mga startup ng MarTech, tumulong sa angkop na pagsusumikap ng higit sa $5 bil sa mga pagkuha at pamumuhunan ng Martech, at patuloy na tinutulungan ang mga kumpanya sa pagpapatupad at pag-automate ng kanilang mga diskarte sa pagbebenta at marketing. Si Douglas ay isang kinikilalang internasyonal na digital na pagbabago at eksperto at tagapagsalita ng MarTech. Si Douglas ay isa ring nai-publish na may-akda ng isang Dummie's guide at isang business leadership book.

Kaugnay na Artikulo

Bumalik sa tuktok na pindutan
Pagsasara

Natukoy ang Adblock

Martech Zone ay kayang ibigay sa iyo ang nilalamang ito nang walang bayad dahil pinagkakakitaan namin ang aming site sa pamamagitan ng kita ng ad, mga link na kaakibat, at mga sponsorship. Ikinalulugod namin kung aalisin mo ang iyong ad blocker habang tinitingnan mo ang aming site.