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