E-mail marketing i automatizacijaVideo za marketing i prodaju

Razumijevanje izazova (i frustracija) HTML dizajna e-pošte

Ako otvorite sistem za upravljanje sadržajem da biste napravili web stranice, to je prilično jednostavan proces. Podržavaju moderne web pretraživače HTML, CSS, i JavaScript prema strogim web standardima. A oni su samo nekoliko pretraživača o kojima dizajneri treba da brinu. Postoje izuzeci, naravno... i neka jednostavna rješenja ili funkcije specifične za te pretraživače.

Zbog opštih standarda, jednostavno je razviti graditelje stranica u sistemima za upravljanje sadržajem. Pretraživači su usklađeni sa HTML5, CSS i JavaScript… i programeri mogu izgraditi nevjerovatno robusna rješenja za kreiranje web stranica koje odgovaraju uređajima i konzistentne u svim pretraživačima. Prije dvije decenije, gotovo svaki web dizajner koristio je desktop softver za razvoj web stranica. Sada je prilično neuobičajeno da web dizajner razvija web stranicu – češće nego ne, oni razvijaju šablone i koriste uređivače u sistemima sadržaja za popunjavanje sadržaja. Urednici web stranica su fantastični.

Ali urednici e-pošte užasno zaostaju. Evo zašto…

Dizajniranje HTML e-poruka je daleko složenije nego za web stranicu

Ako vaša kompanija želi dizajniran prekrasan HTML e-mail, proces je eksponencijalno složeniji od izrade web stranice iz nekoliko razloga:

  • Bez standarda – NEMA striktno pridržavanje web standarda od strane klijenata e-pošte koji prikazuju HTML e-poštu. Gotovo svaki klijent e-pošte i svaka verzija svakog klijenta e-pošte djeluje drugačije. Neki će poštovati CSS, eksterne fontove i moderni HTML. Drugi poštuju neki inline stil, prikazuju samo kolekciju fontova i zanemaruju sve osim struktura vođenih tablicama. Prilično je smiješno da niko ne radi na ovom pitanju. Kao rezultat toga, dizajniranje predložaka koji se dosljedno renderiraju na klijentima i uređajima postalo je veliki posao i može biti prilično skupo.
  • Sigurnost klijenta e-pošte – Nedavno je Apple Mail ažuriran da blokira sve slike u HTML e-porukama prema zadanim postavkama koje nisu ugrađene u e-poštu. Ili date dozvolu da im učitate e-poštu odjednom ili morate omogućiti postavke da biste onemogućili ovu postavku. Pored sigurnosnih postavki klijenta e-pošte, postoje i korporativne postavke.
  • IT sigurnost – Vaš IT tim može primijeniti stroge skupove pravila o tome koji objekti se zapravo mogu prikazati u e-poruci. Ako vaše slike, na primjer, dolaze sa određene domene koja nije na bijeloj listi u korporativnom firewall-u, slike se jednostavno neće pojaviti u vašoj e-pošti. Ponekad smo morali da razvijemo e-poštu i da sve slike ugostimo na serveru korporacije kako bi njihovi zaposleni mogli da vide slike.
  • Dobavljači usluga e-pošte – Da stvar bude još gora, kreatori e-pošte koji pružaoci usluga e-pošte (ESPs) zapravo uvode probleme umjesto da ih ograničavaju. Iako promovišu njihov urednik je ono što vidite je ono što dobijate (WYSIWYG), suprotno je često istina sa dizajnom e-pošte. Pregledat ćete e-poštu na njihovoj platformi, a primalac će vidjeti sve probleme s dizajnom. Kompanije se često nesvjesno odlučuju za uređivač bogat funkcijama umjesto zaključanog, misleći da ima više funkcija. Istina je upravo suprotno… ako želite e-poruke koje se dosljedno prikazuju na svim klijentima e-pošte, što jednostavnije, to bolje, jer manje može poći po zlu.
  • Renderiranje klijenta e-pošte – Stotine klijenata e-pošte različito prikazuju HTML na stolnim računarima, aplikacijama, mobilnim uređajima i klijentima web pošte. Dok vaš elegantni uređivač teksta na vašem dobavljaču usluga e-pošte može imati postavku za postavljanje naslova u vašu e-poštu, dopuna, margine, visina reda i veličina fonta mogu se razlikovati za svaki klijent e-pošte. Kao rezultat toga, morate zaglupiti HTML i kodirati svaki pojedinačni element na drugačiji način (pogledajte primjer ispod) – i često pisati u izuzecima koji su specifični za klijenta e-pošte – da biste dobili e-poštu za dosljedno prikazivanje. Ne postoje jednostavni tipovi blokova, morate raditi rasporede vođene tablicama koji su ekvivalentni izgradnji za web prije trideset godina. Zbog toga svaki novi izgled zahtijeva i razvoj i testiranje klijenta i uređaja unakrsne e-pošte. Ono što vidite u prijemnom sandučetu može biti potpuno drugačije od onoga što ja vidim u inboxu. Zato su alati za renderiranje poput E-mail o kiselini or lakmus su neophodni kako biste osigurali da vaši novi dizajni funkcioniraju na svim klijentima e-pošte. Evo kratke liste popularnih klijenata e-pošte i njihovih mehanizama za renderiranje:
    • Koristi Apple Mail, Outlook za Mac, Android Mail i iOS Mail WebKit.
    • Outlook 2000, 2002 i 2003 koriste Internet Explorer.
    • Outlook 2007, 2010 i 2013 koriste Microsoft Word (da, Word!).
    • Webmail klijenti koriste odgovarajući mehanizam svog pretraživača (na primjer, Safari koristi WebKit, a Chrome koristi Blink).

