Let's talk about email HTML.
If you've never worked on emails before, you might think the process works something like this:
- Write some HTML, but maybe with a few more tables than you usually use since emails like those.
- Render it in your browser. Nice! Looking great.
- Send yourself a quick test. Just like in your browser! Sweet!
- Send that PR and move on to the next thing.
In reality, it's more like this:
- Write some HTML with more tables than you think could possibly be necessary. There's no way it'll break with all these tables, right?
- Render it in the browser. Cool, looks fine.
- Send yourself a test, and send one to a service like Litmus or Email on Acid that renders the email in dozens of clients
- Looking good in Gmail...good in Apple mail...wait why is it completely broken in Outlook 2007 (and 2010, 2013, and 2019)? And Yahoo Mail on Internet Explorer? Shoot.
- Better add some more tables. That's usually the solution.
- Well...that didn't work. Find a post from 2009 in a forum for Netscape enthusiasts that implies you might want
to add an extra Outlook-only table using
<!--[if mso | IE]>with
role="presentation" and cellpadding="0" cellspacing="0". Maybe that'll work.
- Outlook 2007 is fixed! Nice! Oh...but now it looks broken on iPhones. Back to the drawing board.