Skip to content

Instantly share code, notes, and snippets.

@moehammoud

moehammoud/email.html

Last active February 7, 2018 23:56
Show Gist options
  • Save moehammoud/ee71d34adace4de0808261d0a3a28279 to your computer and use it in GitHub Desktop.
Save moehammoud/ee71d34adace4de0808261d0a3a28279 to your computer and use it in GitHub Desktop.
Download ZIP
A Useful Guide for email HTML and quirk/bug fixes - No JS plugins/libraries
Raw
readme.md

Guide for email HTML best practices and quirk/bug fixes

A researched method for building out edms that works across most email clients without any external plugins or JavaScript libraries.

This method works on all versions of an email client unless specified otherwise:

  • Outlook desktop
  • Outlook 2013 120 DPI
  • Gmail desktop / App
  • Lotus Notes 8, 8.5 & IBM Notes 9 desktop
  • Apple Mail 9 & 10 desktop
  • Yahoo! desktop / App
  • iOS mail app
  • All of the above web browser clients plus some other obscure ones.

There are still some minor rendering issues on certain email clients that I am continuing to test on:

  • SFR.fr Chrome / Firefox. Doesn't center elements. Works on IE.
  • Mail.ru Sometimes renders unwanted gaps on some block elements.
  • Android Mail App. Sometimes renders unwanted gaps on some block elements.

Testing was done through a combination of Litmus and real devices. Screen shot of Litmus previews below. https://imgur.com/a/0SLnm

Below is a detailed guide on how to setup and build out an eDM with bugs/quirk fixes and a finished HTML file for reference.

The finish HTML file.

https://gist.github.com/moehammoud/ee71d34adace4de0808261d0a3a28279#file-email-html

Let's begin.

Working from the top down of an eDM HTML document.

The HTML tags

The xmlns tags need to be included(as below) to ensure eDM render properly across Outlook 2007-2013 120DPI email clients.

<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

The <!DOCTYPE> tag

A !DOCTYPE tag has to be used for all edms to render across most email clients.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The <head> tag

The code below needs to be included just after the opening head tag to ensure eDM render properly across Outlook 2007-2013 120DPI email clients.

<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->

The meta tags below will ensure HTML and text renders consistently across all email clients, browsers and that they are responsive on smaller view ports.

<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

The <style> tag

The styles used in this documentation renders well for most major email clients and ensures they are responsive on viewports 600px and under. CSS in the <styles> tag gets stripped in several email clients so the HTML should to be run through a css inliner such as http://templates.mailchimp.com/resources/inline-css/.

Attribute Selectors
Attribute selectors should be avoided for EDM builds. They don't work on Yahoo at all and traditional class selectors will cover most email clients.
Instead of:
table[class*=full-width] {width:320px !important;}
use this:
.full-width {width:320px !important;}

The !Important Rule
The !important rule must always be used for media queries. This ensures that your edm renders well on mobile viewports. The media queries simply won't take on a lot of email clients without the !important rule applied.

Yahoo! quirk:
For Yahoo! email clients, the <styles> tag has to be included in the body for the css to be rendered. This means that the <styles> are in both the head section and the body directly after the opening <body> tag.

The <HTML> markup

Preheader will serve as a copy preview for the user to see before viewing the email.

<p class='preheader' style='font-size:0; color: #ffffff;display:none;'>
   Preheader copy here
</p>

Main body eDM markup

The entire HTML markup for the main body of the edm is encased in a single table that takes up 100% width of the viewport. All the <tr> tags serve as each building block for the eDM.

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f2f2f2" align="center" id="edmTable" style="min-width:100%;width:100%;padding:0;margin:0;border:none;outline:0;">
...eDM body here...
</table>

The style min-width needs to be included for every <table> that has a width of 100%. This ensures that the content is responsive on the Gmail app.

Formatting inner elements of parent table: Best practice

An example of a responsive full width image inside the parent table element:

