What we're going to be building
In this tutorial I'm going to be showing you how I built my free template Crowder. See how it looks below.
The template features:
- Mobile responsiveness
- Web fonts
- Background images inside table cells
Note Everyone's email workflow is different. You may prefer to code or work in a different way and that's entirely fine!
Preparing the design
Before you even open your text editor you should prepare the design you're working from. I like to map out where I'm going to slice up the design (see below) using the Photoshop guidelines. This serves two purposes; firstly, I can see where and how I'm going to slice the images, secondly, I can almost mentally prepare for the build. My mind is already ticking and I'm picturing the table structure in my head.
Preparing your HTML document
I have a skeleton saved out, handily called Skeleton! This is the absolute skeleton of an email build. I like to start from scratch a lot to keep my code clean and succint. If you don't already have one of these I encourage you to save it out. Here is mine, we'll break it down after
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<title>Page title</title>
<style type="text/css">
@media screen and (max-width: 630px) {
}
</style>
</head>
<body style="padding:0; margin:0">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%">
<tr>
<td align="center" valign="top">
</td>
</tr>
</table>
</body>
</html>
Lets break it down!
Here we're setting the DOCTYPE for the document. I see a lot of chat about what to use for this but this is mine, if it 'aint broke don't fix it!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Next up, setting the content type and viewport. The following meta tags help ensure random number strings aren't transformed into phone links, and the EDGE meta tag will ensure Windows Phone 8 compatability.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
Putting the Skeleton in place for the CSS we'll be adding in later:
<style type="text/css">
@media screen and (max-width: 630px) {
}
</style>
And finally, the container table ready to rock
<body style="padding:0; margin:0">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0" width="100%">
<tr>
<td align="center" valign="top">
</td>
</tr>
</table>
</body>
Fleshing out the head
This a boring step but one that is absolutely required. We're going to be adding some important stuff.
First off, I'll be adding my client fixes. Not much to talk about here, these fix a few small bugs and quirks across different email clients. We add these inside our <style></style> tags in the head section.
/* Some resets and issue fixes */
#outlook a { padding:0; }
body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
table td {border-collapse: collapse;}
.ExternalClass * {line-height: 115%;}
/* End reset */
Next up, since in this email we're using web fonts. We'll need import these like so
@import url(http://fonts.googleapis.com/css?family=Roboto:300); /*Calling our web font*/
*Notice the commenting I'm adding, this is very important for code management. *
Web fonts have decent support but it's worth picking a font that has a similar fallback for clients that won't pick it up. I am using Roboto that falls back to Arial. We'll see more about this later.
Finally, I add my media queries that never change and I use across all emails. I'll break these down one by one.
This is how we force our table cells to stack on mobile.
/* Display block allows us to stack elements */
*[class="mobile-column"] {display: block;}
Again, this is for stacking.
/* Some more stacking elements */
*[class="mob-column"] {float: none !important;width: 100% !important;}
This bit allows us to hide stuff on mobile.
/* Hide stuff */
*[class="hide"] {display:none !important;}
And this is our force to 100% width.
/* This sets elements to 100% width and fixes the height issues too, a god send */
*[class="100p"] {width:100% !important; height:auto !important;}
This is for when columns stack but need to have spacing underneath
/* For the 2x2 stack */
*[class="condensed"] {padding-bottom:40px !important; display: block;}
This forces content to be center aligned on mobile, useful for keeping a reading pattern.
/* Centers content on mobile */
*[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}
This is our 100% width force, again, with padding around it.
/* 100percent width section with 20px padding */
*[class="100pad"] {width:100% !important; padding:20px;}
Same as above but only padding to the left and right.
/* 100percent width section with 20px padding left & right */
*[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}
And again, but top and bottom.
/* 100percent width section with 20px padding top & bottom */
*[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}
Summary
So, we've added a lot of stuff. This is what your <style> </style> tags should look like now:
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:300); /*Calling our web font*/
/* Some resets and issue fixes */
#outlook a { padding:0; }
body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
table td {border-collapse: collapse;}
.ExternalClass * {line-height: 115%;}
/* End reset */
/* These are our tablet/medium screen media queries */
@media screen and (max-width: 630px){
/* Display block allows us to stack elements */
*[class="mobile-column"] {display: block;}
/* Some more stacking elements */
*[class="mob-column"] {float: none !important;width: 100% !important;}
/* Hide stuff */
*[class="hide"] {display:none !important;}
/* This sets elements to 100% width and fixes the height issues too, a god send */
*[class="100p"] {width:100% !important; height:auto !important;}
/* For the 2x2 stack */
*[class="condensed"] {padding-bottom:40px !important; display: block;}
/* Centers content on mobile */
*[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}
/* 100percent width section with 20px padding */
*[class="100pad"] {width:100% !important; padding:20px;}
/* 100percent width section with 20px padding left & right */
*[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}
/* 100percent width section with 20px padding top & bottom */
*[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}
}
</style>
Building the hero section
We're going to work our way down the email, starting with the hero section:
I'm going to dive right in and show you the whole code at once, we'll break it down bit by bit after. It's not as daunting as it looks!
<table width="640" cellspacing="0" cellpadding="0" bgcolor="#" class="100p">
<tr>
<td background="images/header-bg.jpg" bgcolor="#3b464e" width="640" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="images/header-bg.jpg" color="#3b464e" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table width="640" border="0" cellspacing="0" cellpadding="20" class="100p">
<tr>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td align="left" width="50%" class="100p"><img src="images/logo.png" alt="Logo" border="0" style="display:block" /></td>
<td width="50%" class="hide" align="right" style="font-size:16px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif"><a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a></font></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td height="35"></td>
</tr>
<tr>
<td align="center" style="color:#FFFFFF; font-size:24px;">
<font face="'Roboto', Arial, sans-serif">
<span style="font-size:44px;">Introducing Crowder</span><br />
<br />
<Span style="font-size:24px;">Your ultimate crowd<br />
sourcing solution</Span>
<br /><br />
<table border="0" cellspacing="0" cellpadding="10" style="border:2px solid #FFFFFF;">
<tr>
<td align="center" style="color:#FFFFFF; font-size:16px;"><font face="'Roboto', Arial, sans-serif"><a href="##" style="color:#FFFFFF; text-decoration:none;">FIND OUT MORE</a></font></td>
</tr>
</table>
</font>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Lets get into it! Here is our opening of the table:
<table width="640" cellspacing="0" cellpadding="0" bgcolor="#" class="100p">
<tr>
<td background="images/header-bg.jpg" bgcolor="#3b464e" width="640" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="images/header-bg.jpg" color="#3b464e" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
The first bit is easy, a table that's 640 pixels wide. It has a class of 100p which, as we touched on earlier, forces it to 100% width on smaller screens:
<table width="640" cellspacing="0" cellpadding="0" bgcolor="#" class="100p">
<tr>
The next bit is a bit more tricky. This is controlling the background image. As we know, the beast that is Outlook doesn't support background images. But, have no fear! The VML hack is here!
<td background="images/header-bg.jpg" bgcolor="#3b464e" width="640" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="images/header-bg.jpg" color="#3b464e" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
Now we've got the container for the hero set up we should get the content table in.
Here is the code. Don't get too scared, we'll break it down.
<table width="640" border="0" cellspacing="0" cellpadding="20" class="100p">
<tr>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td align="left" width="50%" class="100p"><img src="images/logo.png" alt="Logo" border="0" style="display:block" /></td>
<td width="50%" class="hide" align="right" style="font-size:16px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif"><a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a></font></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td height="35"></td>
</tr>
<tr>
<td align="center" style="color:#FFFFFF; font-size:24px;">
<font face="'Roboto', Arial, sans-serif">
<span style="font-size:44px;">Introducing Crowder</span><br />
<br />
<Span style="font-size:24px;">Your ultimate crowd<br />
sourcing solution</Span>
<br /><br />
<table border="0" cellspacing="0" cellpadding="10" style="border:2px solid #FFFFFF;">
<tr>
<td align="center" style="color:#FFFFFF; font-size:16px;"><font face="'Roboto', Arial, sans-serif"><a href="##" style="color:#FFFFFF; text-decoration:none;">FIND OUT MORE</a></font></td>
</tr>
</table>
</font>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
</td>
</tr>
</table>
Lets start with logo and nav section:
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td align="left" width="50%" class="100p"><img src="images/logo.png" alt="Logo" border="0" style="display:block" /></td>
<td width="50%" class="hide" align="right" style="font-size:16px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif"><a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a></font></td>
</tr>
</table>
And in smaller amounts
Here is our logo table cell. We have it at 50% width table cell that blows up to 100% width on smaller screens
<td align="left" width="50%" class="100p"><img src="images/logo.png" alt="Logo" border="0" style="display:block" /></td>
And our navigation is below. You may notice the inclusion of the horrible font tags. This is so Outlook will display our web font fallbacks. I also hide the nav on mobile.
<td width="50%" class="hide" align="right" style="font-size:16px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif"><a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a> | <a href="#" style="color:#FFFFFF; text-decoration:none;">HOME</a></font></td>
Awesome! We have our Logo and Nav set up! Now, lets move onto the Heading, subheading and CTA.
Again, here is all the code in one go. And again, we'll break it down
<table border="0" cellspacing="0" cellpadding="0" width="600" class="100p">
<tr>
<td height="35"></td>
</tr>
<tr>
<td align="center" style="color:#FFFFFF; font-size:24px;">
<font face="'Roboto', Arial, sans-serif">
<span style="font-size:44px;">Introducing Crowder</span><br />
<br />
<Span style="font-size:24px;">Your ultimate crowd<br />
sourcing solution</Span>
<br /><br />
<table border="0" cellspacing="0" cellpadding="10" style="border:2px solid #FFFFFF;">
<tr>
<td align="center" style="color:#FFFFFF; font-size:16px;"><font face="'Roboto', Arial, sans-serif"><a href="##" style="color:#FFFFFF; text-decoration:none;">FIND OUT MORE</a></font></td>
</tr>
</table>
</font>
</td>
</tr>
<tr>
<td height="35"></td>
</tr>
</table>
Mostly it's just spacing, so we're going to focus on this section:
<td align="center" style="color:#FFFFFF; font-size:24px;">
<font face="'Roboto', Arial, sans-serif">
<span style="font-size:44px;">Introducing Crowder</span><br />
<br />
<Span style="font-size:24px;">Your ultimate crowd<br />
sourcing solution</Span>
<br /><br />
<table border="0" cellspacing="0" cellpadding="10" style="border:2px solid #FFFFFF;">
<tr>
<td align="center" style="color:#FFFFFF; font-size:16px;"><font face="'Roboto', Arial, sans-serif"><a href="##" style="color:#FFFFFF; text-decoration:none;">FIND OUT MORE</a></font></td>
</tr>
</table>
</font>
</td>
You'll notice the <font face="'Roboto', Arial, sans-serif"> from earlier for the Outlook fallbacks.
Lets take a peek at the CTA:
<table border="0" cellspacing="0" cellpadding="10" style="border:2px solid #FFFFFF;">
<tr>
<td align="center" style="color:#FFFFFF; font-size:16px;"><font face="'Roboto', Arial, sans-serif"><a href="##" style="color:#FFFFFF; text-decoration:none;">FIND OUT MORE</a></font></td>
</tr>
</table>
We've added a border to the table that surroundes the CTA to give it a bit of style. The cellpadding="10" gives us a bit of space between the text and the border.
Inside the table. The horrible <font face="'Roboto', Arial, sans-serif"> is back. Don't worry - it's neccessary!
Nice, we've just finished up the hero section! Lets take a look at mobile and desktop side by side!
Lets move on...
Building the icon section
Now we're going to be building this section
We're going to be sperating the blue bar away from the icon grid for the sake of ease.
Lets start with the blue bar:
<table width="640" border="0" cellspacing="0" cellpadding="20" bgcolor="#2a8e9d" class="100p">
<tr>
<td align="center" style="font-size:24px; color:#FFFFFF;"><font face="'Roboto', Arial, sans-serif">Why Crowder?</font></td>
</tr>
</table>
We have a 640 pixel table that's forced into 100% on smaller screens. The cellpadding="20" gives us an easy way of adding 20 pixels padding around all sides of it that remains consistent across devices. Inside the table we have the return of the <font>.
I have to warn you, we're about to go intp Tableception. Tables within tables with tables within tables within tables. Here's all the code. Don't freak out, we'll disect it now!
<table width="640" border="0" cellspacing="0" cellpadding="20" class="100p" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="100padtopbottom" width="600">
<tr>
<td align="left" class="condensed" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mob-column" width="290">
<tr>
<td valign="top" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" class="100padleftright">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
<td width="20"></td>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td valign="top" class="100padleftright" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">Customise your user messages</font></td>
<td width="20"></td>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">100% unique privacy options</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="20" class="hide"></td>
<td align="left" class="condensed" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mob-column" width="290">
<tr>
<td valign="top" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" class="100padleftright">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
<td width="20"></td>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td valign="top" class="100padleftright" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">Fully customise your settings</font></td>
<td width="20"></td>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">Upload your product photos</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
As a lot of this is just duplicate code, we're going to focus on the bits that are making the magic happen.
Lets take a quick look at the surrounding table:
<table width="640" border="0" cellspacing="0" cellpadding="20" class="100p" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top">
Look familiar? It should do. It's our classic 640 pixel table that switches to 100% width on smaller devices. And we've got our good friend cellpadding back to give us some nice, consistent spacing.
Now lets have a look at the left column, which comprises of the first 2 icons.
<td align="left" class="condensed" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mob-column" width="290">
<tr>
<td valign="top" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="center" class="100padleftright">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
<td width="20"></td>
<td width="135" align="center"><a href="#"><img src="images/icon-1.png" border="0" style="display:block;"/></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td valign="top" class="100padleftright" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">Customise your user messages</font></td>
<td width="20"></td>
<td valign="top" width="135" align="center" style="font-size:16px; color:#2a8e9d;"><font face="'Roboto', Arial, sans-serif">100% unique privacy options</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
This is defining the column width and forcing it to stack:
<td align="left" class="condensed" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mob-column" width="290">
<tr>
The way it's done like this is because each of the columns is 135 pixels wide. If we stacked these in 1 row each rather than 2x2 we'd be increasing the length of our email for no good reason.
Looking further down the code we see this, this is forcing our content to have padding to the left and right on smaller devices.
<td valign="top" align="center" class="100padleftright">
That's all that's really to this section. We simply duplicate up what we have above to create the second column and get a lovely, 2x2 grid. Here is how they compare side-by-side:
Building the bottom section
Next up we're going to build the bottom section. This is a breeze after we nailed the stacking above! This is what we're going to be building now:
Lets tackle this block by block.
First up the white text block which is, surpisingly, simple. We'll break it down anyway:
<table width="640" border="0" cellspacing="0" cellpadding="20" bgcolor="#ffffff" class="100p">
<tr>
<td align="center" style="font-size:16px; color:#848484;"><font face="'Roboto', Arial, sans-serif"><span style="color:#2a8e9d; font-size:24px;">We will amaze you</span><br />
<br />
<span style="font-size:16px;">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</span></font>
</td>
</tr>
</table>
Ah, our old friend the table with 20 cellpadding and 100p class - you should know what this does by now.
<table width="640" border="0" cellspacing="0" cellpadding="20" bgcolor="#ffffff" class="100p">
The best thing about this is what no matter how much content we add, it'll read and stack nicely.
You'll also notice our other friend, <font> is back!
Next up is the image which is also, very simple!
<table width="640" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" class="100p">
<tr>
<td align="center"><img src="images/ipad.png" class="100p" border="0" style="display:block" /></td>
</tr>
</table>
It's just a 640pixel/100% table that center aligns. The one thing different here is we've also set the image to be 100% width on smaller screens. This allows it to be fluid.
And now the teal section! If you haven't guessed, this is just the same as the white one but with the colours reversed.
Conclusion
That about sums it up.
If you have any questions don't be afraid to reach out here on community on Twitter!
NM
BG
JR
DC