Marketing i automatizacija putem e-pošteVideozapisi o marketingu i prodaji

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

Ako otvorite sustav za upravljanje sadržajem za izradu web stranica, to je prilično jednostavan postupak. Podrška za moderne web preglednike HTML, CSS, a JavaScript prema strogim web standardima. A oni su samo nekoliko preglednika o kojima dizajneri trebaju brinuti. Postoje iznimke, naravno... i neka jednostavna rješenja ili funkcije specifične za te preglednike.

Zbog općih standarda, jednostavno je razviti alate za izradu stranica u sustavima za upravljanje sadržajem. Preglednici su usklađeni s HTML5, CSS-om i JavaScriptom... a programeri mogu izgraditi nevjerojatno robusna rješenja za stvaranje web stranica koje reagiraju na uređaje i dosljedne su u svim preglednicima. Prije dva desetljeća gotovo svaki web dizajner koristio je softver za stolna računala za razvoj web stranica. Prilično je neuobičajeno da web dizajner razvija web stranicu – češće nego ne, oni razvijaju predloške i koriste uređivače u sustavima sadržaja za popunjavanje sadržaja. Urednici web stranica su fantastični.

Ali urednici e-pošte jako zaostaju. Evo zašto…

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

Ako vaša tvrtka želi lijepo dizajniranu HTML e-poštu, proces je eksponencijalno složeniji od izrade web stranice iz nekoliko razloga:

  • Bez standarda – Klijenti e-pošte koji prikazuju HTML e-poštu NEMA strogog pridržavanja web standarda. Gotovo svaki klijent e-pošte i svaka verzija svakog klijenta e-pošte djeluje drugačije. Neki će poštovati CSS, vanjske fontove i moderni HTML. Drugi poštuju neki ugrađeni stil, prikazuju samo kolekciju fontova i ignoriraju sve osim struktura koje pokreću tablice. Baš je smiješno da se nitko ne bavi ovom problematikom. Kao rezultat toga, dizajniranje predložaka koji se dosljedno prikazuju na klijentima i uređajima postalo je velik posao i može biti prilično skupo.
  • Sigurnost klijenta e-pošte – Nedavno je Apple Mail ažuriran kako bi prema zadanim postavkama blokirao sve slike u HTML e-porukama koje nisu ugrađene u e-poštu. Možete im dati dopuštenje za učitavanje e-pošte odjednom ili morate omogućiti postavke da biste onemogućili ovu postavku. Uz sigurnosne postavke klijenta e-pošte, postoje i korporativne postavke.
  • IT sigurnost – Vaš IT tim može primijeniti stroge skupove pravila o tome koji se objekti zapravo mogu prikazati u e-poruci. Ako vaše slike, na primjer, dolaze s određene domene koja nije na popisu dopuštenih u korporativnom vatrozidu, slike se jednostavno neće pojaviti u vašoj e-pošti. Ponekad smo morali razviti e-poštu i sve slike ugostiti na poslužitelju korporacije kako bi njihovi zaposlenici mogli vidjeti slike.
  • Davatelji usluga e-pošte – Da stvar bude gora, graditelji e-pošte koji davatelji usluga e-pošte (ESPs) zapravo uvode probleme, a ne ograničavaju ih. Dok promoviraju svoj urednik What You See Is What You Get (WYSIWYG), s dizajnom e-pošte često je suprotno. Pregledat ćete e-poštu na njihovoj platformi, a primatelj će vidjeti sve probleme dizajna. Tvrtke se često nesvjesno odlučuju za uređivač bogat značajkama umjesto zaključanog, misleći da jedan ima više mogućnosti. Suprotno je istina... 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čunalima, u aplikacijama, mobilnim uređajima i klijentima web-pošte. Dok vaš zgodni uređivač teksta na vašem davatelju usluga e-pošte može imati postavku za postavljanje naslova u vašu e-poštu, ispuna, margine, visina retka i veličina fonta mogu se razlikovati za svaki klijent e-pošte. Kao rezultat toga, morate zaglupiti HTML i drugačije kodirati svaki pojedini element (pogledajte primjer u nastavku) – i često pisati iznimke koje su specifične za klijenta e-pošte – kako bi se e-pošta prikazivala dosljedno. Ne postoje jednostavni tipovi blokova, morate raditi rasporede koji se temelje na tablici i koji su ekvivalentni izradi za web prije trideset godina. To je razlog zašto svaki novi izgled zahtijeva i razvoj i unakrsno testiranje klijenta e-pošte i uređaja. Ono što vidite u svojoj pristigloj pošti može biti potpuno drugačije od onoga što ja vidim u svojoj pristigloj pošti. Zato alati za renderiranje poput E-mail o kiselini or Lakmus su neophodni kako bi se osiguralo da vaši novi dizajni funkcioniraju na svim klijentima e-pošte. Evo kratkog popisa popularnih klijenata e-pošte i njihovih mehanizama za renderiranje:
    • Koristi Apple Mail, Outlook za Mac, Android Mail i iOS Mail WebKit.
    • Koristite Outlook 2000, 2002 i 2003 Internet Explorer.
    • Koristite Outlook 2007, 2010 i 2013 Microsoft Word (da, Riječ!).
    • Klijenti web-pošte koriste odgovarajući mehanizam svog preglednika (na primjer, Safari koristi WebKit, a Chrome koristi Blink).

