Kutsatsa kwa Imelo & ZodzichitiraMakanema Otsatsa & Ogulitsa

Kumvetsetsa Zovuta (Ndi Zokhumudwitsa) za HTML Email Design

If you open up a content management system to build web pages, it’s a pretty simple process. Modern web browsers support HTML, CSS, and JavaScript to strict web standards. And they’re just a handful of browsers that designers need to worry about. There are exceptions, of course… and some simple workarounds or functions specific to those browsers.

Because of the overall standards, it’s straightforward to develop page builders in content management systems. Browsers comply with HTML5, CSS, and JavaScript… and developers can build incredibly robust solutions to create web pages that are responsive to devices and consistent across browsers. Two decades ago, virtually every web designer used desktop software to develop web pages. Now, it’s pretty uncommon for a web designer to develop a web page – more often than not, they’re developing templates and using editors in content systems to fill in the content. Website editors are fantastic.

Koma okonza maimelo ali m'mbuyo momvetsa chisoni. Chifukwa chake…

Kupanga Maimelo a HTML Ndikovuta Kwambiri Kuposa Webusaiti

If your company wants a beautiful HTML email designed, the process is exponentially more complex than building out a web page for several reasons:

  • Palibe Miyezo – There is NO strict adherence to web standards by email clients that display HTML email. Virtually every email client and every version of every email client acts differently. Some will honor CSS, external fonts, and modern HTML. Others honor some inline styling, only display a collection of fonts, and ignore everything but table-driven structures. It’s quite ridiculous that no one is working on this issue. As a result, designing templates that render across clients and devices consistently has become big business and can be quite expensive.
  • Imelo Client Security – Recently, Apple Mail updated to block all images in HTML emails by default that are not embedded in the email. You either give permission to load them an email at a time or have to enable the settings to disable this setting. Along with email client security settings, there are also corporate settings.
  • Chitetezo cha IT - Gulu lanu la IT litha kuyika malamulo okhwima pazomwe zinthu zitha kuperekedwa mu imelo. Ngati zithunzi zanu, mwachitsanzo, zikuchokera kudera linalake lomwe silinalembetsedwe pazowotcha zamakampani, zithunzi sizimawonekera mu imelo yanu. Nthawi zina, tinkachita kupanga maimelo ndikuyika zithunzi zonse pa seva yakampani kuti antchito awo aziwona zithunzizo.
  • Opereka Maimelo - Kuti zinthu ziipireipire, omanga maimelo omwe amatumiza maimelo (ESPs) actually introduce problems rather than constrain them. While they promote their editor is What You See Is What You Get (WYSIWYG), the opposite is often true with email design. You’ll preview the email in their platform, and the recipient will see all the design problems. Companies often unknowingly opt for a feature-rich editor instead of a locked-down one, thinking one has more features. The opposite is true… if you want emails that render consistently across all email clients, the simpler, the better, because less can go wrong.
  • Kupereka kwa Makasitomala a Imelo – Hundreds of email clients render HTML differently across desktops, apps, mobile devices, and webmail clients. While your nifty text editor on your email service provider may have a setting to put a heading in your email, the padding, margins, line height, and font size may differ for every email client. As a result, you have to dumb down the HTML and code every single element differently (see the example below) – and often write in exceptions that are email client-specific – to get an email to render consistently. There’s no simple block types, you have to do table-driven layouts that are the equivalent of building for the web thirty years ago. It’s why any new layout requires both development and cross-email client and device testing. What you see in your inbox may be totally different what I see in my inbox. That’s why rendering tools like Imelo Pa Acid or Litmus ndizofunikira kuonetsetsa kuti mapangidwe anu atsopano akugwira ntchito pa makasitomala onse a imelo. Nawu mndandanda wachidule wamakasitomala otchuka a imelo ndi makina awo operekera:
    • Apple Mail, Outlook for Mac, Android Mail ndi iOS Mail ntchito WebKit.
    • Outlook 2000, 2002 ndi 2003 ntchito Internet Explorer.
    • Outlook 2007, 2010 ndi 2013 ntchito Microsoft Word (Inde, Mawu!).
    • Makasitomala a Webmail amagwiritsa ntchito injini ya msakatuli wawo (mwachitsanzo, Safari imagwiritsa ntchito WebKit ndipo Chrome imagwiritsa ntchito Blink).

Chitsanzo cha HTML cha Web Vs. Imelo

Ngati mukufuna chitsanzo chomwe chikuwonetsa zovuta zopanga maimelo motsutsana ndi intaneti, nachi chitsanzo chabwino kwambiri chochokera m'nkhani ya Mailbakery. 19 Kusiyana Kwakukulu Pakati pa Imelo ndi Web HTML:

Email HTML

We must build a series of tables incorporating all the inline styling necessary to place the button properly and ensure it looks good across email clients. An accompanying style tag will also be at the top of this email to incorporate the classes.

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

Web HTML

Titha kugwiritsa ntchito sitayilo yakunja yokhala ndi makalasi kuti titanthauzire vuto, kulinganiza, mtundu, ndi kukula kwa tag ya nangula yomwe imawoneka ngati batani.

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

