Az elmúlt években egyre több jó hírlevéllel találkozom. Rendszerint szakmai témákban. A Webisztánra régóta tervezem, hogy készítek (kész is lett), plusz a cégnél is foglalkozunk ezzel a témával. Úgyhogy megosztok pár tapasztalatot, hogy nektek már ne kelljen minden lépcsőn végigszenvednetek magatokat.
Miért fontos a hírlevél?
A kétezres évek első felében elképesztő méreteket öltött a webszemét. Jó spamszűrők sem nagyon voltak még, egy kicsit vadnyugati volt a hangulat. Sok időt és energiát igényelt, mire ki lehetett bogarászni a sok hülyeség közül az értelmes leveleket. Aztán a kétezres évek közepén jött a Gmail, és az egész webmail dolog nagyon szépen elkezdett fejlődni. Olyannyira, hogy ma már sok cégnél webmail alapú a kommunikáció. Kezdjük elfelejteni, hogy mi az a POP3 és IMAP, mi hogyan szinkronizálódik, mennyi a spam a mailboxunkban.
Az egész emailezés téma az okostelefonok elterjedésével (2007-) vett újabb fordulatot. Az egyik legnépszerűbb tevékenység ma is ezen a platformon, a telefonálás és a webezés mellett. Plusz frontenden is történt ez-az, úgyhogy ma már valamivel szebbek is a hírlevelek, mint tíz éve.
Jaj, már megint ez a reszponzív...
Éppen az okostelefonok miatt egyre fontosabb, hogy a hírlevelek ne csak a desktopon, de ilyen pici felületeken is optimálisan jelenjenek meg. Az utóbbi években a sztenderd hírlevélszélesség nagyjából 600 pixel volt. Ami annak tudható be, hogy egy ilyen széles email kényelmesen elfér mondjuk a Gmail előnézeti ablakában.
Csakhogy a mobilos böngészők kétszerezve kalkulálnak a méretekkel, úgyhogy egészen most februárig szinte minden hírlevél, aminek legalább egy 600 pixel széles kép volt a fejléce, úgy jelent meg a Webkit-alapú mobil mailkliensekben, hogy nagyjából a felét láttuk a levélnek. Jobbra-balra kellett mozgatni a rich html oldalt ahhoz, hogy el tudjuk olvasni az emailt.
Az okosabbak persze nem flancoltak holmi dizájnelemekkel, 600 pixeles fejlécképekkel, hanem plain textben küldték ki a hírleveleiket. A még okosabbak viszont elkezdték megvizsgálni, hogy hogyan lehetne beszorítani a mobil mailkliens viewportjába a levelet.
Nagyjából február környékén történt a változás. Az iPhone-os és az androidos mailkliens elkezdte belekicsinyíteni az összes levelet a mailkliens ablakába. Ami egyrészt jó dolog (így van ez például a mobil böngészőkben is), másrészt viszont kevesen vették ezt észre. Az eredmény pedig az lett, hogy az átméretezéssel olvashatatlanul kicsik lettek a hírlevelek szövegei. Íme két rossz, és egy jó (optimalizált) példa:
Jól látszik, hogy az Origo kéthasábos hírlevele az újraméreteződés eredményeként olvashatatlan lesz alapnézetben. Szintén hangyafasznyi betűkkel jelenik meg a Moo hírlevele is. A ViewSource viszont okosan mediaqueryzik, és meg is ugorja az olvashatóság-feladatot mobilon.
Mire figyeljünk nagyon tervezéskor?
Ha reszponzív hírlevelet szeretnénk készíteni, első körben én a Zurb template-jeit és kódjait ajánlom megtekintésre. Plusz a CampaignMonitor írásait. Több dolgot is gyorsan megtanulhatunk belőlük.
1. Egyhasábos layout!
Mobilon kínszenvedés lesz többhasábos layoutban hírlevelet szerkeszteni. Ha jót akarunk magunknak, maradjunk az egy hasábnál. Ha nagyon muszáj, és a marketingest sem tudjuk lebeszélni, körültekintően tervezzük meg a kéthasábos verziót. Szar lesz. De akkor legalább neki lehet kezdeni az egyhasábosnak végre!)
2. Gombszerű linkek
Lévén a mailkliensek nem támogatják a hover állapotot, ráadásul az emailünket érintőképernyős telefonokon is nézni fogják, értelmes dolog hagyományos aláhúzásos vagy vastagbetűs linkszövegek helyett gombokban megálmodni az email kattintható felületeit.
3. Mediaquery, százalékos div-ek
Ahhoz, hogy jól be tudjuk állítani a mobilos megjelenését a hírlevélnek, mediaqueryk és százalékos divek használatára lesz szükségünk. Előbbi a mailchimpes kampányok esetében nem annyira működik. De ha van saját mailkiküldő szolgáltatásunk, akkor csak bátran!
4. No image verzió
A mailkliensek alapból nem jelenítik meg a képeket az emailben. Ezért a dizájnt is érdemes úgy tervezni, hogy az képek nélkül is elfogadható élményt adjon. Egyszerűnek hangzik. Nem az.
5. Web safe fontok
Hiába próbálkoznánk mindenféle linkelt, belekódolt, importolt saját betűtípusokkal, a végén oda fogunk kilyukadni, hogy nem tudjuk ezen a téren átverni a böngészőt: kénytelenek leszünk a web safe fontokból válogatni: Arial, Comic Sans, Georgia, Lucida, Tahoma, Times New Roman, Trebuchet MS, Verdana. Apple-oldalon persze a Helveticával kiegészítve.
6. Inline css
Igazából illett volna ezzel kezdeni, annyira alapvető dolog ebben a témában. Szépen a html-be kell belebiggyeszteni a sorokba a stílust. Ja, hogy ez mekkora szopás? Hatalmas. Szerencsére a MailChimp átfordítja a html-be írt css-t inline-ná, így nem kell százszor is megadni egy h tagnek, hogy hogyan nézzen ki. És a MailChimp jófejsége, hogy a fordítót publikálták is: http://beaker.mailchimp.com/inline-css
7. !important
Mivel nagyon gyéren dokumentált, hogy a mailkliensek éppen mit támogatnak és mit nem, css oldalon érdemes nagyon aktívan használni az important-ot. Rengetegszer előfordul ugyanis, hogy a kliensbe ágyazott böngésző saját css-sel próbálja meg felülírni még az inline stíluselemeket is. Tudom, hogy faszságnak hangzik, de importantozzunk mindent végig. Itt az a legbiztosabb.
Hogy egy fontos példát mondjak: box-shadow-t véletlenül sem támogat egyik értelmes mailkliens sem. Bazinga!
A CampaignMonitornak van egy viszonylag friss táblája arról, hogy melyik mailkliens mit támogat a css-ből. Érdemes átfutni: http://www.campaignmonitor.com/css/
Mindebből pedig egyenesen következik, hogy a minimalista, flat dizájn a nyerő dizájn hírlevél kapcsán. Egyszerű html, egyszerű css. Semmi flikkflakk.
Hogyan ne kerüljünk a spam folderbe?
Megintcsak saját tapasztalatok:
1. Egyedi subject
Lehetőleg minden hírlevelünk tárgysorába legyen valami egyedi karaktersor. A legegyszerűbb, ha az aktuális dátumot tesszük bele a subjectbe. De lehet ennél kreatívabbnak is lenni.
2. Add to address book
A mailkliensek spamszűrője ellen a legjobb védelem, ha a címzett felveszi a küldőt a kontaktlistájába. Ha linkeljük a vcardot, azzal legalább az esélyét megadjuk ennek. Tegyük meg!
3. Egyszerű leiratkozás
Ha van leiratkozás, és a felhasználó egy-két kattintással az emailből indulva le is tud iratkozni, az csökkenti a bepanaszolások, spamfolderbe mozgatások arányát. És az nagyon jó dolog ebben a műfajban.
4. Kép-szöveg arányra figyelés
A hírlevél alapvetően legyen szövegalapú. Ugye márcsak azért is, mert alapból képet nem jelenít meg a mailkliens a levélben. Ha túl sok a képelem, de kevés a szöveg, a Google nehezebben fedezi fel, hogy spamről van-e szó, így inkább a gyanús listára teszi. Ugyanezért: a képeket írjuk le alt taggel, és legyen egyértelmű a képek kontextusa. Vagyis: képeket illusztrációra használjunk csak. Kivéve a fejlécképet.
És ami még segít:
1. Egyedi levélkezdés
Ha tudjuk a címzett keresztnevét (mert pl. feliratkozáskor elkértük tőle), használjuk megszólításként a levél elején.
2. Snippet sor
Az email html bodyjának első pár tucat karaktere fog megjelenni a felhasználó kliensében a levél tárgysora mellett. Ezt érdemes külön formázni. Vagyis a body mindenképpen valami olyasmivel kezdődjön, ami röviden leírja a hírlevél profilját.
3. Óvakodj a Message clipped-től!
Ha túl hosszú az emailed, és ráadásul lassan is töltődik be (sok kép, szar kód), a Gmail csak a levél első pár bekezdését mutatja meg.
Analitika (avagy mit érdemes mérni)
- Átkattintások (campaign tracking)
- Open rate
- Email bounce rate
Analitika kapcsán érdemes próbálkozni többféle hírlevélkiküldési időponttal. Akár A/B tesztelve a felhasználóbázist. Ebből pedig kideríteni, hogy mi a legoptimálisabb hírlevélkiküldési periódus (legnagyobb open rate és click rate arány). Hint: korán reggel érdemes próbálkozni.
Teszt
Itt a lényeg, hogy nem elég desktop böngészőben teszelni. Tesztemaileket küldjünk minden próbálgatás után. Gmail, Outlook, Freemail, Hotmail, Gmail Android, iPhone Mail.app... ezekre mindenképp.
Ennél persze sokkal több mindenbe belefut az ember. De a lényeg, hogy hírlevelet tervezni sokkal bizarrabb dolog, mint webszájtot dizájnolni. Én a MailChimpet ajánlom a kezdők figyelmébe. Nagyszerűen meg lehet tanulni vele, hogy a hírlevél és a rich html emailek még mindig évekkel vannak elmaradva a mobilwebes böngészőktől.
A végére pedig egy jó hír: van egy dolog, ami képes animálódni a mailkliensekben megjelenő levelekben. És ez pedig az animgif. Jippi.
Ja, és ha van kedved, nézd meg a Webisztán Weekly hírlevelet.
A Smartmobil konferencián is ebben a témában tartottam egy rövid prezentációt. Íme a slide-ok:
