The core concepts:
- Percentage based tables
- Max and min widths
- A sprinkle of media queries
after looking at http://www.zurb.com/article/1119/create-emails-for-any-device-introducing-
I had some ideas on how to achieve said repsonsiveness.... this will be an ongoing thing as I try to develop a foundation template for a responsive email.
A few things I didn't like that I had to do to make it work.
To get it to display properly in IE7 I had to set a width on the body. Which is ok with me since in gmail this will be converted to a containing div. Thanks for the heads up on this http://www.emailology.org/#2 IE 7 for some odd reason only liked max width on the body... this will restrict the 100% table from filling the whole width of the browser, we need our images to only be their original size or smaller.
<body style="margin:0; padding:0; max-width:710px; margin:0 auto;" >
The core of the template works with this little container table
<td style="max-width:710px; display: block; margin: 0 auto; padding: 0; clear:both; font-family: Arial, Helvetica, sans-serif;"> <table width="100%" border="0" cellpadding="0" cellspacing="0" >
what it does setting it with display:block forces the table to fill the width of the container, and allows it to have a max width.
The responsive guts!
<td style="max-width:355px; display: block; float:left; "> </td> <td style="max-width:355px; display: block; float:left; "> </td>When at full width: 710px, this will display as intended, two columns floated left. But when the window shrinks below 710 the container will be too small and the columns will stack on top of each other. The trick is to do some basic math!
Also if you want something to look correct on mobile...
The main idea is to set min widths so that tables don't get to small and create gigantic vertical columns usually you will want to set this on a container table and nest tables inside of that min width tables.style="min-width:285px; display: block; "
No comments:
Post a Comment