Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A super-barebones single-column responsive email template, assuming a max-width of 540px. Read about it on the Fog Creek blog.
<!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>
@shamrin

This comment has been minimized.

@kaihendry

This comment has been minimized.

Copy link

@kaihendry kaihendry commented Nov 2, 2013

XHTML knee jerk reaction... Why not <!DOCTYPE html>?

@lode

This comment has been minimized.

Copy link

@lode lode commented Nov 2, 2013

Do you use tables for the whole email, including the email content? Or is that only needed for the outer containers?

@Craigbavender

This comment has been minimized.

Copy link

@Craigbavender Craigbavender commented Nov 8, 2013

@lode Tables are needed for the entire email including content.

@zeman

This comment has been minimized.

Copy link

@zeman zeman commented Nov 11, 2013

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.

@tinabeans

This comment has been minimized.

Copy link
Owner Author

@tinabeans tinabeans commented Nov 11, 2013

@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!)

@tinabeans

This comment has been minimized.

Copy link
Owner Author

@tinabeans tinabeans commented Nov 11, 2013

@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!

@emailwizardry

This comment has been minimized.

Copy link

@emailwizardry emailwizardry commented Nov 19, 2013

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.

@emailwizardry

This comment has been minimized.

Copy link

@emailwizardry emailwizardry commented Dec 4, 2013

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?

@bluemi332

This comment has been minimized.

Copy link

@bluemi332 bluemi332 commented Dec 17, 2013

The solution given for Outlook doesn't work for me... :(

@kenmoss

This comment has been minimized.

Copy link

@kenmoss kenmoss commented Jan 24, 2014

Am I allowed to say f'ing awesome! Thanks so much!

@adbierach

This comment has been minimized.

Copy link

@adbierach adbierach commented Oct 17, 2014

Thank you! Very helpful.

@wamoyo

This comment has been minimized.

Copy link

@wamoyo wamoyo commented Oct 5, 2015

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?

@rememberlenny

This comment has been minimized.

Copy link

@rememberlenny rememberlenny commented Dec 27, 2015

I had no idea @tinabeans made this. This file has been in my projects for almost a year.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment