MailChimp

After not finding a suitable default theme I was tasked with coding a new layout for our EDMs. Below is a preview of the layout and the code used to create them. 

 

<!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 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>Eat Street EDM</title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family:sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css"> -->
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<!-- CSS Reset -->
<!-- Progressive Enhancements -->
<style type="text/css">
html,body {
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float:left;
width:50%;
padding:0;
}

.columnc {
float:center;
width:25%;
padding-left:20%;
padding-right:20%;
}

/* columns*/
.column3 {
float:left;
width:33%;
padding:0;
}

/* 4 columns*/
.column4 {
float:left;
width:25%;
padding:0;
}

/* Clear floats after image containers */
.row::after {
content:"";
clear:both;
display:table;
}

* {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}

div[style*=margin: 16px 0] {
margin:0 !important;
}

table,td {
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}

table {
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}

table table table {
table-layout:auto;
}

img {
-ms-interpolation-mode:bicubic;
}

.mobile-link--footer a,a[x-apple-data-detectors] {
color:inherit !important;
text-decoration:underline !important;
}

html,body {
margin:0 auto !important;
padding:0 !important;
height:100% !important;
width:100% !important;
}

* {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}

div[style*=margin: 16px 0] {
margin:0 !important;
}

table,td {
mso-table-lspace:0 !important;
mso-table-rspace:0 !important;
}

table {
border-spacing:0 !important;
border-collapse:collapse !important;
table-layout:fixed !important;
margin:0 auto !important;
}

table table table {
table-layout:auto;
}

img {
-ms-interpolation-mode:bicubic;
}

.mobile-link--footer a,a[x-apple-data-detectors] {
color:inherit !important;
text-decoration:underline !important;
}

.button-td,.button-a {
transition:all 100ms ease-in;
}

.button-td:hover,.button-a:hover {
background:#555555 !important;
border-color:#555555 !important;
}

@media screen and (max-width: 600px) {
.email-container {
width:100% !important;
margin:auto !important;
}
}

@media screen and (max-width: 600px) {
.fluid,.fluid-centered {
max-width:100% !important;
height:auto !important;
margin-left:auto !important;
margin-right:auto !important;
}
}

@media screen and (max-width: 600px) {
.fluid-centered {
margin-left:auto !important;
margin-right:auto !important;
}
}

@media screen and (max-width: 600px) {
.stack-column,.stack-column-center {
display:block !important;
width:100% !important;
max-width:100% !important;
direction:ltr !important;
}
}

@media screen and (max-width: 600px) {
.stack-column-center {
text-align:center !important;
}
}

@media screen and (max-width: 600px) {
.center-on-narrow {
text-align:center !important;
display:block !important;
margin-left:auto !important;
margin-right:auto !important;
float:none !important;
}
}

