Ako otvorite sustav za upravljanje sadržajem za izradu web stranica, to je prilično jednostavan proces. Moderni web preglednici podržavaju HTML, CSS i JavaScript za a strog skup web standarda. A oni su zapravo samo nekoliko preglednika o kojima se dizajneri trebaju brinuti. Postoje iznimke, naravno... i neka jednostavna rješenja ili funkcije specifične za te preglednike.
Zbog općih standarda, vrlo je lako razviti alate za izradu stranica u sustavima za upravljanje sadržajem. Preglednici su usklađeni s HTML5, CSS i JavaScriptom… a programeri mogu izgraditi nevjerojatno robusna rješenja za izradu web stranica koje odgovaraju uređajima i dosljedne u svim preglednicima. Prije dva desetljeća, 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 predloške i koriste urednike 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 dizajniranu lijepu HTML e-poštu, proces je eksponencijalno složeniji od izrade web stranice iz nekoliko razloga:
- Bez standarda – NEMA strogog pridržavanja bilo kojeg weba standardi klijentima e-pošte koji prikazuju HTML e-poštu. Zapravo, virtualno 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 inline stil, prikazat će samo kolekciju fontova i zanemariti sve osim struktura koje se pokreću tablicom. Zapravo je u ovom trenutku prilično smiješno da nitko 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 – Samo ovog tjedna Apple Mail se ažurirao kako bi blokirao sve slike u HTML e-porukama prema zadanim postavkama koje nisu ugrađene u e-poštu. Ili date dopuštenje da im učitate e-poštu odjednom ili morate omogućiti postavke da biste onemogućili ovu postavku. Uz sigurnosne postavke klijenta e-pošte tu su 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 umjesto da ih ograničavaju. Dok oni promoviraju njihov urednik je Ono što vidite je ono što dobivate (WYSIWYG), suprotno je često istina s dizajnom e-pošte. Pregledat ćete e-poštu na njihovoj platformi, a zatim primatelj e-pošte vidi sve vrste problema s dizajnom. Tvrtke se često nesvjesno odlučuju za uređivač s bogatim značajkama umjesto zaključanog urednika misleći da jedan ima više značajki od drugog. Istina je upravo suprotno… ako želite e-poštu koja se dosljedno prikazuje na svim klijentima e-pošte, što jednostavnije to bolje jer manje može poći po zlu.
- Renderiranje klijenta e-pošte – Postoje stotine klijenata e-pošte, od kojih svaki različito prikazuje HTML na stolnim računalima, 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… dopuna, margine, visina retka i veličina fonta mogu se razlikovati za svaki pojedini klijent e-pošte. Kao rezultat toga, morate zaglupiti HTML i kodirati svaki pojedini element drugačije (pogledajte primjer u nastavku) – i često pisati iznimke koje su specifične 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 jednaki izgradnji za web prije trideset godina. Zato svaki novi izgled zahtijeva razvoj i testiranje klijenta i uređaja za više e-pošte. Ono što vidite u pristigloj pošti može biti potpuno drugačije od onoga što ja vidim u pristigloj pošti. Zato su 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:
Moramo napraviti niz tablica koje uključuju sav ugrađeni stil potreban za pravilno postavljanje gumba i osiguravanje da izgleda dobro na klijentima e-pošte. Na vrhu ove e-poruke bit će i popratna oznaka stila koja će uključiti 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 stranica
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:
- Dizajn predložaka – Izradite predložak s različitim izgledima i blokovima sadržaja koji obuhvaćaju svaki stil koji biste ikada željeli proizvesti u dizajnu e-pošte. Kada implementiramo klijenta, uvijek ga guramo dizajnirati email za budućnost – ne samo sljedeća kampanja e-pošte koja je poslana. Na taj način možemo u potpunosti dizajnirati, razviti, testirati i implementirati potrebna rješenja prije oni ikad pošalju tu prvu e-poštu.
- 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 stolnim uređajima ključno je prije implementacije bilo kojeg predloška. Možemo dizajnirati e-poruku doslovno iz izgleda u Photoshopu... ali izrezivanje i izrezivanje u klijent za unakrsnu e-poštu vođenu tablicama ključno je za implementaciju optimalnog i dosljednog dizajna e-pošte.
- 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 MailChimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook i Gmail. Najbolji od svih predložaka Stripo dolaze s uključenim testovima prikazivanja e-pošte kako biste bili sigurni da su testirani i da rade dosljedno na više od 40 klijenata e-pošte.
Prijavite se na Demo Stripo Editor
Otkrivanje: povezujem se sa svojim tvrtka za marketinško savjetovanje koji dizajnira i implementira e-poštu među klijentima za vodeće robne marke u gotovo svakom davatelju usluga e-pošte. Također sam podružnica Stripo i koristim svoju vezu u ovom članku.