Momwe Mungapewere Nkhani Zopanga Maimelo

Nkhani zopanga maimelo zitha kupewedwa potsatira njira yabwino:

  1. Kuyesa Ma template – Understanding the email clients your subscribers utilize and ensuring that your HTML email is fully tested across mobile and desktop is critical before deploying any template. We can design an email literally from a Photoshop layout… but slicing and dicing it into a table-driven, cross-email client is essential to deploying email designs that are optimal and consistent.
  2. Kuyesa Kwamkati - Tsamba lanu likapangidwa ndikuyesedwa, liyenera kutumizidwa pamndandanda wambewu zamkati m'bungwe kuti liwunikenso ndikuvomereza. Mwinanso mungafune kuyamba ndi kagulu kakang'ono ka anthu kuti muwonetsetse kuti palibe zozimitsa moto kapena zovuta zachitetezo zomwe zimakhudzana ndi kutumiza imelo mkati. Ngati izi zikupanga chitsanzo pa wopereka maimelo atsopano, mutha kupezanso zosefera kapena kutsekereza zovuta zomwe zimakhudzana ndi kutumiza imelo yanu ku bokosi lolowera.
  3. Kusintha kwa Template - Osasintha masanjidwe anu kapena mapangidwe anu osagwiritsa ntchito mtundu watsopano wa template womwe ungathe kupangidwa, kuyesedwa moyenera, ndi kutumizidwa. Mabizinesi ambiri amakonda mapangidwe amodzi pa kampeni iliyonse… Izi zimawonjezera nthawi yochuluka ku malonda a imelo mkati. Ndipo, mumakhala pachiwopsezo chosamvetsetsa zomwe imelo yanu ikuchita bwino kuposa zomwe sizili. Kusasinthika si njira yokhayo yopangira kuti ntchitoyi ikhale yosavuta, ndikofunikiranso pamakhalidwe a olembetsa anu.
  4. Kupatulapo Opereka Utumiki wa Imelo - Pafupifupi aliyense wopereka maimelo ali ndi njira yogwirira ntchito pazinthu zomwe omanga maimelo awo amayambitsa. Nthawi zambiri timatha kuwonjezera CSS yaiwisi ku akaunti - kapena kukhala ndi cholembera chomwe chiyenera kuphatikizidwa mu imelo iliyonse - kuti kampaniyo igwiritse ntchito imelo yolembera ndikusasokoneza kapangidwe ka imelo yanu. Zachidziwikire, izi zingafunike kuphunzitsidwa ndi kuwongolera njira kuti agwiritse ntchito njirazo kuti zitsimikizire kuti zikutsatiridwa. Kapena - mungangofuna kupanga mapangidwe anu a imelo mu njira yomwe imatsimikiziridwa kuti imagwira ntchito pamakasitomala ndi zida zonse, ndikuyiyikanso kwa omwe akukupatsani imelo.

Mapulatifomu Opangira Imelo

Chifukwa nsanja zotumizira maimelo sizinagwire bwino ntchito pakumanga ndi kusunga makasitomala ndi zida zosiyanasiyana zomwe zimaperekedwa nthawi zonse, nsanja zingapo zazikulu zabwera pamsika. Imodzi yomwe tagwiritsa ntchito kwambiri ndi Stripo.

Stripo sikuti amangopanga maimelo, alinso ndi laibulale ya ma templates opitilira 900 omwe amatha kutumizidwa kunja mosavuta. Mukapanga imelo, mutha kutumiza imelo ku 60+ ESPs, ndi makasitomala a imelo, kuphatikiza Intuit Mailchimp, HubSpot, Pulogalamu Yamakono, AWeber, eSputnik, Chiyembekezondipo Gmail. Best of all Stripo templates come with the email rendering tests included so you can ensure they’ve been tested and work consistently across over 40 email clients.

Lowani ku Chiwonetsero cha Stripo Editor

Douglas Karr

Douglas Karr ndi CMO OpenINSIGHTS ndi woyambitsa wa Martech Zone. Douglas wathandizira oyambitsa ambiri opambana a MarTech, wathandizira kulimbikira kopitilira $ 5 bil pakugula ndi kuyika kwa Martech, ndipo akupitiliza kuthandiza makampani kukhazikitsa ndikusintha njira zawo zogulitsa ndi zotsatsa. Douglas ndi katswiri wodziwika padziko lonse lapansi wosinthira digito komanso katswiri komanso wokamba nkhani wa MarTech. Douglas ndi mlembi wofalitsidwa wa kalozera wa Dummie komanso buku la utsogoleri wabizinesi.

Nkhani

Bwererani pamwamba
Close

Adblock yapezeka

Martech Zone imatha kukupatsirani izi popanda mtengo chifukwa timapanga ndalama patsamba lathu kudzera muzotsatsa, maulalo ogwirizana, komanso kuthandizira. Tingayamikire ngati mungachotse choletsa ad mukamawona tsamba lathu.