@media screen and (max-width: 600px) {
table.center-on-narrow {
display:inline-block !important;
}
}
</style>
</head>
<body bgcolor="#ffffff" width="100%" style="Margin: 0;">
<center style="width:100%;background:#ffffff;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family:sans-serif;">
(Optional) This text will appear in the inbox preview, but not the email body.
</div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email Header : BEGIN -->
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="800" style="margin:0 auto;" class="email-container">
<!-- Email Header : BEGIN -->
<tr>
<td style="padding:20px 0;text-align:center;font-family:sans-serif;">
<img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/a7a8c1d7-be06-479a-80e5-e5e7385f2d7b.jpg" width="300" alt="Barker New Farm" border="0" style="height: auto; background: #dddddd; font-family:'roboto'; font-size: 15px; line-height: 15px; color: #ffffff;">
<h1>
Harbour Town Eats: <br>ImageTek™SKY </h1>
</td>
</tr>
<!-- Email Header : END -->
<tr>
<td style="background-color:#ffffff;">
<a href="https://harbourtowngoldcoast.com.au/eats"><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/12a2d18c-c345-4202-8907-7d2068222b1c.jpg" width="100%" alt="alt_text" border="0" style="width: ; max-width: ; height: ; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto;" class="g-img"></a>
</td>
</tr>
<!-- Hero Image, Flush : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td style="background-color:#ffffff;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding:20px;font-family:sans-serif;font-size:15px;line-height:20px;color:#555555;">
<h1 style="margin:0 0 0px;font-size:25px;line-height:30px;color:#f39027;font-weight:normal;">
<strong>ImageTek™SKY </strong>
Overhead printed glazing designs
</h1>
<br>
<p style="margin:0 0 0px;text-indent:2em;">
Harbour Town Eats is a stimulating destination that evokes relaxation through outdoor dining and socialising not only for shoppers, but also for locals and visitors in the area who are searching for a shared experience. Adding to the ambience, the newly renovated space features overhead glass awnings using digital print on glass technology. The installed panels are 13.52mm clear toughened laminated incorporating an ImageTek™ SKY printed design. This project features a leaf design supplied by the architects. The ImageTek™ range utilises digital ceramic paints fused into the glass during toughening to ensure lasting vibrancy and photorealistic colour, enabling higher degrees of quality, design and functional performance.</p>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
</table>
<!-- Background Image with Text : END -->
<!-- 2 Even Columns : BEGIN -->
<div class="row">
<div class="column">
<a href="https://harbourtowngoldcoast.com.au/eats"><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/07a11f94-7d4a-4984-b3c4-2ff7d306f4da.jpg" alt="Harbour Town Eats" style="width:97%"></a>
</div>
<div class="column">
<a href=""><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/8fe72866-a5e8-4842-89a8-5644dd610fe8.jpg" alt="Harbour Town Eats" style="width:97%"></a>
</div>
<!-- Column : END -->
<!-- 1 Row: BEGIN -->
<div class="row">
<a href=""><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/93e0484d-2a37-4da1-87d5-c89b3c0ca481.png" alt="Harbour Town Eats" style="width:120%"></a>
<div class="row">
<a href=""><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/a0b30ab7-9f83-4839-a23c-480d03d7354d.jpg" alt="Harbour Town Eats" style="width:98.5%"></a>
</div>
<!--1 Row : END -->
<!-- Column : BEGIN -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="font-family:sans-serif;font-size:15px;line-height:20px;color:#555555;padding:10px;text-align:left;background:#ffffff;" class="center-on-narrow">
<center>
<span style="color: #555555">
If you would like to learn more please do not hesitate to contact us.</span> </center>
<span style="color: #F47735">
<center>
<strong>07 3131 3555.</strong>
</center></span>
</td>
</tr>
</table>
<!-- Social Media Icons : BEGIN -->
<!-- 3 Even Columns : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="400">
<tr>
<!-- Column : BEGIN -->
<td class="stack-column-right">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding:10px;text-align:center;">
<a href="https://www.facebook.com/domorewithglass/"><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/9e2501f8-9ee3-4851-99d2-b4c15c76ca15.png" width="30" alt="alt_text" border="0" class="fluid" style="height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;"></a>
</td>
</tr>
<tr>
<td style="font-family:sans-serif;font-size:15px;line-height:20px;color:#555555;padding:0 10px 10px;text-align:left;" class="center-on-narrow">
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td class="stack-column-centre">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding:10px;text-align:center;">
<a href="https://www.nationalglass.com.au/"><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/b7c3b77d-db4c-4a5d-abb8-6100cbeea87f.png" width="30" alt="alt_text" border="0" class="fluid" style="height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #ffffff"></a>
</td>
</tr>
<tr>
<td style="font-family:sans-serif;font-size:15px;line-height:20px;color:#555555;padding:0 10px 10px;text-align:left;" class="center-on-narrow">
</td>
</tr>
</table>
</td>
<!-- Column : END -->
<!-- Column : BEGIN -->
<td class="stack-column-left">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding:10px;text-align:center;">
<a href="mailto:sales.brisbane@nationalglass.com.au"><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/457472fb-0d83-4081-867a-bb836b2a4444.png" width="30" alt="alt_text" border="0" class="fluid" style="height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #ffffff;"></a>
</td>
</tr>
<tr>
<td style="font-family:sans-serif;font-size:15px;line-height:20px;color:#555555;padding:0 10px 10px;text-align:left;" class="center-on-narrow">
</td>
</tr>
</table>
</td>
<!-- Column : END -->
</tr>
</table>
<!-- Social Media Icons : END -->
<!-- Column : END -->
<!-- Thumbnail Right, Text Left : END -->
<!-- 1 Column Text : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="50%">
<tr>
<td style="padding:20px;font-family:sans-serif;font-size:15px;line-height:20px;color:#555555;">
<center>
<a href="https://www.nationalglass.com.au/"><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/04bbabe7-72f5-4cb6-a83f-5a7fa250aba6.png" alt="04bbabe7-72f5-4cb6-a83f-5a7fa250aba6.png"></a>
</center>
</td>
</tr>
</table>
<!-- 1 Column Text : END -->
<!-- 4 Even Columns : BEGIN -->
<div>
<a href="https://www.nationalglass.com.au/products/acoustic-glass-acousta/"><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/f8a8906b-0cdc-4832-a94b-bf5b2e9b9fcf.png" alt="Noise Reduction" style="height:50px"></a>

<a href="https://www.nationalglass.com.au/products/duo-plus/"><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/46194d73-211d-40bf-b068-22a503e4bc84.png" alt="Duo Plus" style="height:50px"></a>
</div>

<!-- Column : END -->
<!-- 3 Even Columns : BEGIN -->

<div>
<a href="https://www.nationalglass.com.au/products/printed-glass-imagetek-graphic/"><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/91f84f10-f366-4d2f-834e-f575c6dd33c8.png" alt="ImageTek" style="height:50px"></a>
<a href="https://www.nationalglass.com.au/products/stormsafe/"><img src="https://gallery.mailchimp.com/0fdcd2602a95e2193926c3445/images/850f8cbf-037b-4070-8ed6-8b3dc7ef3332.png" alt="StormSafe" style="height:50px"></a>
</div>
<!-- Column : END -->

<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<!-- Email Footer : END -->
<!-- Full Bleed Background Section : BEGIN -->
<!-- Full Bleed Background Section : END -->
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF;border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px;padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060;font-family:Helvetica, Arial, sans-serif;font-size:11px;line-height:150%;padding-right:20px;padding-bottom:5px;padding-left:20px;text-align:center;">
This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="color:#404040 !important;" rel="noopener noreferrer">*|EMAIL|*</a>
<br>
Email not displaying correctly?<a href="*|ARCHIVE|*"> View in browser</a>
<br><a href="*|ABOUT_LIST|*" target="_blank" style="color:#404040 !important;" rel="noopener noreferrer"><em>why did I get this?</em></a> <a href="*|UNSUB|*" style="color:#404040 !important;">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*" style="color:#404040 !important;">update subscription preferences</a>
<br>*|LIST:ADDRESSLINE|*
<br>
<br>*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>

</div>

</center>
</body>
</html>