-
-
Save tinabeans/6996367 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>Single-Column Responsive Email Template</title> | |
| <style> | |
| @media only screen and (min-device-width: 541px) { | |
| .content { | |
| width: 540px !important; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!--[if (gte mso 9)|(IE)]> | |
| <table width="540" align="center" cellpadding="0" cellspacing="0" border="0"> | |
| <tr> | |
| <td> | |
| <![endif]--> | |
| <table class="content" align="center" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 540px;"> | |
| <tr> | |
| <td> | |
| [PUT EMAIL CONTENT HERE] | |
| </td> | |
| </tr> | |
| </table> | |
| <!--[if (gte mso 9)|(IE)]> | |
| </td> | |
| </tr> | |
| </table> | |
| <![endif]--> | |
| </body> | |
| </html> |
XHTML knee jerk reaction... Why not <!DOCTYPE html>?
Do you use tables for the whole email, including the email content? Or is that only needed for the outer containers?
@lode Tables are needed for the entire email including content.
Love this approach but struggling to get this working in Gmail app on iOS7 iPhone 5. I have to remove the media query to get the expected behaviour of 100% fluid on mobile and constrained width on desktop. Could it be the min-device-width? iPhone 5 landscape is 568px? I thought Gmail app ignored media queries? Including it changes the width the email is rendered at.
@kaihendry I discovered while coding our email that declaring the HTML5 doctype threw more validation errors and made it a headache to run the W3C validator to find mismatched tags, etc. (Mismatched tags are a big issue when you have a lot of nested tables, as is unfortunately sometimes the case with these HTML emails!)
@zeman that's a great point. As of the blogpost authoring we hadn't tested on iOS7 apps, but now that it's reached wider adoption we will take a look.
EDIT: Okay, I've just thought about your question a little more, I realized that it's not actually a bug that you've found. :) The design intent is simply to maximize usage of screen real estate in situations where you have less than the max readable line length of ~90 chars. However in situations where the line width would get too wide to be readable, constrain it with a fixed width layout... regardless of what device it's on. Does that make sense? So in your case of being in landscape mode, having a width constraint applied even in a mobile context fits the design intent. Hope that helps!
This is awesome, I love your work! The only thing I would add is that Outlook.com (when not being used on IE) will not respect the min-device-width media query alone, it would also need min-width. When being used on IE I presume it's picking up on the conditional code and being restricted to 540px, when on Chrome or other browsers, the email is displaying at 100% wide. I simply changed the line to this and it fixed the problem for me in all my tests:
@media only screen and (min-device-width: 541px), screen and (min-width: 541px) {}
But great work on putting this together! I have been meaning to try a fluid approach for a very long time and you've worked out a great way to do it.
Did you see issues when testing with Litmus for Windows Phone 7.5? In my tests, even of just the base template, the conditional comments are visible. https://litmus.com/pub/99ffa14/screenshots
I only have a Windows Phone 7.8 device that I test with, and on that I can't see the comments, so I'm not sure if this is a real bug or a Litmus bug. Anyone have any ideas?
The solution given for Outlook doesn't work for me... :(
Am I allowed to say f'ing awesome! Thanks so much!
Thank you! Very helpful.
Rockstar!
I'm a little new to editing html emails. So, I take your template, put everything I need where it says [PUT EMAIL CONTENT HERE] including all the CSS I need as inline CSS?
I had no idea @tinabeans made this. This file has been in my projects for almost a year.
Original post explaining the code is gone. You can find it on the wayback machine.
Link to blog post: http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/