cerberus-email
Version:
A few simple, but solid patterns for responsive HTML email templates and newsletters. Even in Outlook and Gmail.
373 lines (339 loc) • 17.7 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0;
padding: 0;
height: 100% ;
width: 100% ;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing:0 ;
}
/* What it does: Fixes Outlook.com line height. */
.ExternalClass,
.ExternalClass * {
line-height: 100%;
}
/* What it does: Fix for Yahoo mail table alignment bug. */
table {
border-collapse: collapse;
margin: 0 auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none ;
}
/* What it does: Overrides blue, underlined link auto-detected by iOS Mail. */
/* Create a class for every link style needed; this template needs only one for the link in the footer. */
.mobile-link--footer a {
color: #666666 ;
}
/* What it does: Overrides styles added images. */
img {
border:0 ;
outline:none ;
text-decoration:none ;
}
/* Media Queries */
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
/* What it does: Overrides email-container's desktop width and forces it into a 100% fluid width. */
.email-container {
width: 100% ;
}
/* What it does: Forces images to resize to the width of their container. */
img[class="fluid"],
img[class="fluid-centered"] {
width: 100% ;
max-width: 100% ;
height: auto ;
margin: auto ;
}
/* And center justify these ones. */
img[class="fluid-centered"] {
margin: auto ;
}
/* What it does: Forces table cells into full-width rows. */
td[class="stack-column"],
td[class="stack-column-center"] {
display: block ;
width: 100% ;
direction: ltr ;
}
/* And center justify these ones. */
td[class="stack-column-center"] {
text-align: center ;
}
/* Data Table Styles */
/* What it does: Hides table headers */
td[class="data-table-th"] {
display: none ;
}
/* What it does: Change the look and layout of the remaining td's */
td[class="data-table-td"],
td[class="data-table-td-title"] {
display: block ;
width: 100% ;
border: 0 ;
}
/* What it does: Changes the appearance of the first td in each row */
td[class="data-table-td-title"] {
font-weight: bold;
color: #333333;
padding: 10px 0 0 0 ;
border-top: 2px solid #eeeeee ;
}
/* What it does: Changes the appearance of the other td's in each row */
td[class="data-table-td"] {
padding: 5px 0 0 0
}
/* What it does: Provides a visual divider between table rows. In this case, a bit of extra space. */
td[class="data-table-mobile-divider"] {
display: block ;
height: 20px;
}
/* END Data Table Styles */
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#222222" style="margin:0; padding:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#222222" style="border-collapse:collapse;"><tr><td>
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;color:#222222;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide: all;">
(Optional) This text will appear in the inbox preview, but not the email body.
</div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email wrapper : BEGIN -->
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center" style="width:600px; margin: auto;" class="email-container">
<tr>
<td>
<!-- Logo + Links : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr><td height="5" style="font-size: 0; line-height: 0;"> </td></tr>
<tr>
<td valign="middle" width="150" style="padding:5px 0; text-align:left; line-height: 1;" class="stack-column-center">
<img src="http://placehold.it/150x50" alt="alt text" width="150" height="50" border="0" style="display: block; margin: auto;">
</td>
<td valign="middle" style="padding:5px 0; text-align:right; line-height:1.1; font-family: sans-serif; font-size: 13px; color: #999999;" class="stack-column-center">
A mobile-friendly template with media queries.
</td>
</tr>
<tr><td height="5" style="font-size: 0; line-height: 0;"> </td></tr>
</table>
<!-- Logo + Links : END -->
<!-- Main Email Body : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<!-- Single Fluid Image, No Crop : BEGIN -->
<tr>
<td valign="middle" align="center">
<img src="http://placehold.it/600x300" alt="alt text" height="300" width="600" align="center" border="0" style="margin: auto;" class="fluid">
</td>
</tr>
<!-- Single Fluid Image, No Crop : END -->
<!-- Full Width, Fluid Column : BEGIN -->
<tr>
<td style="padding: 4%; font-family: sans-serif; font-size: 18px; line-height: 1.3; color: #666666;">
Ulla nec est tristique, tempor lacus eu, aliquam erat. Cras tristique, arcu ac tristique hendrerit, urna diam mollis libero, vitae gravida nisi lectus in leo. Aenean eu ligula id nisi euismod dapibus et eu mauris. Donec quis dictum velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</td>
</tr>
<!-- Full Width, Fluid Column : END -->
<!-- 2 Columns -> Stacked Columns : BEGIN -->
<tr>
<td>
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td style="padding: 0 4%;">
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<!-- First Column : BEGIN -->
<td valign="top" width="48%" style="padding: 4% 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #666666; text-align: center;" class="stack-column">
<img src="http://placehold.it/160" alt="alt text" height="160" width="160" border="0" align="center">
<br><br>
Mauris urna nibh, dictum quis sollicitudin a, placerat eu ipsum.
<br><br>
<table cellspacing="0" cellpadding="0" border="0" align="center" class="button" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 1; text-align: center; text-decoration: none; display: block; border-radius: 3px;">
<b><!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]--></b>
</a>
</td>
</tr>
</table>
</td>
<!-- First Column : END -->
<!-- Spacer : BEGIN -->
<td width="4%" height="4%" class="stack-column"> </td>
<!-- Spacer : END -->
<!-- Second Column : BEGIN -->
<td valign="top" width="48%" style="padding: 4% 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #666666; text-align: center;" class="stack-column">
<img src="http://placehold.it/160" alt="alt text" height="160" width="160" border="0" align="center">
<br><br>
Mauris urna nibh, dictum quis sollicitudin a, placerat eu ipsum.
<br><br>
<table cellspacing="0" cellpadding="0" border="0" align="center" class="button" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; padding: 0 10px;color: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 1; text-align: center; text-decoration: none; display: block; border-radius: 3px;">
<b><!--[if mso]> <![endif]-->A Button<!--[if mso]> <![endif]--></b>
</a>
</td>
</tr>
</table>
</td>
<!-- Second Column : END -->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 2 Columns -> Stacked Columns : END -->
<!-- Thumbnail + Text, Side by Side -> Stacked : BEGIN -->
<!-- Thumbnail Left, Text Right : BEGIN -->
<tr>
<td style="padding: 4%;">
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" dir="ltr">
<tr>
<td valign="top" width="160" class="stack-column-center" dir="ltr">
<img src="http://placehold.it/160" alt="alt text" height="160" width="160" border="0" align="center">
</td>
<!-- Spacer : BEGIN -->
<td width="4%" height="4%" class="stack-column"> </td>
<!-- Spacer : END -->
<td valign="top" style="font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #666666; text-align: left;" class="stack-column-center" dir="ltr">
Ulla nec est tristique, tempor lacus eu, aliquam erat. Cras tristique, arcu ac tristique hendrerit, urna diam mollis libero, vitae gravida nisi lectus in leo.
<br><br>
Aenean eu ligula id nisi euismod dapibus et eu mauris. Donec quis dictum velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</td>
</tr>
</table>
</td>
</tr>
<!-- Thumbnail Left, Text Right : END -->
<!-- Thumbnail Right, Text Left : BEGIN -->
<tr>
<td style="padding: 4%;">
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" dir="rtl">
<tr>
<td valign="top" width="160" class="stack-column-center" dir="ltr">
<img src="http://placehold.it/160" alt="alt text" height="160" width="160" border="0" align="center">
</td>
<!-- Spacer : BEGIN -->
<td width="4%" height="4%" class="stack-column"> </td>
<!-- Spacer : END -->
<td valign="top" style="font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #666666; text-align: left;" class="stack-column-center" dir="ltr">
Ulla nec est tristique, tempor lacus eu, aliquam erat. Cras tristique, arcu ac tristique hendrerit, urna diam mollis libero, vitae gravida nisi lectus in leo.
<br><br>
Aenean eu ligula id nisi euismod dapibus et eu mauris. Donec quis dictum velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</td>
</tr>
</table>
</td>
</tr>
<!-- Thumbnail Right, Text Left : END -->
<!-- Thumbnail + Text, Side by Side -> Stacked : END -->
<!-- Data Table : BEGIN -->
<tr>
<td width="92%" style="padding: 4%;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; font-weight: bold; border-bottom: 1px solid #cccccc" class="data-table-th">
Name
</td>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; font-weight: bold; border-bottom: 1px solid #cccccc" class="data-table-th">
Date
</td>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; font-weight: bold; border-bottom: 1px solid #cccccc" class="data-table-th">
Location
</td>
</tr>
<tr>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; border-bottom: 1px solid #eeeeee" class="data-table-td-title">
Event Name
</td>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; border-bottom: 1px solid #eeeeee" class="data-table-td">
1-Jan-2014
</td>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; border-bottom: 1px solid #eeeeee" class="data-table-td">
New York, NY
</td>
<td style="display: none;" class="data-table-mobile-divider"> </td>
</tr>
<tr>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; border-bottom: 1px solid #eeeeee" class="data-table-td-title">
Another Name
</td>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; border-bottom: 1px solid #eeeeee" class="data-table-td">
8-Jul-2014
</td>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; border-bottom: 1px solid #eeeeee" class="data-table-td">
Phoenix, AZ
</td>
<td style="display: none;" class="data-table-mobile-divider"> </td>
</tr>
<tr>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; border-bottom: 1px solid #eeeeee" class="data-table-td-title">
A Third Name
</td>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; border-bottom: 1px solid #eeeeee" class="data-table-td">
21-Dec-2014
</td>
<td valign="top" align="left" style="padding: 10px 0; font-family: sans-serif; font-size: 15px; line-height: 1.3; color: #333333; border-bottom: 1px solid #eeeeee" class="data-table-td">
Seattle, WA
</td>
<td style="display: none;" class="data-table-mobile-divider"> </td>
</tr>
</table>
</td>
</tr>
<!-- Data Table : END -->
</table>
<!-- Main Email Body : END -->
</td>
</tr>
<!-- Footer : BEGIN -->
<tr>
<td style="text-align:center; padding:4% 0; font-family:sans-serif; font-size:13px; line-height:1.2; color:#666666;">
You received this email because you opted in to our newsletter.
<br><br>
Company Name • <span class="mobile-link--footer">23 Fake Street, SpringField, Oregon 97477 US</span> • <span class="mobile-link--footer">(123) 456-7890</span>
<br><br>
<unsubscribe style="color:#666666; text-decoration:underline;">unsubscribe</unsubscribe>
</td>
</tr>
<!-- Footer : END -->
</table>
<!-- Email wrapper : END -->
</td></tr></table>
</body>
</html>