28/01/2015
Responsive email, de hogyan?
A II. Email Marketing konferencián elhangzott rövid előadás szkriptje a responsive email designról. Néhány gondolat a html email tervezésről, pár hasznos tipp és a gmail folyamatos szidalmazása. Dióhéjban.
A világ legreszponzívabb emailje az egyszerű plaintext, azaz a sima szöveges email. Sajnos ezt nem lehet mérni, illetve a képekről, designról is le kell mondani, tehát ez nem megoldás.
Litmus kutatásából azt látni, hogy világszinten 47% a mobilról megnyitott emailek aránya. A konferencián elhangzottak szerint hazánkban 17% (Protopmail adatok), de a kiküldés utáni első órában ez a szám 23%. Kicsit furák nekem ezek a magyar számok. Több konferencia résztvevővel is beszéltem, akik rendre nagyobb számokról számoltak be, egyébként az fps hírlevél – köszönhetően nektek – a világ arányaira hajaz. Egy biztos. Ha az email nincs optimalizálva a mobil eszköz email kliensére, akkor azt a felhasználók 80%-a nyomban törli.
A viselkedési minták (MailChimp kutatás), melyek simán ráhúzhatóak a hazai viszonyokra is, azt mutatják, hogy nagyon nehéz megjósolni, hogy a kiküldött emailünk milyen kontextusban éri éppen a felhasználókat.
77% minden körülmények között ellenőrzi az emailjeit
87% egyben kezeli az üzleti és a személyes levelezését
72% ágyban, reggel és este csekkolja a maileket
14% tömegközlekedési eszközön teszi ezt
12% étteremben, bárban, kávézóban levelezik
8% pedig várakozás közben (bank, orvos stb.)
érdekességként toaletten nem emailezünk, ott inkább a social media felületeit fogyasztjuk :)
Tervezés
mobile first – segít fókuszálni a lényegre
tömör, rövid, érhető és világos szöveg
nem kell telezsúfolni ajánlatokkal a hírleveled, maximum 3-4 ajánlat bőven elég – ne frusztráld a felhasználóid a túl sok választási lehetőséggel
egyértelmű linkek és gombok
kontraszt
tappolható felület mérete megfelelő legyen (1,5 cm*1,5 cm – kb. 44 px*44 px)
tappolható területek egymástól elég távol kerüljenek (2 mm – kb. 8 mm)
egyoszlopos megjelenés
Habár meg lehet oldani, hogy több oszlopos email legyen, de egyszerűen nem éri meg a szenvedést, a ráfordítást és szinte biztos, hogy találunk olyan email klienst, ahol nem lesz kielégítő a megjelenés.
Érdemes szimplán a tipográfiára helyezni a hangsúlyt. Vertikális ritmus, egyszerű font méretekkel, white space-szel, színekkel és lineákkal játszani. Ez gyors letöltést, világos és egyértelmű hierarchiát eredményez. Ha fotót, képet akarsz beletenni, akkor gondolkozz teljes szélességben, ami szép is lesz és az életed is megkönnyíti. Ha már az email kliensek fejlesztői erre nem hajlandóak.
Grafikai tervezés? Photoshop?
Responsive emailnél? Őszintén? Teljesen felesleges. Egyszerűen, akár egy böngészőben összedobható. Nyilván kell hozzá szépérzék, tipografiai alapismeret.
Tippek
ha sok tartalom van az emailedben, azaz jó hosszú lett, tégy a bevezető szöveg után egy tartalomjegyzéket, melyek sima anchor hivatkozással ( #) odaugranak a megfelelő pontra
nyilván remote image-eket használsz (külső helyen tárolt képeket hivatkozol be) – ezeknek töltsd ki az alt tulajdonságát, hogy a képek letöltése nélkül is értelmezhető képet kapjon a felhasználó
okostelefonokon a social media természetes dolog, ezért érdemes megosztó linkeket tenni az emailedbe
a mobilos email kliensek az email lista képernyőn megmutatják a html tartalom elejét, tehát ne kezdd a html email azzal, hogy „ha az email nem jól jelenik meg, akkor nyissa meg a böngészőjében” – sokkal inkább valami figyelemfelkeltőbb szöveget tégy oda (melyet akár display:none-nal el is rejthetsz)
image
Támogatottság
A mediaquery-t, ami egy igazán jó responsive megoldásnak az alapja minden okostelefon beépített email kliense támogatja (kivéve Windows Phone8). Ellenben sajnos a Gmail, a Mailbox és a Yahoo mail egyetlen operációs rendszeren sem támogatják.
Létezik egy sima százalékos megadással történő megoldás, mely igazából sokban csökkenti a lehetőségeket, viszont működő alternatíva Gmail, Mailbox és Yahoo Mail esetében is. Ennek a finomhangolás hiánya melletti hátránya, hogy Outlook 2007, 2010 és 2013 desktop email kliensek alatt szétcsúszik a design a kliens széléig.
A megfelelő megoldást érdemes a célközönségünk, a hírlevél listánk felhasználói szerint megválasztani. Az fps hírlevél a mediaquery-re támaszkodik, tehát sajnos a Gmail appot és Mailbox appot mobilon használók nem az optimalizált felületet kapják. Esetünkben az Outlookot használók tábora nagyobb, mint a Gmail apposoké és sok az IOS-t futtató tag.
forrás: fps
