Creating HTML email templates
Nov 07, 2012
Table of contents:
- Why is creating HTML emails such a minefield?
- Creating a template
- The main structure
- The Header
- The Body
- The Left Column
- The Right Column
- Lessons to learn
- The full template
Making HTML email templates is one of the necessary evils of creating an email marketing campaign. Why is it a necessary evil? Because email development is stuck firmly 10 years in the past!
I’ve written previously on creating an automatic Email Marketing Campaign that actually works and the value of email lists, so it only seems right that I also show you how to make elegant HTML email templates. You don’t want to invest a large amount of time building up an email list and writing amazing content, only for your campaign to be unsuccessful because your emails are unreadable.
Before we get into the tutorial, first a word of advice. If you are using an email delivery platform like MailChimp or Campaign Monitor, I would suggest just using one of their default templates if you are just looking for a quick turnaround. Really, you just need a template that will deliver your content, you don’t need to invest lots of time to handcraft the perfect branded template.
Why is creating HTML emails such a minefield?
If you have ever created an HTML website, you will know getting your page to look consistent across all of the different browsers can be a bit of a pain. Whilst every web designer loathes Internet Explorer, Web browsers have actually come a long way when you compare them to Email clients.
It’s no exaggeration when I say that email template design is stuck 10 years in the past. If you can remember back to table based web design and inline styles, email design has not progressed past this stage. Whilst browsers have come quite a long way, email clients have refused to change.
In order to create email templates that work in all email clients and providers, we need to fall back to table based design and inline style. There are also some other quirks and best practices that you should be aware of.
Generally, the following are the major issues with creating email templates.
1. Table based
All email templates have to be created using tables. If you aren’t from the olden days of pure table based web design, it’s really not that hard to get your head around. You are essentially just creating a big table with many smaller tables inside of each other.
2. Inline CSS
All your CSS should be inline. Generally, you will find many of the most common CSS properties are supported by all of the major email clients. However, don’t put your CSS into the head of your email because certain clients strip it out coughGMailcough.
Writing Inline CSS is a pain, but you have to do it if you want to make bullet proof email templates.
Throughout this tutorial, I will be writing all of my CSS inline. This means we’ll be writing a lot of CSS that repeats itself. You could probably get away with writing less, or writing it in a more efficient way depending on what email clients or providers you are targeting.
3. Images
The final big problem of email template design is images. I would say you should use as little imagery as possible, and never rely on images for any kind of design or structure.
When you send an email with images, most email clients will ask the receiver if they wish to display the images. This means that your email will be a mess of broken images when the receive first opens it. Images will also slow down loading emails on mobile internet connections and can seriously distort the content of an email if the client does not render them properly.
So, only use images if you really need to, and don’t try and do anything fancy with them. Don’t avoid using images all together or your emails will be boring, just make sure you are careful with how you use them.
Creating a template
Above is a screenshot of the email template we are going to be making. As you can see, it is a simple 2 column template with some simple widgets.
The main structure
The main structure of our template is going to be 600 pixels wide and aligned to the centre of the screen. We are also going to have the background filled with a colour. 600 pixels wide is a standard accepted width for email templates because of email clients like Microsoft Outlook.
In Web Design, if you wanted to set a background colour, you would simply add it to the body of the page. However, This is too unreliable with email design. To use a background colour, we need to create a wrapper table that is set to 100%. We can then set the background colour of this table to the desired background colour.
<table
width="100%"
cellpadding="0"
cellspacing="0"
style="background-color: #fafad2"
></table>Next we need to make a 600 pixel wide table to hold the content and structure of the email.
<table width="100%" style="background-color: #fafad2">
<tr>
<td>
<table width="600px" align="center" style="background-color: #ffffff">
<tr>
<td>
<!- Content ->
</td>
</tr>
</table>
</td>
</tr>
</table>So now we have the main wrapper table that is aligned to the centre and the entire email has a background colour.
From now on I will only be writing the specific chunk of the code we will be looking at and I won’t be repeating this structure in every example. Just be aware that all of the following code needs to sit in the second nested table.
The Header
The next part of the template we will be making is the header. For this template, I’m going to be separating each chunk into it’s own table. For me, the modularity of separate nested tables for each section makes the code more logical when I need to come back and make a change. This is a personal choice, so don’t feel like you have to set your template up this way.
So firstly we will create a table for the header.
<table width="600px"></table>You’ll notice that I’m setting the width of the table. You don’t have to explicitly set the width of the table because the content should expand to fill the space, but I usually put in explicit widths for key parts of the template just to make sure nothing gets screwed up.
Next we need to create the cells and rows that will hold the content of the header.
As you can see from my design, the company logo is in the top left hand corner, and the “visit us online” is in the top right hand corner. I wanted to put this content at the very top of the email so that it is the first thing that shows up when the receiver gets a preview of the email in their client. Often email previews will look nasty because the email starts with unsubscribe links or broken images.
The header of the email is basically comprised of 4 cells.
Logo - The logo spans two rows Banner - The banner spans two columns
And the Visit us online and the Special offer fit into the remaining space.
To make the Logo and the Visit us online cells, we need the following table cell structure. Again, I’m using explicit widths, but you don’t have to.
<tr>
<td rowspan="2" style="width: 200px">
<!- Logo ->
</td>
<td style="width: 400px">
<!- Visit us online ->
</td>
</tr>Next we need to make the Special offer cell. Notice how it’s only one cell despite our header table being made up of rows with two cells. This is because the logo cell is spanning down two rows.
<tr>
<td style="width: 400px">
<!- Special offer ->
</td>
</tr>And finally we need the banner row. Again, notice how this cell expands across two cells to fit the entire width of the row.
<tr>
<td colspan="2">
<!- Banner ->
</td>
</tr>Now for the content. As I mentioned at the top of this post, I will be writing all of my CSS inline with lots of duplication. You don’t have to be as strict as this as there are certain ways you can get around this problem. However I want to ensure that this email looks good in any client, so that is why I write it this way.
So here is the basic markup for the Logo cell.
<p>
<h1>
<span>Pets
</span>
<span>Co
</span>
</h1>
<span>Making your pet happy!
</span>
</p>Generally I would wrap all of your content in paragraph or span tags. Weird things can happen if you start using padding and margin on table cells so it’s easier to control spacing with paragraph or span tags.
Next we need to add style to each of the elements.
<h1
style="
font-family: verdana;
font-size: 32px;
margin: 10px 0 0 0;
text-align: center;
"
></h1>
<span style="color: #698b22">Pets</span><span style="color: #99cc32">Co</span>
<span
style="
font-family: georgia;
display: block;
font-size: 16px;
color: #828282;
text-align: center;
margin: 0px;
"
>Making your pet happy!</span
>As you can see, it’s already a lot of CSS!
Next for the Visit us online section:
<p
style="
font-family: verdana;
font-size: 10px;
background-color: #454545;
color: #dedede;
text-align: right;
padding: 5px;
"
>
Visit us online at
<a href="#" style="color: #ffffff; text-decoration: none">petsco.com</a>
</p>Notice how I’m using the long form of white hexadecimal. Some clients don’t recognise the short forms so always stick to the longer versions.
Also, notice how I need to set the colour and the text decoration as part of the style of the link, rather than the container element.
Next the Special offer section:
<td
style="
width: 400px;
border-left: 5px solid #a2cd5a;
background-color: #d4ed91;
"
>
<p
style="
font-family: verdana;
font-size: 14px;
text-align: center;
margin: 5px 0 10px 0;
"
>
<b>Special offer:</b>
<a
href="#"
style="
color: #000001;
text-decoration: none;
padding: 0 0 5px 0;
border-bottom: 1px solid #000001;
"
>Half price on all doggy treats!</a
>
</p>
</td>In this section I’m giving the cell a background colour and a border on the left side. Also notice how I set the colour of the link to #000001 rather than full black. GMail strips out references to black and replaces it with blue. To get around this problem, just set the colour to slightly off black.
And finally, here is the banner image:
<td colspan="2">
<img
src="happy-dog.jpg"
alt="Happy dog and her owner"
width="595"
height="309"
/>
</td>Notice here how I set the alt tag and set an explicit width and height for the image. This is important because some email clients will just choose a random size for your image if you don’t set it. This is a problem when the user receives an email and has to click “Display images”. Before she has clicked “Display” the email client might render the broken image gaps at random sizes, potentially distorting your template and making it look like crap.
Here is the full code for the header section:
<!- Header ->
<table width="600px">
<tr>
<td rowspan="2" style="width: 200px;">
<p>
<h1 style="font-family: verdana; font-size: 32px; margin: 10px 0 0 0; text-align: center;">
<span style="color: #698B22;">Pets
</span>
<span style="color: #99CC32;">Co
</span>
</h1>
<span style="font-family: georgia; display: block; font-size: 16px; color: #828282; text-align: center; margin: 0px;">Making your pet happy!
</span>
</p>
</td>
<td style="width: 400px;">
<p style="font-family: verdana; font-size: 10px; background-color: #454545; color: #dedede; text-align: right; padding: 5px;">Visit us online at
<a href="#" style="color: #ffffff; text-decoration: none;">petsco.com
</a>
</td>
</tr>
<tr>
<td style="width: 400px; border-left: 5px solid #a2cd5a; background-color: #d4ed91;">
<p style="font-family: verdana; font-size: 14px; text-align: center; margin: 5px 0 10px 0;">
<b>Special offer:
</b>
<a href="#" style="color: #000001; text-decoration: none; padding: 0 0 5px 0; border-bottom: 1px solid #000001;">Half price on all doggy treats!
</a>
</p>
</td>
</tr>
<tr>
<td colspan="2">
<img src="happy-dog.jpg" alt="Happy dog and her owner" width="595" height="309" />
</td>
</tr>
</table>
<!-/ Header ->The Body
The body of the email is another nested table that has one row and two cells for each of the columns. Each column is then a nested table within each of the body cells.
So first we need to create the table with one row and two cells.
<table width="600px">
<tr>
<td>
<!- Left ->
</td>
<td>
<!- Right ->
</td>
</td>
</table>Next we need to add widths for each column and the valign property so the content of each column starts at the top. By default your content will want to sit in the middle of the height of the column, the valign property fixes this:
<td width="200px" valign="top">
<!- Left ->
</td>
<td width="400px" valign="top">
<!- Right ->
</td>The Left Column
Each section of content will be nested in it’s own widget table. Again, in my opinion, structuring your template like this makes it easier to come back to in the future.
Here is the markup for each widget in the left column. If you are familiar with HTML and CSS then there shouldn’t be anything to explain. If you aren’t familiar with HTML and CSS, then hopefully the inline styles will enable you to alter exactly the bit of style you want to alter.
<!- Widget ->
<table>
<tr>
<td>
<p
style="
font-family: verdana;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
padding: 12px 5px 5px 5px;
"
>
In this issue:
</p>
<ol
style="
font-family: verdana;
font-size: 11px;
background-color: #cde472;
color: #454545;
line-height: 20px;
padding: 10px 0px 5px 25px;
"
>
<li style="margin: 0 0 10px 0; background-color: #f7f7f7; padding: 5px">
<a
href="#"
style="
color: #000001;
text-decoration: none;
padding: 0 0 3px 0;
border-bottom: 1px dashed #3d3d3d;
"
>Top tips to keep your dog healthy</a
>
</li>
<li style="margin: 0 0 10px 0; background-color: #f7f7f7; padding: 5px">
<a
href="#"
style="
color: #000001;
text-decoration: none;
padding: 0 0 3px 0;
border-bottom: 1px dashed #3d3d3d;
"
>Ideas to keep your cat entertained this winter</a
>
</li>
<li style="margin: 0 0 10px 0; background-color: #f7f7f7; padding: 5px">
<a
href="#"
style="
color: #000001;
text-decoration: none;
padding: 0 0 3px 0;
border-bottom: 1px dashed #3d3d3d;
"
>Everything you need to know about pet insurance</a
>
</li>
</ol>
</td>
</tr>
</table>
<!- / Widget -><!- Widget ->
<table width="100%">
<tr>
<td>
<p
style="
font-family: verdana;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
padding: 12px 5px 5px 5px;
"
>
News round up:
</p>
<ol
style="
list-style: none;
font-family: verdana;
font-size: 10px;
background-color: #cde472;
color: #454545;
line-height: 20px;
padding: 0px;
"
>
<li style="margin: 0px; background-color: #ededed; padding: 5px">
<a
href="#"
style="color: #000001; text-decoration: none; padding: 0 0 3px 0"
>Competition winner...</a
>
</li>
<li style="margin: 0px; background-color: #dedede; padding: 5px">
<a
href="#"
style="color: #000001; text-decoration: none; padding: 0 0 3px 0"
>New store opening...</a
>
</li>
<li style="margin: 0px; background-color: #ededed; padding: 5px">
<a
href="#"
style="color: #000001; text-decoration: none; padding: 0 0 3px 0"
>Charity event...</a
>
</li>
<li style="margin: 0px; background-color: #dedede; padding: 5px">
<a
href="#"
style="color: #000001; text-decoration: none; padding: 0 0 3px 0"
>New store opening...</a
>
</li>
<li style="margin: 0px; background-color: #ededed; padding: 5px">
<a
href="#"
style="color: #000001; text-decoration: none; padding: 0 0 3px 0"
>Charity event...</a
>
</li>
</ol>
</td>
</tr>
</table>
<!- / Widget -><!- Widget ->
<table width="100%">
<tr>
<td>
<p
style="
font-family: verdana;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
padding: 12px 5px 5px 5px;
margin: 0px;
"
>
Forward to a friend
</p>
<p
style="font-family: verdana; font-size: 10px; padding: 5px; margin: 0px"
>
Do you know another pet lover who might be interested in this email?
</p>
<p
style="
font-family: verdana;
font-size: 10px;
padding: 5px 0;
margin: 5px;
"
>
<a
href="#"
style="
color: #000001;
text-decoration: none;
padding: 5px;
background-color: #f5f5f5;
border: 1px solid #dedede;
"
>Forward →</a
>
</p>
</td>
</tr>
</table>
<!- / Widget -><!- Widget ->
<table width="100%">
<tr>
<td>
<p
style="
font-family: verdana;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
padding: 12px 5px 5px 5px;
margin: 0px;
"
>
Contact us
</p>
<p
style="font-family: verdana; font-size: 10px; padding: 5px; margin: 0px"
>
If you would like to contact us, please use one of the following methods
</p>
<p
style="font-family: verdana; font-size: 10px; padding: 5px; margin: 0px"
>
<b>Tel:</b> 01234 567 8910<br /><b>Email:</b> help@petsco.com<br /><a
href="#"
style="color: #000001"
>www.petsco.com</a
>
</p>
</td>
</tr>
</table>
<!- / Widget -><!- Widget ->
<table width="100%">
<tr>
<td>
<p
style="
font-family: verdana;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
padding: 12px 5px 5px 5px;
margin: 0px;
"
>
Unsubscribe
</p>
<p
style="font-family: verdana; font-size: 10px; padding: 5px; margin: 0px"
>
If you want to unsubscribe from our newsletter, click the button below.
</p>
<p
style="
font-family: verdana;
font-size: 10px;
padding: 5px 0;
margin: 5px;
"
>
<a
href="#"
style="
color: #000001;
text-decoration: none;
padding: 5px;
background-color: #f5f5f5;
border: 1px solid #dedede;
"
>Unsubscribe →</a
>
</p>
</td>
</tr>
</table>
<!- / Widget ->The Right Column
Again, I won’t go through every character of of the right column because it should all be self explanatory if you know even just a little bit of HTML and CSS.
Also, the 2nd, 3rd and 4th widgets are all exactly the same, so I’ll only give you the code for the 2nd one.
<!- Widget ->
<table>
<tr>
<td>
<p style="font-family: verdana; font-size: 16px; line-height: 22px; color: #707070; margin: 0px; padding: 10px 10px 10px 10px;">
<b>Welcome
</b> to the latest edition of the PetsCo monthly newsletter!
</p>
<p style="font-family: verdana; font-size: 12px; line-height: 20px; color: #707070; margin: 0px; padding: 0 10px 0px 10px;">In this edition we have some fantastic tips for keeping your pooch healthy through the cold weather, how to keep your feline friend entertained this winter and everything you need to know to navigate the minefield of pet insurance!
</p>
</p>
<p style="font-family: verdana; font-size: 12px; line-height: 20px; color: #707070; margin: 0px; padding: 0 10px 20px 10px;">Sed viverra imperdiet diam, condimentum scelerisque ligula vulputate eget. Vestibulum nisi mauris, adipiscing laoreet luctus eu, condimentum sollicitudin nisl. Vivamus vestibulum risus ac augue hendrerit vel pretium nisl gravida. Duis enim massa, varius quis porttitor nec, sagittis nec felis.
</p>
</p>
</td>
</tr>
</table>
<!-/ Widget -><!- Widget ->
<table
width="400px"
style="
margin: 0 0 15px 5px;
background-color: #e8f1d4;
border-left: 3px solid #454545;
"
>
<tr>
<td>
<h2
style="font-family: verdana; font-size: 20px; margin: 0px; padding: 5px"
>
Top tips to keep your dog healthy
</h2>
<p
style="
font-family: verdana;
font-size: 11px;
color: #5c5c5c;
padding: 5px;
margin: 0px;
"
>
Curabitur aliquam magna nec elit blandit hendrerit. Suspendisse
venenatis, ligula ac vestibulum vestibulum, nulla nisi pulvinar nunc,
tempus viverra ipsum ante vitae massa. Suspendisse commodo facilisis
egestas. Nulla dui augue, ultricies id ullamcorper eu, commodo non dui.
</p>
<p
style="font-family: verdana; font-size: 10px; padding: 5px; margin: 5px"
>
<a
href="#"
style="
color: #000001;
text-decoration: none;
padding: 5px;
background-color: #f5f5f5;
border: 1px solid #dedede;
"
>Read more</a
>
</p>
</td>
</tr>
</table>
<!-/ Widget ->Lessons to learn
As a quick round up, here are the things you need to keep in mind when creating your email newsletters.
- Always use tables for your layout. Although this is extremely out of date, you can still usually achieve the layout you are going for.
- Keep your styles inline. Perhaps you don’t need to be as strict as me, depending on who you are targeting.
- Don’t put padding and margin on table cells. This can mess up in a couple of different email clients. Instead, place your content in wrapper tags and then put the padding and margin on those. For example, always put your text or images in paragraph or span tags
- When using colours, always use the full hexadecimal value. If you want to use black, use #000001 instead of #000000.
- Don’t go overboard with images and don’t use them for structure or anything critical to reading your email.
- Always use alt tags and declare the height and width of all your images.
- To set the colour of links and their text decoration, place the style information into the link itself
The full template
And finally, here is the code for the full template.
<!doctype>
<html lang="en">
<meta charset="utf-8" />
<table width="100%" style="background-color: #fafad2;">
<tr>
<td>
<table width="600px" align="center" style="background-color: #ffffff;">
<tr>
<td>
<!- Header ->
<table width="600px">
<tr>
<td rowspan="2" style="width: 200px;">
<p>
<h1 style="font-family: verdana; font-size: 32px; margin: 10px 0 0 0; text-align: center;">
<span style="color: #698B22;">Pets
</span>
<span style="color: #99CC32;">Co
</span>
</h1>
<span style="font-family: georgia; display: block; font-size: 16px; color: #828282; text-align: center; margin: 0px;">Making your pet happy!
</span>
</p>
</td>
<td style="width: 400px;">
<p style="font-family: verdana; font-size: 10px; background-color: #454545; color: #dedede; text-align: right; padding: 5px;">Visit us online at
<a href="#" style="color: #ffffff; text-decoration: none;">petsco.com
</a>
</td>
</tr>
<tr>
<td style="width: 400px; border-left: 5px solid #a2cd5a; background-color: #d4ed91;">
<p style="font-family: verdana; font-size: 14px; text-align: center; margin: 5px 0 10px 0;">
<b>Special offer:
</b>
<a href="#" style="color: #000001; text-decoration: none; padding: 0 0 5px 0; border-bottom: 1px solid #000001;">Half price on all doggy treats!
</a>
</p>
</td>
</tr>
<tr>
<td colspan="2">
<img src="happy-dog.jpg" alt="Happy dog and her owner" width="595" height="309" />
</td>
</tr>
</table>
<!-/ Header ->
<!- Body ->
<table width="600px">
<tr>
<!- Left ->
<td width="200px" valign="top" style="background-color: #d4ed91; border-left: 3px solid #454545;">
<!- Widget ->
<table>
<tr>
<td>
<p style="font-family: verdana; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 12px 5px 5px 5px;">In this issue:
</p>
<ol style="font-family: verdana; font-size: 11px; background-color: #cde472; color: #454545; line-height: 20px; padding: 10px 0px 5px 25px;">
<li style="margin: 0 0 10px 0; background-color: #f7f7f7; padding: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 0 0 3px 0; border-bottom: 1px dashed #3d3d3d;">Top tips to keep your dog healthy
</a>
</li>
<li style="margin: 0 0 10px 0; background-color: #f7f7f7; padding: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 0 0 3px 0; border-bottom: 1px dashed #3d3d3d;">Ideas to keep your cat entertained this winter
</a>
</li>
<li style="margin: 0 0 10px 0; background-color: #f7f7f7; padding: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 0 0 3px 0; border-bottom: 1px dashed #3d3d3d;">Everything you need to know about pet insurance
</a>
</li>
</ol>
</td>
</tr>
</table>
<!- / Widget ->
<!- Widget ->
<table width="100%">
<tr>
<td>
<p style="font-family: verdana; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 12px 5px 5px 5px;">News round up:
</p>
<ol style="list-style: none; font-family: verdana; font-size: 10px; background-color: #cde472; color: #454545; line-height: 20px; padding: 0px;">
<li style="margin: 0px; background-color: #ededed; padding: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 0 0 3px 0;">Competition winner...
</a>
</li>
<li style="margin: 0px; background-color: #dedede; padding: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 0 0 3px 0;">New store opening...
</a>
</li>
<li style="margin: 0px; background-color: #ededed; padding: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 0 0 3px 0;">Charity event...
</a>
</li>
<li style="margin: 0px; background-color: #dedede; padding: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 0 0 3px 0;">New store opening...
</a>
</li>
<li style="margin: 0px; background-color: #ededed; padding: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 0 0 3px 0;">Charity event...
</a>
</li>
</ol>
</td>
</tr>
</table>
<!- / Widget ->
<!- Widget ->
<table width="100%">
<tr>
<td>
<p style="font-family: verdana; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 12px 5px 5px 5px; margin: 0px;">Forward to a friend
</p>
<p style="font-family: verdana; font-size: 10px; padding: 5px; margin: 0px">Do you know another pet lover who might be interested in this email?
</p>
<p style="font-family: verdana; font-size: 10px; padding: 5px 0; margin: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 5px; background-color: #f5f5f5; border: 1px solid #dedede;">Forward →
</a>
</p>
</td>
</tr>
</table>
<!- / Widget ->
<!- Widget ->
<table width="100%">
<tr>
<td>
<p style="font-family: verdana; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 12px 5px 5px 5px; margin: 0px;">Contact us
</p>
<p style="font-family: verdana; font-size: 10px; padding: 5px; margin: 0px">If you would like to contact us, please use one of the following methods
</p>
<p style="font-family: verdana; font-size: 10px; padding: 5px; margin: 0px">
<b>Tel:
</b> 01234 567 8910
<br />
<b>Email:
</b> help@petsco.com
<br />
<a href="#" style="color: #000001;">www.petsco.com
</a>
</p>
</td>
</tr>
</table>
<!- / Widget ->
<!- Widget ->
<table width="100%">
<tr>
<td>
<p style="font-family: verdana; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 12px 5px 5px 5px; margin: 0px;">Unsubscribe
</p>
<p style="font-family: verdana; font-size: 10px; padding: 5px; margin: 0px">If you want to unsubscribe from our newsletter, click the button below.
</p>
<p style="font-family: verdana; font-size: 10px; padding: 5px 0; margin: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 5px; background-color: #f5f5f5; border: 1px solid #dedede;">Unsubscribe →
</a>
</p>
</td>
</tr>
</table>
<!- / Widget ->
</td>
<!- / Left ->
<!- Right ->
<td width="400px" valign="top">
<!- Widget ->
<table>
<tr>
<td>
<p style="font-family: verdana; font-size: 16px; line-height: 22px; color: #707070; margin: 0px; padding: 10px 10px 10px 10px;">
<b>Welcome
</b> to the latest edition of the PetsCo monthly newsletter!
</p>
<p style="font-family: verdana; font-size: 12px; line-height: 20px; color: #707070; margin: 0px; padding: 0 10px 0px 10px;">In this edition we have some fantastic tips for keeping your pooch healthy through the cold weather, how to keep your feline friend entertained this winter and everything you need to know to navigate the minefield of pet insurance!
</p>
</p>
<p style="font-family: verdana; font-size: 12px; line-height: 20px; color: #707070; margin: 0px; padding: 0 10px 20px 10px;">Sed viverra imperdiet diam, condimentum scelerisque ligula vulputate eget. Vestibulum nisi mauris, adipiscing laoreet luctus eu, condimentum sollicitudin nisl. Vivamus vestibulum risus ac augue hendrerit vel pretium nisl gravida. Duis enim massa, varius quis porttitor nec, sagittis nec felis.
</p>
</p>
</td>
</tr>
</table>
<!-/ Widget ->
<!- Widget ->
<table width="400px" style="margin: 0 0 15px 5px; background-color: #E8F1D4; border-left: 3px solid #454545;">
<tr>
<td>
<h2 style="font-family: verdana; font-size: 20px; margin: 0px; padding: 5px;">Top tips to keep your dog healthy
</h2>
<p style="font-family: verdana; font-size: 11px; color: #5c5c5c; padding: 5px; margin: 0px;">Curabitur aliquam magna nec elit blandit hendrerit. Suspendisse venenatis, ligula ac vestibulum vestibulum, nulla nisi pulvinar nunc, tempus viverra ipsum ante vitae massa. Suspendisse commodo facilisis egestas. Nulla dui augue, ultricies id ullamcorper eu, commodo non dui.
</p>
<p style="font-family: verdana; font-size: 10px; padding: 5px; margin: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 5px; background-color: #f5f5f5; border: 1px solid #dedede;">Read more
</a>
</p>
</td>
</tr>
</table>
<!-/ Widget ->
<!- Widget ->
<table width="400px" style="margin: 0 0 15px 5px; background-color: #E8F1D4; border-left: 3px solid #454545;">
<tr>
<td>
<h2 style="font-family: verdana; font-size: 20px; margin: 0px; padding: 5px;">Ideas to keep your cat entertained this winter
</h2>
<p style="font-family: verdana; font-size: 11px; color: #5c5c5c; padding: 5px; margin: 0px;">Donec id leo nec dolor facilisis hendrerit. Fusce a mauris ut nisl porttitor volutpat ornare et ante. Mauris gravida elementum eros in mattis. Vivamus vitae risus at erat tincidunt pharetra. Aliquam sapien tellus, gravida in malesuada porta, consectetur ultricies velit.
</p>
<p style="font-family: verdana; font-size: 10px; padding: 5px; margin: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 5px; background-color: #f5f5f5; border: 1px solid #dedede;">Read more
</a>
</p>
</td>
</tr>
</table>
<!-/ Widget ->
<!- Widget ->
<table width="400px" style="margin: 0 0 15px 5px; background-color: #E8F1D4; border-left: 3px solid #454545;">
<tr>
<td>
<h2 style="font-family: verdana; font-size: 20px; margin: 0px; padding: 5px;">Everything you need to know about pet insurance
</h2>
<p style="font-family: verdana; font-size: 11px; color: #5c5c5c; padding: 5px; margin: 0px;">Aliquam sed augue sed risus pretium laoreet eget eu tellus. Quisque fringilla nunc ac tortor rutrum sodales. Sed volutpat mi a eros adipiscing ac ultricies velit auctor. Duis fermentum convallis eros eget suscipit. Proin varius erat odio, in euismod purus.
</p>
<p style="font-family: verdana; font-size: 10px; padding: 5px; margin: 5px;">
<a href="#" style="color: #000001; text-decoration: none; padding: 5px; background-color: #f5f5f5; border: 1px solid #dedede;">Read more
</a>
</p>
</td>
</tr>
</table>
<!-/ Widget ->
</td>
<!-/ Right ->
</td>
</table>
<!-/ Body ->
</td>
</tr>
</table>
</td>
</tr>
</table>