Skip to content

Instantly share code, notes, and snippets.

@tinabeans
Last active February 13, 2024 09:18
Show Gist options
  • Save tinabeans/6996367 to your computer and use it in GitHub Desktop.
Save tinabeans/6996367 to your computer and use it in GitHub Desktop.
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>
@Craigbavender
Copy link

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

@zeman
Copy link

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
Copy link
Author

@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
Copy link
Author

@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
Copy link

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
Copy link

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
Copy link

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

@kenmoss
Copy link

kenmoss commented Jan 24, 2014

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

@adbierach
Copy link

Thank you! Very helpful.

@wamoyo
Copy link

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
Copy link

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

@jimniels
Copy link

Original post explaining the code is gone. You can find it on the wayback machine.

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