<tr>
  <td>
      <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#282828" align="center" class="full-width" style='min-width:100%;width:100%;padding:0; margin:0; outline:0; border:none;'>
        <tr>
          <td align="center" style="padding:0; margin:0; outline:0; border:none;">
            <table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4" align="center" class="full-width" style='width:600px;padding:0; margin:0; outline:0; border:none;'>
              <tr>
                <td class="full-center mobile-center">
                  <a href="#" style="outline:0; border:none;text-decoration:none;">
                    <img src="https://placehold.it/600x344?text=HERO+IMAGE+TOP" border="0" class="mobile-padded" alt="ALL-NEW CR-V"/>
                  </a>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>

The inner table is a full width <table> with an inner <table> of 600px which contains the traditional <td> / <html> markup. This ensures that the build is responsive on most email clients.

Every element follows this basic structure.

An example of CTA buttons that stack on smaller viewports. Works across every email client:

<tr>
  <td>
    <table width='100%' border='0' cellspacing='0' cellpadding='0' bgcolor='#f2f2f2' align='center' class='full-width' style="width:100%;min-width:100%;">
      <tr>
        <td align="center">
          <table width='600' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#ffffff' class='mobile-padded' style="width:600px;">
            <tr>

              <td width='50' class='mobile-width-15' style="width:50px;">&nbsp;</td>

              <td width='205' height='40' align='center' class='mobile-stacked-fullwidth mobile-bg-red mobile-margin-bottom' style="width:205px;height:40px;">
               <a href="#" width="205" height="40" style="width:205px;height:40px;display:inline-block;">
                    <img src='https://placehold.it/205x40?text=OFFER+CTA' alt='Find a dealer button' class='' />
                </a>
              </td>

              <td width='20' class='mobile-hidden' style="width:20px;">&nbsp;</td>

              <td width='205' height='40' align='center' class='mobile-stacked-fullwidth mobile-bg-gray' style="width:205px;height:40px;">
               <a href="#" width="205" height="40" style="width:205px;height:40px;display:inline-block;">
                    <img src='https://placehold.it/205x40?text=2ND+CTA' alt='Visit the website button' class='' />
                </a>
              </td>

              <td width='120' class='mobile-width-15' style="width:120px;">&nbsp;</td>

            </tr>

          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

The stacked CTA markup is very similar to the full width image markup except with a few small additions.

