Hogyan optimalizáljunk hírlevelet az okostelefonok korában?

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: 

webi_3email.pngJó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)

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:

Címkék: mailchimp hírlevél készítés hírlevél optimalizálás reszponzív hírlevél hírlevél css
2013.04.04. 12:44. írta: hírbehozó

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben.

Nincsenek hozzászólások.