A reszponzív e-mail titka Mécs Gergely Vezető Frontend Fejlesztő – EDMdesigner.com
1 / 12
A reszponzív e-mail titka Az okostelefonok gyors terjedése miatt napjainkban egyre nagyobb az igény a reszponzív weboldalakon megismert viselkedésre e-mailjeink esetében is. Első ránézésre is látni, hogy mind a weboldalak, mind az e-mailek esetében azonosak a körülmények. Azaz HTML alapokra építhetünk, CSS használat mellett. A problémakör jobb átláthatósága érdekében, azonban vissza kell mennünk az alapokhoz.
Az eredet Azok számára, akik régebb óta foglalkoznak weboldalakkal, ismert, hogy a weboldalak megtekintésére használt böngészők között akadnak eltérések, amik sok esetben váratlanul felborítják az alaposan megbecsült fejlesztési időket, esetenként módosítják terveinket. Ezek a sokszor "váratlan" helyzetek, a böngészők sajátos történetéből fakadnak. A programozásban, de a racionális tudományokban is, az ismert környezet szabályai nem áthághatóak. Például 2+2 az mindig, minden esetben 4. Ezzel szemben, a HTML és CSS világában nem lehet ilyen törvényeket állítani, egyrészről gyakran lazán kezelt szabványokra épül az adott böngésző viselkedése, másrészről sok esetben mindenki kicsit a saját útját is járja. A böngészés hajnalán a Netscape, majd az Internet Explorer bizonyos verzióival küzdött a webfejlesztő szakma. Ma már egy jóval sokszínűbb paletta kínálata cincálja sokfelé a használt böngészők piacát és a fejlesztők idegeit. (Chrome, Firefox, Opera, Safari, etc) A böngészők egyre gyorsuló fejlődése, olykor hétről-hétre frissülő verziói még tovább szegmentálják a böngészők piacát, ami jelen esetben a csatorna, hogy elérjük a felhasználókat. Ezt még tovább bonyolítja az elmúlt pár évben nagyhatású változást hozó okostelefonok térhódítása, időröl-időre újabb böngészőket hoz a hétköznapi szinten használtak közé. Így mára sok tucat, akár néhány száz böngészőről is beszélhetünk, figyelembe véve az adott piacon előforduló rengeteg eszközt, platformot, verziót és alkalmazást. Mi köze a böngészőknek az e-mailekhez? - fogalmazódhat meg a kérdés bárkiben. A válasz egyszerű. Technikailag az e-mail kliens egyfajta böngésző. HTML-t értelmező és azt megjelenítő szoftver. Nagyon sok esetben kifejezetten egyes böngészők motorjára épültek. (Outlook (IE/Trident), Thunderbird (Firefox/Gecko)) Az e-mail protokoll alapvetően kommunikációs protokoll, így a leírás tartalmazza ugyan, a levél tartalmát jelentő html rész elhelyezkedését, azonban a különböző e-mail kliensek más-más html renderelési/megjelenítési képességekkel birnak, amik alapvetően 2 / 12
eltérnek egymástól, mivel a szabvány erre a részre nem tér ki. Ez gyakorlatilag azt jelenti, aminek hangzik.... az égvilágon semmilyen általánosan elterjedt sztenderd nem létezik itt. A probléma, hogy a böngészőknél elfogadott HTML és CSS eszköztárából, mit alkalmaznak az ügyfeleink által használt kliensek. Mi az, ami elvárt, vagy javasolt, támogatandó, stb. Hasonlóan, mint amilyen a beharangozott HTML5 és CSS3 a böngészők piacán, ám ott mégis gyorsabban zajlik a szabványokhoz való felzárkózás, mint az email olvasók esetében. A böngészők fejlődéséből az e-mail marketing szakember számára, többnyire csak a rossz dolgok kerültek át az e-mail kliensek piacára. Hiszen a fejlődés, az e-mail kliensek szaporodásával, és az új platformok megjelenésével itt is végbement, de ez nem feltétlenül enyhíti a már begyökeredsedni látszó helyzetet. Míg a böngészőknél a "modern böngészők" által diktált gyors fejlődés, és mára általánossá váló automatikus frissítések lassan kiszorítják a nem versenyképes szereplőket, addig az emailek tekintetében ez is jóval kisebb mértékben játszódik le.
E-mail olvasók és sajátosságaik Sokunk mindennapjaiba csempészte magát az e-mail olvasás. Többnyire mindenki el tudja helyezni az időben, mióta olvas e-mailt. Ám bizonyára nem tudnánk felsorolni minden e-mail klienst/olvasót, amit valaha használtunk. Több megoldással is találkozhattunk az idők során a hagyományos e-mail kliensektől (Outlook Express, MS Outlook, Thunderbird, Apple Mail, etc.) a böngészőből használható szolgáltatásokon át. (Gmail, Yahoo Mail, Hotmail/Outlook.com, freemail.hu, citromail.hu, stb) Napjainkban pedig már a kézieszközök, leginkább a mobiltelefon és a tabletek kezdenek dominálni. Ezeken pedig ismét többféle megoldáson át kezelhetjük e-mailjeinket.
3 / 12
HTML box modell Minden weboldal, e-mail, bármi, ami HTML alapokon létezik, néhány alaptulajdonság létére épít. Egy elemnek típustól függöen sokféle tulajdonsága lehet, de többségében igaz minden típusra, hogy lehetnek méretei (szélessége és magassága), betűtípusa, saját betűmérete, és színe, háttérszíne, valamint marginja (az elemnek a körülötte lévő elemktől való eltartása) és paddingja (az elem és a benne lévő tartalom között lévő eltartás). Ezzel szemben, minden főbb kliens, vagy kliens család egyedi, de súlyos hiányosággal rendelkezik ezek közül. Több esetben máshogy kezelik a csatolt képeket, más elvárást támasztva az e-mail kiküldő szoftverrel szemben. Ma már sok helyen javasolják, hogy a képeket ne csatoljuk, hanem webtárhelyre kihelyezett címét linkelve (absolut url) helyezzük az e-mail HTMLbe. Míg a weboldalak esetén mára sokféle egyedi betűtípus érhető el, és használható böngésző-függetlenül, addig az e-mailek tekintetében ez is nagyon változóan allkalmazható. Az ehhez hasonló technikák többsége épít arra, hogy különböző erőforrásokat linkelhet, így mozgosítva a bennük rejlő lehetőségeket.
4 / 12
A valódi reszponzívitás előfeltétele, hogy <style> tagek közt, un. "CSS Media Query"-ket alkalmazhassunk, itt megadva, hogy bizonyos képernyőméreteknél milyen tulajdonságok határozzák meg a HTML elemeink kinézetét, méretét, pozicióját, vagy akár színét.
Nézzünk meg néhány fontosabb klienst, hogy megértsük a helyzetet.
Outlook Express és MS Outlook verziók Az Outlook különböző telepíthető változatai nagyon sokáig, sok esetben még ma is dominánsak a vállalati szférában, minden előnyével és hátrányával együtt. Alapvető hibájuk, hogy a HTML-ben szokásos formázási alapelveknél használt padding értékét és gyakran a margin értékét is figyelmen kivül hagyják. Háttérképeket csak korlátozottan kezelnek. A reszponziv viselkedéshez szükséges technológiákat nem támogatnak.
Lotus Notes Hazai piacon viszonylag ritkábban találkozni vele, de ha fontos szelet a célcsoportunkból, akkor meg kell ismernünk a lehetőségeinket, amelyek ebben az esetben viszonylag szűkösek. A fentebbi csoporthoz hasonló hiányosságok számát még továbbiak szaporítják. Legtöbb verziója nem kíméli a <style> tartalmát, sőt ha véletlenül egy sortörés kerülne egy hivatkozás címébe, azt is gyakran tönkre teszi.
5 / 12
Thunderbird, és a modern, gyakran frissülő versenyzők Nem olyan régi gyökerekre visszanyúló versenyzőkre már jellemző, hogy gyakran frissítenek verziót, vagy eleve beépített a szoftver állandón frissítése, ezáltal a szoftver fejlődése is, ami biztosítja, hogy a legmegbízhatóbb megjelenítők. Sok esetben a modern böngészők tudását is elérve.
Webkliensek A webkliensek sajátossága, hogy nem kell semmilyen szoftvert telepitenünk, elegendő böngészőkben egy weboldalra navigálnunk, és ott használhatjuk e-mail "kliensünk". Itt a megjelenítő szoftver, már máshogy müködik, mint az előző esetekben. Egyrészt, mert nem csak az a HTML, amit megjelenít az üzenetből, hanem maga a szoftver felhasználói felülete is, másrészt a megjelenitendő üzenetet nem a böngészőnk szűri meg, és dönti el, mely formázásokat alkalmazza belöle, hanem elöszőr az e-mail szolgáltatás, utána pedig az általa "értelmezett" formázásokat, a böngésző jeleniti meg. Ezek az e-mail szolgáltatók, lehetnek azok kisebbek (freemail.hu, citromail.hu) vagy nagyobbak (Gmail, Yahoo Mail, Outlook.com) mind rendelkeznek több-kevesebb korlátozással vagy erős hiányossággal a HTML és/vagy CSS használat tekintetében. A Gmail például a mindenhol máshol támogatott, és bevett <style> tagben használatos CSS tulajdonságokat veti el, hacsaknem a legelavultabb technikával, magára a HTML elemre definiáljuk. (inline style). Ám ez sem elég, bizonyos elemekről minden tulajdonságot figyelmen kivül hagy. (kivétel a lentebb előkerülő Android 4+ Gmail app) Az Outlook.com elég friss versenyző, viszont az összes webes felületről elérhető, Microsoft fennhatóság alatt lévő e-mail megoldás utódjáról van szó. Gyakran frissül, sőt fiatal szolgáltatáshoz híven, akár komoly változtatások is akadhatnak a motorháztető alatt.
Alkalmazások A mobil platformokon alkalmazások formájában kezelhetőek emailjeink. Sok esetben az operációs rendszer beépített appját használják, ami általában a legtöbb HTML tulajdonságot támogatja, így számunkra a legoptimálisabb platform. Az Android korábbi verzióin még korlátozottabb ez a funkcionalitás, de jellemzően jobban támogatja a szabványokat, mint a korábban tárgyalt asztali kliensek. Elérhetőek alkalmazás formájában egyes webes e-mail szolgáltatók saját alkalmazásai is, mint például a Gmail alkalmazása. Az androidon futó Gmail verziója függ az android operációs rendszer verziójától is, és ezáltal a HTML/CSS támogatottság kérdése is. Míg a 6 / 12
frissebb 4.0 feletti Androidon elérhető Gmail app, hosszú várakozás után kezel némi CSS-t az elemeken kivül is, a 2.1-3.x Android verziókon futó Gmail még nem minösül a szabvány követő e-mailkliensek közé. Egyre több jelentősebb kliens újul meg, fejlődik, így nagyjából negyedévente érdemes lesz lassan újra tesztelni a számunkra jelentős verrsenyzőket. Éppen ezért fontos rendszeresen ellenőrizni kiküldésre szánt HTML emailjeinket. Tehát ismerjük meg a piacot!
Szegmentáltság Szokások és eszközök Hajdanán többségében csak asztali pc-n fogyasztottak e-mailt, néhány nagyobb, domináns cég termékeit használva. A fejlődéssel és az egyre több informatikai szereplő megjelenésével együtt jár, hogy egyre több e-mail kliens jelenjen meg, majd újabb és újabb operációs rendszerek, azokkal pedig újabb e-mail kliensek, vagy azok változatai. Ezek minduntalan újabb szeletet kanyarítanak maguknak az emailfogyasztók népes táborából. Az elmúlt évtizedben megjelent sok új szereplő rengeteg különböző, sokszor vadonatúj platformmal érkezett. A televízióktól a televízióra köthető konzolokon át, az egyre többféle, fajta, méretű és tudású kézi eszközig. Persze míg a tv-n való e-mail fogyasztás kérdéséről beszélni még bőven korai, (és az is meglehet hogy talán sosem érik be), addig a kézi eszközök forradalmi változásokat hoznak. A tendenciát, hogy milyen mértékben veszi át a mobil az e-mail fogyasztás szerepét nincs értelme tárgyalni, jó ideje megfigyelhető a jelenség. A célcsoportjaink tekintetében fontos mérni, mennyire igazak rájuk az általános tendenciák, például az e-mail olvasási szokásaik a kliens választás kapcsán.
7 / 12
forrás: litmus.com A mobil piac szereplői Az alábbi nemzetközi adatokat nézve piacvezetőnek az iOS látszik, majd az Android a következő kifejezetten domináns platform, illetve szót érdemel a Windows Phone is.
forrás: netmarketshare.com
8 / 12
Az alábbi összehasonlítás nagyon jól mutatja, hogy a két versengő platform, a fejlődés révén gyártószalagon hozott frissitései mennyire vezetnek egy egységes, használhatóbb piachoz.
forrás: extremetech.com Míg az iOS a saját pályáján látványosan fenntartja az up2date helyzetet, addig az Android gyakorlatilag az elmúlt 3 évben megjelent verzió ugyan számunkra kis eltéréseket okozva, de mégis tovább darabolják a piacot, és ezzel a piacon használt e-mail kliensek körét.
9 / 12
forrás: extremetech.com
A fejlődés sebessége Míg egy iOS update megjelenése után, a frissitési vágy futótűzként terjed végig a felhasználók táborán, addig az Android verziók többnyire kihalásos elven váltják egymást gazdájuknál. Ez a tábor már jóval kisebb érdeklődést mutat az eszköz frissitésére. A közeljövőhőz hozzátartozik, hogy a negyedéves eladásokat 80%os részesedéssel az Android vitte ezzel bizonyára nagyobb piaci részesedést szerezve a globális piacon. Minden piac más Hazai számokat böngészve döbbenhetünk rá, mennyire nem igazak ránk a nemzetközi számok. Sajnálatos módon nincsenek 2013-as pontos e-mail kliens és mobil OS megoszlás adatok Magyarországról. Tavalyi adatok alapján viszont jól elválasztható a nemzetközi tendenciáktól. E-mail kliensek piaci megoszlása Fontos előljáróban tisztázni, hogy talán a legnagyobb homály terepére érkeztünk.
10 / 12
A fenti elemzések mutatják, hogy piaconként mennyire eltérő lehet a szerkezet. A szerkezeten túl, szociológiai tény, hogy eltérően viselkednek a felhasználók is, más és más szokásokat kialakítva. Még tovább fűszerezi ezt, hogy mára sokan egyszerre több megoldást is használunk, attól függöen épp hol tartozkodunk, milyen eszköz van a közelünkben. Az egyik legnagyobb publikus e-mail kliens megoszlást követő statisztika a TOP10-es listát követi hónapról-hónapra. Az adataik alapját havi 230 millió e-mail nyitás képezi. Magyarországi viszonylatban erősen csalóka lehet. Sajnos hazai, országos szintű, reprezentatívnak tekinthető adatok nincsenek a köztudatban.
forrás: e-mailclientmarketshare.com
11 / 12
A megoldás A helyes megoldás felfedezéséhez még egy dolgot kell tisztázni. A bevett szemléletet HTML hírleveleink kapcsán. A feljebb vázolt megjelenítési gondok egy része, abból fakad, hogy a minőségi hírleveleket elsősorban asztali klienseken alkalmazható méretekre tervezzük, és ezeket akarjuk felkészíteni a mobil barát sok esetben keskenyebb képernyőre. Ha nem kötjük az ebet a karóhoz, és valóban fontos számunkra, hogy minden ügyfelünk olvasható e-mailt kapjon, akkor jelenleg a weben elterjedt Mobile-first szemlélet alkalmazása a legbiztonságosabb megoldás. A legtöbb esetben teljesen egyedi HTML kódot igénylő hírleveleink kivitelezése a mobilok miatt még tovább bonyolódik, mind több hiba lehetőséget magában hordozva. A bevált szemlélet idejét múlt, és egyre romlik hatékonysága. Beigazolódni látszik a mondás, a kevesebb, több!
Rólunk Társaimmal egy responsive email sablon szerkesztő alkalmazáson dolgozunk, amellyel programozói tudás nélkül, percek alatt készíthetők teljesen egyedi mobil barát email sablonok. Amennyiben felkeltette az érdeklődésedet, kérlek iratkozz fel a béta tesztelőink közé az EDMdesigner.com –on!
Ha bármi kérdésetek volna, állok rendelkezésetekre
[email protected] email címen vagy LinkedIn-en.
Budapest, 2013.10.28. 12 / 12
a