There are 5 <td> tags with 2 of them being the button images and 3 of them being the spacing between them. The width of the <td> elements have to add up to 600px(the parent element's width). If not the layout won't render as expected. Always check to make sure the tds add up to their parent's width.

The classes mobile-hidden and mobile-width-15 ensure the spacing of the CTAs is consistent across mobile devices. If the <td> elements aren't styled with media queries they will not scale down on smaller view ports and won't render as expected.

The images have to be saved out at the size that they are to be rendered in the eDM. They won't scale down to fit their parent container on many email clients (mainly outlook).

Email client quirks and bug fixes

General quirks

Background color
Colour values have to be a full hex value. e.g.bgcolor="#123456" or background-color:#123456;.
bgcolor="#123"; won't fly for most email clients.

Unwanted Hairline Gaps
One of the most grief inducing issue I come across is the unwanted hairline gap. For me and probably a lot of people, this issue occurs in Outlook.

I have discovered that if images and sometimes block elements of your build are an odd number height, a small gap is rendered. I don't know why this is, maybe because Outlook rounds up the pixel value and without the element to fill out that height, a small gap is shown.
The only solution that has worked for me is to ensure that all the images used in an EDM are an even number height.
On some occasions this has occurred when a block element was an odd number height where the only solution that worked was to increase/reduce the height of the parent block element and sometimes the font size.

Disclaimer
My solution is only theoretical because I have only seen this quirk / fix mentioned once online and the quirk occurs often when I'm testing.
This can be a hail mary fix for hairline gaps in edms. Besides this quirk fix, edms should be built with best practices in mind because this fix is not tried and tested across the board.

Spacer Images
Many devs online recommend using a spacer image(a 1px transparent image file) which they scale through css to help space out eDMs. This works well across a lot of email clients but falters on mobile clients which don't scale out the image and render in strange ways.

Outlook Desktop Client

On some windows OSs the mso prefix might throw the layout of an edm out.
mso-table-lspace:0; mso-table-rspace:0;
It has never occured with the build standards in this guide. I have seen it happen in other builds I have picked up. Simply removing the styles from the body <style> tag in the body sorts this issue out.

Outlook 2007-2013 120 DPI Email clients

The xmlns tags need to be included(as below) to ensure eDM render properly across Outlook 2007-2013 120DPI email clients.

<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

The code below needs to be included just after the opening head tag to ensure eDM render properly across Outlook 2007-2013 120DPI email clients.

<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
Gmail App

Full width <table> elements have to including the min-width:100%; style. They won't scale down otherwise.

Yahoo! Mail App / Desktop client

The inner parent <td> element needs to have the align='center' declared. This is referring to the parent <td> of the 600px wide <table>, for example:

<tr>
  <td>
    <table width='100%'>
      <tr>
        <td align='center'>
          <table width='600'>
            <tr>
              <td>
                <img src='https://placehold.it/205x40?text=2ND+CTA' alt='Visit the website button' class='' />
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

The eDM won't be centered otherwise.

The <styles> tag needs to be included in the body of the HTML markup. The media queries don't render otherwise.

Raw
email.html
<!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"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{ border-style:none; text-decoration:none; outline:none;padding:0px;}
body{ padding: 0; margin: 0;}
a{ text-decoration:none; border-style:none;border:none !important; }
img{ text-decoration:none;border-style:none;border:none !important; }
body *{ border:none !important; outline:0 !important;}
table{mso-table-lspace:0; mso-table-rspace:0;}
td{font-size:0px;}
.preheader{ display:none !important; }
@media only screen and (max-width:600px) {
.full-width{ width:100% !important; }
.mobile-hidden{ display:none!important; }
.mobile-margin{border-top:10px solid #ffffff !important;}
.mobile-center{text-align: center !important;}
.mobile-stacked { width: 100% !important; display: block; text-align: center; height:auto !important;}
.mobile-stacked img { width:90% !important;}
.mobile-stacked-fullwidth,.mobile-stacked-fullwidth img { width:100% !important; display: block !important; text-align: center !important;}
.mobile-full,.mobile-full img { width:100% !important;}
.mobile-half{ width:50% !important; text-align: center !important;}
.mobile-sidebar-margin{ border-top: 30px solid transparent !important; border-color:transparent !important;}
.mobile-padded{ width:90% !important; }
.mobile-third{width:33.333333% !important;}
.mobile-third-img{width:100% !important;}
.hidden {display: none !important;}
.mobile-social{ width: 90% !important; text-align: center !important; }
.mobile-social{width:30px !important;}
.mobile-social img{width: 40px !important;display: inline;}
.mobile-width-15{width:15px !important;}
.mobile-align-left{text-align: left !important;}
.mobile-bg-red{background-color:#CCCCCC !important;}
.mobile-bg-gray{background-color:#CCCCCC !important;}
.mobile-bg-white{background-color:#CCCCCC !important;}
.mobile-margin-bottom{border-bottom:10px solid #ffffff !important;margin-bottom:5px !important;}
}
</style>
</head>
<body>
<style>
*{ border-style:none; text-decoration:none; outline:none;padding:0px;}
body{ padding: 0; margin: 0;}
a{ text-decoration:none; border-style:none;border:none !important; }
img{ text-decoration:none;border-style:none;border:none !important; }
body *{ border:none !important; outline:0 !important;}
table{mso-table-lspace:0; mso-table-rspace:0;}
td{font-size:0px;}
.preheader{ display:none !important; }
@media only screen and (max-width:600px) {
.full-width{ width:100% !important; }
.mobile-hidden{ display:none!important; }
.mobile-margin{border-top:10px solid #ffffff !important;}
.mobile-center{text-align: center !important;}
.mobile-stacked { width: 100% !important; display: block; text-align: center; height:auto !important;}
.mobile-stacked img { width:90% !important;}
.mobile-stacked-fullwidth,.mobile-stacked-fullwidth img { width:100% !important; display: block !important; text-align: center !important;}
.mobile-full,.mobile-full img { width:100% !important;}
.mobile-half{ width:50% !important; text-align: center !important;}
.mobile-sidebar-margin{ border-top: 30px solid transparent !important; border-color:transparent !important;}
.mobile-padded{ width:90% !important; }
.mobile-third{width:33.333333% !important;}
.mobile-third-img{width:100% !important;}
.hidden {display: none !important;}
.mobile-social{ width: 90% !important; text-align: center !important; }
.mobile-social{width:30px !important;}
.mobile-social img{width: 40px !important;display: inline;}
.mobile-width-15{width:15px !important;}
.mobile-align-left{text-align: left !important;}
.mobile-bg-red{background-color:#CCCCCC !important;}
.mobile-bg-gray{background-color:#CCCCCC !important;}
.mobile-bg-white{background-color:#CCCCCC !important;}
.mobile-margin-bottom{border-bottom:10px solid #ffffff !important;margin-bottom:5px !important;}
}
</style>
<p class='preheader' style='font-size:0; color: #ffffff;display:none;'>
Preheader copy here
</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f2f2f2" align="center" id="edmTable" style="min-width:100%;width:100%;padding:0;margin:0;border:none;outline:0;"><!-- EDM Opening Tag - DO NOT MODIFY - START -->
<!--==========================
Header START
==========================-->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style='width:100%;min-width:100%;'>
<!-- Logo -->
<tr>
<td align="center">
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style='width:600px;padding:0; margin:0; outline:0; border:none;' >
<tr>
<td width="20" style="width:20px;">&nbsp;</td>
<td height="30" style="height:30px;">&nbsp;</td>
<td width="20" style="width:20px;">&nbsp;</td>
</tr>
<tr>
<td width="20" style="width:20px;">&nbsp;</td>
<td align="center">
<a href="#" style="padding:0; margin:0; outline:0; border:none;text-decoration:none;">
<img src="https://placehold.it/182x26?text=LOGO" alt="Logo" border="0">
</a>
</td>
<td width="20" style="width:20px;">&nbsp;</td>
</tr>
<tr>
<td height="30" style="height:30px;">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr><!-- Header END -->
<!--==========================
Hero Image top & bottom START
==========================-->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style='min-width:100%;width:100%;padding:0; margin:0; outline:0; border:none;'>
<tr>
<td align="center" style="padding:0; margin:0; outline:0; border:none;">
<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4" align="center" class="full-width" style='width:600px;padding:0; margin:0; outline:0; border:none;'>
<tr>
<td class="full-center mobile-center">
<a href="#" style="outline:0; border:none;text-decoration:none;">
<img src="https://placehold.it/600x344?text=HERO+IMAGE+1" border="0" class="mobile-padded" alt=""/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4" align="center" class="full-width" style='min-width:100%;width:100%;padding:0; margin:0; outline:0; border:none;'>
<tr>
<td align="center" style="padding:0; margin:0; outline:0; border:none;">
<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4" align="center" class="full-width" style='width:600px;padding:0; margin:0; outline:0; border:none;'>
<tr>
<td class="full-center mobile-center">
<a href="#" style="outline:0; border:none;text-decoration:none;">
<img src="https://placehold.it/600x110?text=HERO+IMAGE+2" border="0" class="mobile-padded" alt=""/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Hero Image top & bottom END -->
<!--==========================
Recepient Message Section - START
==========================-->
<tr>
<td>
<table width='100%' border='0' cellspacing='0' cellpadding='0' bgcolor='#f2f2f2' align='center' class='full-width' style='width:100%;min-width:100%;'>
<tr>
<td align="center">
<table width='600' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#ffffff' class='mobile-padded' style='width:600px';>
<tr>
<td width='50' style="width:50px;">&nbsp;</td>
<td style='font-family:Arial, Helvetica, sans-serif; color: #000000; font-size: 15px; line-height:21px; text-align:left' class='mobile-padded'>
<p style='margin-top:5px;'>
<font style="color:#000000;font-size:34px;font-family: 'Arial Narrow', Arial, sans-serif; font-weight:bold;line-height: 40px; letter-spacing: -0.03em;">FEATURE COPY WITH AN IMPACT</font>
</p>
</td>
<td width='75' style="width:75px;">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width='100%' border='0' cellspacing='0' cellpadding='0' bgcolor='#f2f2f2' align='center' class='full-width' style='width:100%;min-width:100%;'>
<tr>
<td align="center">
<table width='600' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#ffffff' class='mobile-padded' style='width:600px';>
<tr>
<td width='50' style="width:50px;">&nbsp;</td>
<td style='font-family:Arial, Helvetica, sans-serif; color: #000000; font-size: 15px; line-height:21px; text-align:left' class='mobile-padded'>
<p style='margin-top:5px;'>Hi John Smith,<br><br>
<font style="color:#000000; ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur diam nisl, varius ut varius at, porttitor eu urna. Suspendisse potenti. Nulla laoreet ex ut nulla pulvinar tempor. Praesent imperdiet dignissim metus, vel viverra odio cursus non:<br><br>
&#8226; Item 1<br>
&#8226; Item 2 with an condition<br>
&#8226; Item 3 for the win<br><br>
Aliquam erat volutpat. Proin ornare venenatis tellus sed semper.
</font>
</p>
</td>
<td width='75' style="width:75px;">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Recepient Message Section - END -->
<!-- Line Break - START-->
<tr>
<td>
<table width='100%' border='0' cellspacing='0' cellpadding='0' bgcolor='#f2f2f2' align='center' class='full-width' style="width:100%;min-width:100%;">
<tr>
<td align="center">
<table width='600' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#ffffff' class='mobile-padded' style="width:600px;">
<tr>
<td height='30' width="100%" style='font-size:1px; line-height:0px;height:30px;min-width:100%;'>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Line Break - END-->
<!--==========================
CTAs Stacked - START
==========================-->
<tr>
<td>
<table width='100%' border='0' cellspacing='0' cellpadding='0' bgcolor='#f2f2f2' align='center' class='full-width' style="width:100%;min-width:100%;">
<tr>
<td align="center">
<table width='600' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#ffffff' class='mobile-padded' style="width:600px;">
<tr>
<td width='50' class='mobile-width-15' style="width:50px;">&nbsp;</td>
<td width='205' height='40' align='center' class='mobile-stacked-fullwidth mobile-bg-red mobile-margin-bottom' style="width:205px;height:40px;">
<a href="#" width="205" height="40" style="width:205px;height:40px;display:inline-block;">
<img src='https://placehold.it/205x40?text=OFFER+CTA' alt='OFFER CTA' class='' />
</a>
</td>
<td width='20' class='mobile-hidden' style="width:20px;">&nbsp;</td>
<td width='205' height='40' align='center' class='mobile-stacked-fullwidth mobile-bg-gray' style="width:205px;height:40px;">
<a href="#" width="205" height="40" style="width:205px;height:40px;display:inline-block;">
<img src='https://placehold.it/205x40?text=2ND+CTA' alt='Visit the website button' class='' />
</a>
</td>
<td width='120' class='mobile-width-15' style="width:120px;">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- CTAs Stacked - END -->
<!-- Line Break - START-->
<tr>
<td>
<table width='100%' border='0' cellspacing='0' cellpadding='0' bgcolor='#f2f2f2' align='center' class='full-width' style="width:100%;min-width:100%;">
<tr>
<td align="center">
<table width='600' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#ffffff' class='mobile-padded' style="width:600px;">
<tr>
<td height='30' width="100%" style='font-size:1px; line-height:0px;height:30px;min-width:100%;'>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Line Break - END-->
<!-- Line Break - START-->
<tr>
<td>
<table width='100%' border='0' cellspacing='0' cellpadding='0' bgcolor='#f2f2f2' align='center' class='full-width' style="width:100%;min-width:100%;">
<tr>
<td>
<table width='600' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#f2f2f2' class='mobile-padded' style="width:600px;">
<tr>
<td height='40' width="100%" style='font-size:1px; line-height:0px;height:40px;min-width:100%;'>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Line Break - END-->
<!--============================================================================================================================================================
==============================
==============================
Footer - START ===============
==============================
==============================
================================================================================================================================================================-->
<!--==========================
Footer Logo - START
==========================-->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style="width:100%;min-width:100%;">
<tr>
<td align="center">
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style="width:600px;">
<tr>
<td width="20" style="width:20px;">&nbsp;</td>
<td height="30">&nbsp;</td>
<td width="20" style="width:20px;">&nbsp;</td>
</tr>
<tr>
<td width="20" style="width:20px;">&nbsp;</td>
<td align="center">
<a href="#">
<img src="https://placehold.it/210x45?text=FOOTER+LOGO" alt="Logo - Footer" />
</a>
</td>
<td width="20" style="width:20px;">&nbsp;</td>
</tr>
<tr>
<td width="20" style="width:20px;">&nbsp;</td>
<td height="30">&nbsp;</td>
<td width="20" style="width:20px;">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer Logo - END -->
<!--==========================
Social Icons - START
==========================-->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;width:100%;background-color:black;min-width:100%;min-width:100%;">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="mobile-padded" style="background-color:black;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;width:600px;">
<tr>
<td cellspacing="0" cellpadding="0" width="100%" align="center" class="mobile-stacked-fullwidth" bgcolor="black" style="width:100%;background-color:black;min-width:100%;">
<table cellspacing="0" cellpadding="0" width="100%" bgcolor="black" color="black" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;width:100%;background-color:black;min-width:100%;">
<tr>
<td cellspacing="0" cellpadding="0" border="0" width="120" height="30" style="font-size:0px; line-height:0px;width:120px;background-color:black;height:30px;border:0;outline:none;padding:0;margin:0;" color="black" class="mobile-social-spacer">&nbsp;</td>
<td cellspacing="0" cellpadding="0" border="0" color="black" width="90" height="30" align="center" class="mobile-social" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;width:90px;background-color:black;height:30px;border:0px;outline:none;padding:0;margin:0;"><a href="#"><img src="https://placehold.it/30x30?text=FB" alt="Facebook icon" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"></a></td>
<td cellspacing="0" cellpadding="0" border="0" width="90" align="center" height="30" class="mobile-social" bgcolor="black" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;width:90px;background-color:black;height:30px;border:0px;outline:none;padding:0;margin:0;"><a href="#"><img src="https://placehold.it/30x30?text=TW" alt="Twitter icon" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"></a></td>
<td cellspacing="0" cellpadding="0" border="0" width="90" align="center" height="30" class="mobile-social" bgcolor="black" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;width:90px;background-color:black;height:30px;border:0px;outline:none;padding:0;margin:0;"><a href=""><img src="https://placehold.it/30x30?text=YT" alt="You tube Icon" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"></a></td>
<td cellspacing="0" cellpadding="0" border="0" width="90" align="center" height="30" class="mobile-social" bgcolor="black" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;width:90px;background-color:black;height:30px;border:0px;outline:none;padding:0;margin:0;"><a href="#"><img src="https://placehold.it/30x30?text=IN" alt="Instagram icon" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"></a></td>
<td cellspacing="0" cellpadding="0" border="0" width="120" height="30" bgcolor="black" style="font-size:0px; line-height:0px;width:120px;background-color:black;color:black;height:30px;border:0;outline:none;padding:0;margin:0;" color="black" class="mobile-social-spacer">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Social Icons - END -->
<!-- Line Break - START-->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style="width:100%;min-width:100%;">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="black" class="mobile-padded" style="width:600px;">
<tr>
<td height="50" width="100%" style="font-size:1px; line-height:0px; height:50px;min-width:100%;" >&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Line Break - END -->
<!-- Line Break - START-->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style="width:100%;min-width:100%;">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="mobile-padded" style="width:600px;">
<tr>
<td height="1" width="100%" style="font-size:1px; line-height:0px;height:1px;min-width:100%;">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Line Break - END -->
<!-- Line Break - START-->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style="width:100%;min-width:100%;">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="black" class="mobile-padded" style="width:600px;">
<tr>
<td height="30" width="100%" style="font-size:1px; line-height:0px;height:30px;min-width:100%;">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Line Break - END -->
<!--==========================
Disclaimer - START
==========================-->
<tr>
<td>
<table width='100%' border='0' cellspacing='0' cellpadding='0' bgcolor='black' align='center' class='full-width' style="width:100%;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;min-width:100%;">
<tr>
<td align="center">
<table width='600' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='black' class='mobile-padded' style="width:600px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:600px;">
<tr>
<td width='20' bgcolor="black" style="background-color:black;width:20px;">&nbsp;</td>
<td bgcolor="black" style='font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height: 14px; text-align:left; color:#7c7c7c; background-color:black;' class='mobile-padded'>
<p style='margin-top:5px;'><br>* Nam arcu mauris, egestas at venenatis non, laoreet in est. In gravida suscipit vehicula. Donec mollis nunc sem, euismod auctor nisi mollis id. Sed in felis sit amet purus lobortis <a href='#' style='text-decoration: underline;border-style: none;color:#b3b3b3;'><span style='color:#b3b3b3'>malesuada.com.au</span></a> sed et orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br><br>
Copyright © 2017 Aliquam lectus ligula, malesuada non ipsum a, accumsan accumsan mi. Suspendisse at magna justo. Pellentesque viverra ipsum at vulputate cursus. Fusce tincidunt scelerisque purus sed bibendum. Quisque non tempus erat. Mauris sed venenatis mauris, nec fermentum nibh. Fusce eget feugiat enim, nec rutrum ex.<br><br>
If you’d like to opt out from our email list, please <span style='color:#b3b3b3;text-decoration:underline;'><%@ include view='UnsubLinkLeadEvent' %></span>. However, if you no longer wish to receive any marketing communications, please email 'unsubscribe from all' to our Privacy Contact Officer at <a href='mailto:test@email.com.au' style='text-decoration: underline;border-style: none;color:#b3b3b3;'><span style='color:#b3b3b3'>test@email.com.au</span></a>. We are committed to your privacy.<br>
</p>
</td>
<td width='20' bgcolor="black" style="background-color:black;width:20px;">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Disclaimer - END -->
<!--============================================================================================================================================================
Footer - END
================================================================================================================================================================-->
<!--==========================
View in browser START
==========================-->
<!-- Line Break - START-->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style="width:100%;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;min-width:100%;">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="black" class="mobile-padded" style="width:600px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td height="20" width="100%" style="font-size:1px; line-height:0px;height:20px;min-width:100%;">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Line Break - END -->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class="full-width" style="width:600px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td height="45" style="height:25px;" align="center">
<span style="text-align:center;font-size: 11px; font-family: Arial, Helvetica, sans-serif; color: #7e7e7e">Can't view this email? <a style="font-size: 11px;text-decoration: underline;color: #b3b3b3;border-style: none;" href="<%@ include view='MirrorPageUrl' %>">Click here</a></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Line Break - START-->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="black" align="center" class="full-width" style="width:100%;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;min-width:100%;">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="black" class="mobile-padded" style="width:600px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td height="20" width="100%" style="font-size:1px; line-height:0px;height:20px;min-width:100%;">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Line Break - END -->
<!-- View in browser END -->
</table><!-- EDM Opening Tag - DO NOT MODIFY - END -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment