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.

email-client-stat2012

2011 - 2012 email kliens használati statisztika (forrás: www.campaignmonitor.com)

 

email-client-stat2012b

kliensek felbontása (forrás: www.campaignmonitor.com)

 

email-client-stat2012-movers

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-client-stat2013-nov

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á.

gmail chrome wide 2 columns

reszponzív email sablon 2 hasábbal a Gmail.com-n

 

gmail chrome mobile 2 columns

reszponzív email sablon 1 hasábos megjelenés a Gmail.com-n

A sablon forrását itt töltheted le.

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

freemail chrome wide

Megjelenés freemail.hu-n széles ablakban asztali böngésző

 

freemail chrome m

Megjelenés freemail.hu-n keskeny ablakban asztali göngészőn

 

outlook2010 w

Outlook 2010, sajnos még mindig nincs float, margin, media query támogatás sem (és még sok más sem).

 

outlookcom

Outlook.com asztali böngészős megjelenés, hasonlóan a Gmail-hoz itt sincs media query

 

thunderbird wide

Thunderbird megjelenés, széles ablakban ahogy kell

 

thunderbird

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.

Buy and Trade Bitcoin at Binance