Primjer HTML-a za web vs. E-mail

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

Pošalji HTML e-poštom

Moramo izgraditi niz tablica koje uključuju sve ugrađene stilove potrebne za pravilno postavljanje gumba i osiguravanje da dobro izgleda u svim klijentima e-pošte. Popratna oznaka stila također će biti na vrhu ove e-poruke kako bi uključila 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>

Web HTML

Možemo koristiti vanjsku tablicu stilova s ​​klasama za definiranje velikih i malih slova, poravnanja, boje i veličine oznake sidra koja se pojavljuje kao gumb.

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

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

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

  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 uređajima i stolnim računalima ključno je prije postavljanja bilo kojeg predloška. Možemo dizajnirati e-poštu doslovno iz Photoshop rasporeda... ali njeno rezanje i usitnjavanje u klijent za unakrsnu e-poštu vođen tablicom ključno je za implementaciju dizajna e-pošte koji su optimalni i dosljedni.
  2. Interno testiranje – Nakon što je vaš predložak dizajniran i testiran, treba ga poslati internom popisu početnika unutar organizacije na pregled i odobrenje. Možda ćete čak htjeti započeti s vrlo ograničenom podskupinom pojedinaca kako biste prvo osigurali da nema vatrozida ili sigurnosnih problema povezanih s internim prikazivanjem e-pošte. Ako ovo stvara instancu na novom davatelju usluga 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 pristiglu poštu.
  3. Verzija predloška – Nemojte mijenjati svoje izglede ili dizajne bez rada na novoj verziji predloška koji se može dizajnirati, pravilno testirati i implementirati. Mnoge tvrtke vole jednokratne dizajne za svaku kampanju... ali to zahtijeva da svaka e-pošta bude dizajnirana, razvijena i implementirana za svaku kampanju. To dodaje tonu vremena internom procesu marketinga putem e-pošte. I riskirate da ne razumijete koji elementi u vašoj e-pošti imaju dobru izvedbu 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. Iznimke davatelja usluga e-pošte – Gotovo svaki davatelj usluga e-pošte ima sredstva za rješavanje problema koje uvodi njihov alat za izradu e-pošte. Često možemo dodati sirovi CSS na račun – ili čak imati blok sadržaja koji mora biti uključen u svaku e-poštu – kako bi tvrtka koristila ugrađeni uređivač e-pošte i ne bi narušila 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 su usklađeni. Ili – možda doslovno samo želite razviti svoj dizajn e-pošte u rješenju za koje je dokazano da funkcionira na svim klijentima i uređajima, a zatim ga zalijepite natrag u svog davatelja usluga e-pošte.

Platforme za dizajn e-pošte

Budući da su platforme usluga e-pošte loše odradile 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 sjajne platforme. Jedan koji smo intenzivno koristili je Stripo.

Stripo nije samo program za izradu e-pošte, oni također imaju biblioteku od preko 900 predložaka 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, Monitor kampanje, aweber, eSputnik, pogledi gmail. Najbolje od svega, Stripo predlošci dolaze s uključenim testovima prikazivanja e-pošte, tako da možete biti sigurni da su testirani i da dosljedno rade na više od 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 desecima uspješnih MarTech startupa, pomogao je u due diligence-u od preko 5 milijardi USD u Martech akvizicijama i ulaganjima te nastavlja pomagati tvrtkama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak i govornik za digitalnu transformaciju i MarTech. Douglas je također objavljeni autor Dummie's guide i knjige o poslovnom vodstvu.

Vezani članci

Natrag na vrh
Blizu

Otkriven je Adblock

Martech Zone može vam pružiti ovaj sadržaj bez ikakvih troškova jer svoju web stranicu unovčavamo putem prihoda od oglasa, pridruženih veza i sponzorstava. Cijenili bismo kada biste uklonili program za blokiranje oglasa dok pregledavate našu stranicu.