Skip to content

Instantly share code, notes, and snippets.

/mail.out.html

Created November 4, 2011 10:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/1339072 to your computer and use it in GitHub Desktop.
Save anonymous/1339072 to your computer and use it in GitHub Desktop.
Download ZIP
Email newsletter with @media
Raw
mail.out.html
<!--
Even though Gmail and Hotmail strip out your doctype it seems to be a good practice to use the doctype
> Campaign Monitor - http://www.campaignmonitor.com/blog/post/3317/correct-doctype-to-use-in-html-email/
> Email on Acid - http://www.emailonacid.com/blog/details/C18/doctype_-_the_black_sheep_of_html_email_design
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My newsletter title</title>
<style type="text/css">
body{
color: #555;
font-size: 0.625em;
font-family: verdana, sans-serif;
background-color: #F1f1f1 !important;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
.container{
text-align: center;
width: 100%;
}
.center > table{
text-align: left;
margin: 0 auto;
}
.main{
width: 670px;
padding: 10px;
border-radius: 5px;
background: #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.header th{
border-bottom: 1px dashed rgba(37, 0, 42, 0.2);
}
.main p{
font-size: 13px;
}
/* Utility style*/
.subject{
display: none !important;
}
.view-online{
font-size: 9px;
}
@media (max-width: 670px),(max-device-width: 670px) {
.container{
width: auto;
}
.container .center{
padding: 0 0 10px 10px;
}
.center > table{
width: 100% !important;
margin: 0 0;
}
}
</style>
</head>
<body>
<!-- Give gmail, apple mail a nice preview, such that the first characters of the mail aren't; Cant read this email?
Gmail doesn't support display:none on block elements (also requires !important), outlook doesn't support it on inline elements
-->
<div class="subject" style="display: none;">
<span class="subject" style="display: none !important;">
Remarkable prices, just at your webstore now. We have new offers for you, unresistable!
</span>
</div>
<!-- Container for horizontal alignment -->
<table class="container" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="center">
<table cellpadding="0" cellspacing="0" border="0" class="view-online">
<tr>
<td><p>Can't read this email correctly? <a href="#">Have a look online!</a></p></td>
</tr>
</table>
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr class="header"><th><h1>The Webshop</h1></th></tr>
<tr>
<td>
<h2>First item</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Second item</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
</table><!-- .main -->
</td> <!-- .center -->
</tr>
</table><!-- .container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment