HTML email coding / Responsive Email Patterns

Igaz, hogy egy HTML email ugyanúgy viselkedik, mint egy sima weblap, viszont ha azt is szeretnénk, hogy megjelenjen a lehető legtöbb email kliensben (ideértve a Gmailt is, amit mindenki adottságnak tekint, pedig egyáltalán nem az ebben a tekintetben), akkor bizony alaposan fel kell kötnünk a gatyánkat. A MailChimp blogról:

TABLES and SHIM.GIFs are your friend. Keep it simple, because email programs use different HTML rendering engines.

(…)

And we’re not talking about IE, Firefox, and Safari. We’re talking about Outlook, Outlook 2007, Outlook 2003, Outlook Express, Thunderbird, Apple Mail, Eudora, Lotus, Gmail, Yahoo!Mail, AOL, AOL Web, Hotmail, MSN, Comcast, Earthlink, and on and on and on. How to cope? Keep it simple. TABLES. 600 pixels wide max.

(…)

Gmail, Yahoo!Mail, Hotmail, etc., will strip out your DOCTYPE, BODY, and HEAD tags. Makes sense—they don’t want your code to potentially override theirs. Anything you’d normally code inside those tags (bgcolors, embedded CSS, JavaScript, background music files, etc) will also get stripped.

(…)

99% of your CSS won’t work (especially not in the browser-based email services like Gmail, Yahoo!Mail, etc.). That means no CSS-positioning, DIVs, etc. (…) Inline CSS is safer, and plain-old FONT tags are safest (code like it’s 1996, remember?).

Ennyi bevezető után jöhet az érdemi rész, ilyen keretek között reszponzív layoutok készítéséhez remek könyvtár a “Responsive Email Patterns” weblap, ahol mindenféle remekül méretező tábla alapú HTML és CSS kódot találunk. Ezek elvileg tesztelve vannak ilyen szempontból.

Jótét lelkek.