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