Reszponzív email sablon DIV-ekkel II.
Egy korábbi cikkben foglalkoztunk a reszponzív email sablonokkal, ráadásul tisztán divekkel oldottuk meg a template készítést. Ennek eredménye, hogy Outlook klienseken szétesik a levél. Ennek javítását fogjuk most ecsetelni.
Az alap probléma az Outlokkal, hogy nem képes a block elemeket float-olni, illetve a padding tulajdonságot is ignorálja, a media-query-ről ne is beszéljünk. Így nem maradt más, mint picit visszanyúlni a <table> layout-hoz. No, azért annyira nem fogjuk feladni a <div> elrendezésünket.
Milyen tulajdonságai vannak az új reszponzív template-nek?
- 1 és 2 hasábos megjelenés
- alapvetően két méretet támogat 320px és 640px szélességben
- reszponzív a támogatott eszközökön, klienseken
- Outlook barát, így ott a 640px széles verzió fog megjelenni
- az Outlook miatt nem használ padding-t
- széles kijelzőn, ahol nincs media query támogatás ott 640px széles verzió jelenik meg
- mobil kijelzőn, ahol nincs media query támogatás ott 320px széles verzió jelenik meg
A fent említetteken felül tudni kell, hogy a sablon alap elrendezése <div> alapokon nyugszik, a reszponzivitást float-olt <div> elemek biztosítják, media query-vel kiegészítve.
Ahol nincs media query támogatás, de a megjelenítő felület keskenyebb, mint 640px ott a float-olt <div>-k miatt a jobb oldali a bal oldali alá fog csúszni (kivéve Outlook).
Ahol nincs media query támogatás, de mobil kliens jelenít meg, ott a viewport miatt a 320px-s megjelenés fog látszódni.
Az Outlook megjelenést kondicionális kommentek <if mso> biztosítják, némi <table> elrendezéssel, de fontos megjegyezni, hogy ez nem módosít az eredeti <div> elrendezésen, ezért Outlook-n kívül reszponzív tud maradni a template.
Ajánlás a hasonló reszponzív template tervezéséhez
- Mindenképpen a mobile-first tervezést ajánlom
- Vegyük figyelembe, hogy 2 > 1 hasábra törésnél a jobb oldali elem a bal oldali alá törik
- A reszponzivitás miatt, ha 2 hasábra tervezel, akkor 50-50% legyen a törés, így az elemek pontosan egymás alá tudnak törni
- Ne akarj háttérképet használni (egyébként is rontja az olvashatóságot és nő a letöltendő méret is)
- Gondolj a mobilt használókra, a fontos információ a felső harmadban legyen, ne rejtsd el.
Ha szeretnél egy ilyen teszt levelet kapni, akkor add meg email címedet és rögtön kiküldjük neked! Nyugi, az email címedet nem tároljuk el, nem fogsz semilyen megkeresést és spam-t kapni tőlem!
A template letölthető ingyenesen itt, vagy GitHub-ról innen.
Ízelítőül pár kép a megjelenésről:
A teljes eredeti elképzelés
Megjelenés GMail-ben asztali böngészőn
Megjelenés Outlook 2010-ben
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.
