The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive Web Design and Email Clients Such as gmail Re: Responsive Web Design and Email Clients Such as gmail


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?