Ako otvorite sistem za upravljanje sadržajem da biste napravili web stranice, to je prilično jednostavan proces. Moderni web pretraživači podržavaju HTML, CSS i JavaScript za a striktno skup web standarda. I, oni su zapravo 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, zaista je lako razviti programere stranica u sistemima za upravljanje sadržajem. Pretraživači su usklađeni sa HTML5, CSS i JavaScript-om… a programeri mogu izgraditi nevjerovatno robusna rješenja za izradu web stranica koje odgovaraju uređajima i konzistentne u svim pretraživačima. Prije dvije decenije, gotovo svaki web dizajner je koristio 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 više razloga:
- Bez standarda – NEMA striktno pridržavanje bilo kojeg weba standarda klijentima e-pošte koji prikazuju HTML e-poštu. U stvari, virtuelno svaki klijent e-pošte i svaka verzija svakog klijenta e-pošte deluje drugačije. Neki će poštovati CSS, eksterne fontove i moderni HTML. Drugi poštuju neki inline stil, prikazat će samo kolekciju fontova i ignorirati sve osim struktura vođenih tablicama. Zapravo je prilično smiješno u ovom trenutku 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 – Samo ove sedmice, Apple Mail je 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. Dok oni promoviraju njihov urednik je Ono što vidite je ono što dobivate (WYSIWYG), suprotno je često istina kod dizajna e-pošte. Pregledaćete e-poštu na njihovoj platformi, a onda primalac e-pošte vidi sve vrste problema sa dizajnom. Kompanije se često nesvjesno odlučuju za uređivač s bogatim funkcijama umjesto zaključanog urednika misleći da jedan ima više funkcija od drugog. 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 – Postoje stotine klijenata e-pošte, od kojih svaki različito prikazuje HTML na desktopu, aplikacijama, mobilnim i web-mail klijentima. 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 pojedini klijent e-pošte. Kao rezultat toga, morate zaglupiti HTML i kodirati svaki pojedinačni element drugačije (pogledajte primjer u nastavku) – 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. Zato 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 alati za renderiranje kao što su 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:
Moramo da napravimo niz tabela koje uključuju sav ugrađeni stil potreban da bismo pravilno postavili dugme i osigurali da izgleda dobro na klijentima e-pošte. Na vrhu ove e-poruke će biti i prateća 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>veb
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:
- Dizajn predložaka – Napravite predložak s različitim izgledima i blokovima sadržaja koji obuhvataju svaki stil koji biste ikada željeli proizvesti u dizajnu e-pošte. Kada implementiramo klijenta, uvijek ga tjeramo dizajnirajte email za budućnost – ne samo sljedeću email kampanju koja se šalje. 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 desktop računarima je ključna prije implementacije bilo kojeg predloška. Možemo dizajnirati e-poštu bukvalno iz izgleda u Photoshopu… ali njegovo rezanje i isjeckanje u klijent za unakrsnu e-poštu vođenom tablicom je od suštinskog značaja za implementaciju dizajna e-pošte koji je optimalan i dosljedan.
- 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.
- 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.
- 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 MailChimp, HubSpot, Campaign Monitor, AWeber, eSputnik, Outlook i Gmail. Najbolji od svih predložaka Stripo dolazi sa uključenim testovima prikazivanja e-pošte tako da možete biti sigurni da su testirani i da rade dosljedno na preko 40 klijenata e-pošte.
Prijavite se na Demo Stripo Editor
Otkrivanje: povezujem se sa svojim firma za marketinško savjetovanje koji dizajnira i implementira e-poruke među klijentima za vodeće brendove u gotovo svakom pružatelju usluga e-pošte. Ja sam također podružnica Stripo i koristim svoju vezu u ovom članku.
