Responsive Web Design and Email Clients Such as gmail

[sap7724]

I’m a graphic designer who has taught myself (and read a few books) html and css so please forgive my ignorance upfront.

I have recently began to do some responsive web design work. Thus far, the website to mobile parts of my project have been successful. However, I have also began to tackle a digital newsletter project that works well in my html client (Entourage), and in my customers html service (Constant Contact), and also in mobile, but then when it comes to other email clients such as gmail things get a little complicated. I have been told by a few web developers that responsive design and email clients are never going be on the same page and that I should forget about responsive email design and go back to tables.

I, of course, don’t want to go back to tables and I am hoping there is information out there somewhere that agrees with me:)

[Senff]

To create email newsletters with just CSS…..good luck. Not saying it will NEVER be on the same page, but the way things are right now, tables and inline CSS styles are still the way to go. If you really want to do that responsive, I wouldn’t go much further than just using percentage-based widths. Media queries are mostly with styles in the header (or external) so I’d steer clear from that.

[waldito]

I am late for your party, and you proably found your way already after a year, but still wanted to provide an insight for visitors that land here through google search:

Bad news for you:

Divs and other block elements loose their paddings and margins once they are rendered in gmail webmail and mobile gmail apps , making really difficult to keep whitespace neat and clean… and consistent trhough email clients.

Hotmail and Office Outlook will behave in the same way, ignoring certain margin and/or paddings, it depends.

The only consistent spacing element between those guys is applying padding on table cells, it seems to me.

This being said, table width works good, even max width and min-width, giving you a decent liquid layout, that can probably adjust almost ok to clients through desktop to mobile.

That’s why using tables is recommended. You loose semantics and it’s true is a poor markup. I agree, but then again, is a personal email, and not a web page. So yeah.

Think of it like a challenge: Can you trim this design but only using THIS very few html tags?

[Author]

Posts