Primjer HTML-a za web vs. Email

Ako želite primjer koji ilustrira složenost dizajna u e-pošti u odnosu na web, evo savršenog primjera iz članka Mailbakery-a 19 velikih razlika između e-pošte i web HTML-a:

Pošaljite HTML e-mail

Moramo napraviti niz tabela koje uključuju sav ugrađeni stil koji je neophodan za pravilno postavljanje dugmeta i osiguranje da izgleda dobro na klijentima e-pošte. Prateća oznaka stila također će biti na vrhu ove e-poruke kako bi se uključili predmeti.

<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

Možemo koristiti eksternu tablicu stilova sa klasama za definiranje velikih i malih slova, poravnanja, boje i veličine sidrene oznake koja se pojavljuje kao gumb.

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

Kako izbjeći probleme sa dizajnom e-pošte

Problemi s dizajnom e-pošte mogu se izbjeći slijedeći pristojan proces:

  1. Testiranje predložaka – Razumijevanje klijenata e-pošte koje vaši pretplatnici koriste i osiguravanje da je vaša HTML e-pošta u potpunosti testirana na mobilnim i desktop računarima je ključna prije implementacije bilo kojeg predloška. Možemo dizajnirati e-poruku doslovno iz Photoshop izgleda… ali njeno rezanje i isjeckanje u tabelarni klijent za unakrsnu e-poštu je od suštinskog značaja za implementaciju dizajna e-pošte koji je optimalan i dosljedan.
  2. Interno testiranje – Nakon što je vaš predložak dizajniran i testiran, treba ga poslati na internu početnu listu unutar organizacije na pregled i odobrenje. Možda ćete čak htjeti početi s vrlo ograničenom podgrupom pojedinaca kako biste prvo osigurali da nema zaštitnih zidova ili sigurnosnih problema povezanih s internim prikazivanjem e-pošte. Ako ovo stvara instancu na novom provajderu usluge e-pošte, možda ćete čak pronaći neke probleme s filtriranjem ili blokiranjem koji su povezani čak i s dolaskom vaše e-pošte u inbox.
  3. Predložak Versioning – Nemojte mijenjati svoje izglede ili dizajne bez rada na novoj verziji vašeg predloška koji se može dizajnirati, pravilno testirati i implementirati. Mnoga preduzeća vole jednokratne dizajne za svaku kampanju... ali to zahtijeva da svaki email bude dizajniran, razvijen i implementiran za svaku kampanju. Ovo dodaje tonu vremena internom procesu email marketinga. I rizikujete da ne shvatite koji elementi u vašoj e-pošti imaju dobar učinak u odnosu na elemente koji nisu. Dosljednost nije samo način da olakšate proces, već je važna i za ponašanje vaših pretplatnika.
  4. Izuzeci dobavljača usluga e-pošte – Praktično svaki provajder usluga e-pošte ima sredstva za rješavanje problema koje uvodi njihov program za izradu e-pošte. Često možemo dodati sirovi CSS na nalog – ili čak imati blok sadržaja koji mora biti uključen u svaku e-poštu – kako bi kompanija koristila ugrađeni uređivač e-pošte i ne bi dozvolila da on razbije dizajn vaše e-pošte. Naravno, to može zahtijevati određenu obuku i kontrolu procesa kako bi se ti koraci implementirali kako bi se osiguralo da se poštuju. Ili – možete doslovno samo poželjeti da razvijete svoj dizajn e-pošte u rješenju za koje je dokazano da funkcionira na svim klijentima i uređajima, a zatim ga zalijepite nazad u svog dobavljača usluga e-pošte.

Platforme za dizajn e-pošte

Budući da su platforme za usluge e-pošte loše obavile posao u izgradnji i održavanju konzistentno prikazanih graditelja među klijentima i različitim uređajima, na tržište su izašle brojne odlične platforme. Jedan koji smo intenzivno koristili je Stripo.

Stripo nije samo alat za pravljenje e-pošte, već ima i biblioteku od preko 900 šablona koji se lako mogu uvesti. Nakon što dizajnirate e-poštu, možete poslati e-poštu na 60+ ESP-ova i klijenata e-pošte, uključujući Intuit Mailchimp, HubSpot, kampanja Monitor, AWeber, eSputnik, izgledi, I Gmail. Najbolji od svih Stripo predložaka dolaze s uključenim testovima prikazivanja e-pošte tako da možete osigurati da su testirani i da rade dosljedno na preko 40 klijenata e-pošte.

Prijavite se na Demo Stripo Editor

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desetinama uspješnih MarTech startupova, pomogao je u dubinskom pregledu od preko 5 milijardi dolara u Martechovim akvizicijama i investicijama, te nastavlja da pomaže kompanijama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak za digitalnu transformaciju i MarTech stručnjak i govornik. Douglas je također objavljeni autor Dummie's vodiča i knjige o poslovnom liderstvu.

Vezani članci

Nazad na vrh dugmeta
blizu

Adblock otkriven

Martech Zone je u mogućnosti da vam pruži ovaj sadržaj bez ikakvih troškova jer mi unovčavamo našu stranicu putem prihoda od oglasa, partnerskih veza i sponzorstava. Bili bismo zahvalni ako biste uklonili svoj blokator oglasa dok gledate našu web stranicu.