Reszponzív email sablon DIV-ekkel
E-mail sablonokat készíteni nem a legkellemesebb kiváltság, főleg mert nagyon sok e-mail kliens van és mindegyik kicsit másképp jeleníti meg a kapott levelet. Több mint egy évtizede, hogy megjelentek a komolyabbnak mondható e-mail sablonok. Azóta is, ha valakit megkérdezünk, vagy rákeresünk a neten, hogy hogyan készítsünk e-mail sablont, a válasz röviden a html <table>. Vagyis (szinte) mindenki, valamilyen többékevésbé bonyolultabb táblázatokból építi fel a levélsablont. Vajon így van ez még, így kell ennek még lennie?
Természetesen a levélsablonok <table> felépítésének komoly okai (és komoly hagyománya) van, kezdve az Outlook Expresstől, no meg, hogy a legelején még a <div> elrendezéseket nem nagyon használtuk.
Milyen e-mail klienseket használunk jelenleg?
Eltelt egy nagyon komoly évtized, vagy még több is. Ez idő alatt nagyon átalakultak az e-mail kliensek és azok használati szokásai is. Már kevésbé asztali gépről, laptopról e-mailezünk, sokkal inkább mobilról. Igen lassan már Magyarországon is elmondhatjuk ezt, bár nálunk minden pár évvel később történik meg. Mondjuk pont ezért aki itthon résen van, az komoly előnyre is szert tehet, szakmailag mindenképp.
Pontosan ezért, mivel megváltoztak az e-mail kliens használati szokások, szükség van a reszponzív sablonokra, egyre inkább kiszorulnak az Outlook (kiemelve a kifejezetten barátságtalan e-mail megjelenítése miatt) és hasonló asztali e-mail kliensek. Helyüket átveszik a webes, illetve még inkább a mobil alkalmazások. Ezek legtöbbje már sokkal jobb támogatást nyújt az e-mail megjelenítés terén is, támogatják a media query-t és a float-olt elrendezéseket is.
2011 - 2012 email kliens használati statisztika (forrás: www.campaignmonitor.com)
kliensek felbontása (forrás: www.campaignmonitor.com)
2012-s nyertesek és vesztesek (forrás: www.campaignmonitor.com)
Ha csak a tavalyi évre nézzük a kliens használati statisztikát, azt látjuk, hogy az asztali kliensek fölé kerekedtek a mobil email kliensek (nem is kicsit), a webes kliens használat nem túl számottevően de csökkent. Az Android 90%-s növekedést ért el, az iOS pedig 74%-s növekedést produkált. Ezzel szemben (hazánkat jobban érintő) az Outlook asztali kliensei -32%-t estek.
Mit tehetünk a jövőre nézve?
Email kliens használat 2013 november (forrás: http://emailclientmarketshare.com)
A legfrissebb statisztikák (2013 november) szerint a top10 e-mail kliensben már csak az Outlook (asztali) és Outlook.com (együtt 23% és csökken) amikre figyelni kell a <table> elrendezés szempontjából. A webes Gmail kliens is esik, így gyakorlatilag már hazánkban is kiesnek azok a levelező kliensek amelyek miatt a <table> elrendezést kellene erőltetni.
Update: Elkészült időközben a hazai email kliens használati statisztika 2013-ra visszanézve, jó olvasást!
Ez pedig új megoldásokra ad lehetőséget, ezzel a lehetőséggel minél hamarabb élni kell és a lehetőségeinkhez mérten kihasználni, hogy a piac már nem csak diktálja, de megköveteli, hogy újítsunk ezen a téren is.
Reszponzív levélsablon <div>-ekkel.
A hosszúra sikeredett bevezető és helyzet elemzés után lássuk a <div> reszponzív levélsablont. A lehető legegyszerűbb sablont próbáltam összeállítani, mely tartalmaz 1 és 2 hasábos részt is, ezek megjelenítőtől függően rendeződnek egymás alá.
reszponzív email sablon 2 hasábbal a Gmail.com-n
reszponzív email sablon 1 hasábos megjelenés a Gmail.com-n
A levélsablon felépítésének alapja az, hogy azokat a kliensek, amelyek nem támogatják a float-olt elemeket és/vagy a media query-t, azokat kihagyjuk (jellemzően Outlook asztali verziói – kivéve Outlook 2003), így az alapja a gyengébb támogatottságú, <head> és media query-t figyelmen kívül hagyó kliensekre készült (lásd Gmail), ezen felül pedig a (szinte) mindent támogató klienseken tökéletesnek mondható a megjelenés. Ezért a media query-re csak annyira támaszkodunk, hogy anélkülis "élvezhető" legyen a levél.
Megjegyezném, hogy a Gmail például a <head>-ből ugyan kiveszi a <style>-t ezért a media query-t is, de a meta viewport-t figyelembe veszi, ezért mobilon Gmail-ből nézve ez a levél is teljesen jól jelenik majd meg. Asztali Gmail-n pedig várhatóan elég széles ablakban fogjuk megjeleníteni.
A sablonban két <meta> tagot használunk, az egyik a format-detection kikapcsolása, a másik a viewport beállítása.
Megjelenés pár főbb kliensben
Megjelenés freemail.hu-n széles ablakban asztali böngésző
Megjelenés freemail.hu-n keskeny ablakban asztali göngészőn
Outlook 2010, sajnos még mindig nincs float, margin, media query támogatás sem (és még sok más sem).
Outlook.com asztali böngészős megjelenés, hasonlóan a Gmail-hoz itt sincs media query
Thunderbird megjelenés, széles ablakban ahogy kell
Thunderbird keskeny ablakban, ahogy kell...
Most akkor, aki arra számított, hogy egy húde nagyon bonyolult és agyon magyarázott levélsablont fog látni, azt el kell szomorítsam. Nem kell agyoncifrázni, nem kell bonyolítani (forrásban látható is), hogy egy sima <div>-s elrendezés, mondhatjuk átgondoltnak. Minimális media query használattal.
Úgy gondolom, hogy aki kompromisszum képes az Outlook-okkal szemben, aki figyelembe veszi a mobil-first tervezést, aki előre tekint, az nem fog a közeljövőben <table> elrendezésekkel vesződni!
Ezúton is szeretném jelezni, hogy amit leírtam, pusztán egy lehetőség, egy lehetséges irány, amit szeretnék jelezni a többi fejlesztőnek. De azt gondolom, hogy lejárt a <table> sablonok ideje és váltani kell.
Minden komment, megjegyzés, észrevétel, szívesen van látva, olvassátok, osszátok...
Jaj és igen, ha küldenétek be screenshotokat, hogy a különböző kliensek hogyan jelenítik meg ezt a sablont azt nagyon megköszönném! Csinálnék belőle egy nagyobb összegzést.
