Email – From recent experiments don’t try and make the desktop client version responsive. I would suggest only trying to address a mobile email client with your media queries. Most of the desktop clients just can’t handle it.
Basically there is no such thing as a responsive email.
Even though you can send it as HTML there is absolutely no guarantee that the email client will render it that way. Indeed, many corporations will default to or insist on receiving ALL emails as plain text (or at best Rich Text).
Mailchimp has a bunch of table based templates you can download and play with (obviously skewed to their requirements) but you’ll soon get the idea.
> Basically there is no such thing as a responsive email.
+1. I hate doing HTML emails, but the rule of thumb is: style like it’s 1999.
Tables in tables in tables in tables…no room for responsiveness. Style for a max pixel width of 600px for optimal viewing, and plan it down to the pixel. Don’t use percentages, because some email clients regress on supported standards.
I would stress not depending on your emails being rendered as HTML. I’m in my sixth year of university and have had the same online webmail system for that whole time. It displays emails in text (minimal rendering) by default, with a link to view in HTML.
While I use Thunderbird if I’m at home, I often deal with emails outside, which means if you are non-essential communication (newsletters, bulk messages, etc) and I struggle to read your content due to excessive markup, you will probably be ignored. While I would click to view in HTML for essential emails, for newsletters I would rarely bother – it’s down to the sender to make me want to do that.
Basically, work with (not against) the limitations. Some markup is not a problem but be aware that it may be visible. Make it easy for a human to read would be my advice. Also be aware that sometimes minimal rendering is also a problem – our webmail doesn’t allow image embedding, but will render most HTML elements. On emails with a lot of pictures making up headers, etc, with defined heights, all of those heights are left intact without the images, pushing content off the page: