Coding a HTML Newsletter Email

by in Tutorials on 26th Oct 2011 · Comments

Email marketing is money. While many companies may be looking at ways to increase their social presence, boost their followers on Twitter and number of 'Likes' on Facebook, they all come back to (or should come back to) email marketing. According to VivaLaEmail, email marketing is a 43-to-1 Return on Investment (ROI) channel. Those type of numbers speak volumes to companies with small marketing budgets.

Coding a HTML Newsletter Email


If you've tried to code an HTML email before, you know they’re not easy to create. In this tutorial, I'm going to walk you through coding a solid newsletter that will render great in most major email clients and then will forward you to a resource to get it to render correctly in our trouble spots, Outlook 2007 and 2010.

Before You Begin

Before you dive head first into nested tables, old school background color declarations and more fun 1999 code, there are a few keys you should remember about HTML emails.

  1. Limited CSS Support – Because we’re designing for dozens of email clients that span multiple web browsers, it’s important to keep things simple when it comes to CSS. It would be a good idea to check out Campaign Monitor’s CSS support guide.
  2. Keep Your Styles Inline – All of your CSS needs to be inline. That mean’s you will end up with a lot of repetitive code. Luckily there are services such as Premailer that will take the styles in your tag and rewrite them to be inline, saving you coding monotony (not to mention time).
  3. Background Colors and Images are Spotty – CSS properties such as background-image, background-position, and even background do not work in all email clients. There are some work arounds, but you need to plan your tables and cells well to minimize headaches.
  4. Absolute Images – You’ll notice in this tutorial that I use relative image locations for developing on my computer. This does not work when you’re testing or sending your email. All images must be absolutely referenced and hosted on a public server.
  5. Cellpadding and Cellspacing – In this tutorial, you’ll be nesting HTML tables several levels deep. On each table, you must remember to declare cellpadding="0" cellspacing="0" in the main table tag. Otherwise you’ll end up with horizontal or vertical lines in your designs, that will turn out to be extremely frustrating and annoying. I know it’s a lot of code, but if you do it right the first time, you’ll avoid a lot of troubleshooting.

Creating the Framework

Here's the .PSD design that we’re going to turn into our email.

HTML Newsletter Email

This is a very simple two column design that offers up real estate for a featured story and two secondary stories. So where do we begin? It all starts with creating a framework for what will become our email.

To begin, let’s create the basic HTML that will eventually become our email.

<html>
	<head>
		<title>SimpleNewsletter Volume 12 - Episode 47</title>
	</head>
	<body>
	</body>
</html>

Step 1 – Starting With a Container Table

Ready to brush off your HTML tables skills? Great. Because you’re going to need them. Tables are the framework for HTML emails as it’s the most basic structure in HTML.

The first table to create is a container table with a width of 99%. Remember – when setting elements such as width, height, background color, declare them in the tag using width="", height="" and bgcolor="".

<html>
	<head>
		<title>SimpleNewsletter Volume 12 - Episode 47</title>
	</head>
	<body>
	<!-- Container Table -->
	<table  cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#0f6da1">
	    <tr>
	    	<td align="center"></td>
	    </tr>
	</table>
	<!-- End Container Table -->
	</body>
</html>

The container table will simulate a solid background color, since declaring a background-color on the tag will not render a background color. The 99% width allows for the slight padding that some web-based email clients require such as Gmail and Yahoo! Mail. The rest of our email will be nested inside of this single table cell, which is aligned center.

Step 2 – Email Wrapper Table

Next up is to create a wrapper table for the actual content of the email. Keep your designs to a maximum of 600 pixels. For this email, we have a nice light shadow on the white box (which is 600px), so we’ll set our email wrapper table width at 640px as I’ve set up 20px of padding on our elements.

<html>
	<head>
		<title>SimpleNewsletter Volume 12 - Episode 47</title>
	</head>
	<body>
	<!-- Container Table -->
	<table cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#0f6da1">
	    <tr>
	    	<td align="center">
	
	<!-- Email Wrapper Table -->
	<table cellpadding="0" cellspacing="0" border="0" width="640">
		<tr>
			<td></td>
		</tr>
	</table>
	<!-- End Email Wrapper Table -->
	
	    	</td>
	    </tr>
	</table>
	<!-- End Container Table -->
	</body>
</html>

Still following? I know the tables can get confusing, so it’s very convenient if you have a text editor that lets you hide rows to keep things clean. As I mentioned at the beginning, keep your comments clean and accurate and it will help out immensely.

Creating the Header

When I code a new HTML email, I will create the framework to build upon and then I’ll move down the design and piece it together like a puzzle. Continuing with this design, we’ll now create the header, including the web version link and social media links.

Header

Step 3 – The Top Row

So the first row in our email table have the blue background, with the white font for the link to the web version of the email. It’s very important to provide this link in any of your HTML emails. Email clients vary drastically – some display images, some don’t; some add padding where others don’t; etc.

From this point forward, I'm going to exclude the previously written code (the framework tables) when displaying code in the tutorial. Just note that all of the following code is nested within that single cell. At this time, we’ll also start adding some CSS to our stylesheet.

<table cellpadding="0" cellspacing="0" border="0" width="640">
	<tr>
		<td valign="bottom" height="30" align="right" class="footer">
			Having trouble viewing this email? Click here to view the web version.
		</td>
	</tr>
	<tr>
		<td>
			<img src="email_images/top_fade.jpg" width="640" height="20" border="0" />
		</td>
	</tr>
</table>

And now, a little CSS. This will be converted to inline styles at the conclusion of the tutorial. (I’m denoting this as a 'footer' as it mirrors the same purpose of a footer and will have the same styles.)

/* Fonts and Typography */
.footer {
	font-family: Tahoma, Arial, sans-serif;
	font-size: 11px;
	color: #fff;
	padding-right: 20px;
}

The code we have so far gives us this.

Step 2 Progress

Step 4 – Logo and Social Media Icons

As we continue down the email, we’ll need to create another row in our email body table to contain our logo and the social media icons.

For this row, simply add another table row and table cell tag and nest a one row, five column table in it. If that description is confusing, just check out the code below. Again, you’ll note that I have my images relatively sourced. For email production, these will need to be hosted on a public server.

I’ve also added a class of .email_background to the table cell that will encompass the rest of the body of the email. This background image won’t work on Outlook 2007 and 2010, but we’ll get to a fix for that at the end of this tutorial.

<tr>
    <td align="center" class="email_background">
<!-- Email Header -->
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td><img src="email_images/logo.jpg" width="246" height="41" border="0" style="padding-left:20px; padding-top: 20px;" /></td>
    <td><img src="email_images/facebook.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
    <td><img src="email_images/twitter.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
    <td><img src="email_images/linkedin.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
    <td><img src="email_images/youtube.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
</tr>
</table>
	</td>
</tr>

And the CSS. We've got the background image for the content part of the email, and two styles that need to be applied to all of our images.

/* Backgrounds */
.email_background {
	width: 640px;
	background: url('email_images/email_bg.jpg') repeat-y;
}

/* Images */
img {
	display: block;
	border: none;
}

So these social media icons sit in their own nested table cells so they have no relation to other table cells later in the email and can thus be added or removed depending on which social media services you (or your clients) use. Either way, here’s what we’ve got so far.

Step 4 Progress

Adding the Content

Now we get to the bread and butter of the email. The content needs to be short and sweet and easily skim-able. In 2010, 294 billion email messages were sent per day. With 1.88 billion registered email users, that equates to an average of 156 emails an individual sends or receives per day. With so many emails coming and going, you’ve got to make your email attractive, and to the point.

Step 5 – Adding the Featured Image

We'll begin by adding a featured image to your email, which has a width (in this design) of 560px by 250px. You can also see a sweet little warped shadow below the image, which I’ve sliced out separately so you can quickly change out the image, without losing the shadow. Let’s jump into the code.

<tr>
	<td colspan="5"><img src="email_images/featured_image.jpg" width="560" height="250" style="padding-left: 20px; padding-right: 20px;" /></td>
</tr>
<tr>
	<td colspan="5"><img src="email_images/featured_shadow.jpg" width="560" height="18" style="padding-left: 20px; padding-right: 20px;" /></td>
</tr>

Breaking that code down, we create a new row for the featured image, setting the width to 560 and adding 20px of padding on either side. We do the same with the shadow, creating a new row, setting the width to 560 and adding 20px of padding. This provides us with the mobility to swap out the Featured Image, while maintaining the shadow below in featured image.

Step 5 Progress

Step 6 – Adding the Headline and Content

Moving down the email, we next come to the featured story headline and the content of featured story. Here is when we'll get to using classes to style our text, which, will then be converted inline using Premailer.

Our process here is to create an h1 tag with your featured headline and style that orange with a nice font-family. Then we’ll add our content to a p tag, but separate paragraphs with br tags. One of the many quirks of email clients is many doesn't like padding in paragraph tags. Hardcoding line break tags will become your go to tag when adding rows or separating paragraphs. Finally, you’ll notice that I ended the table after the content of the featured story. This is because we’re now going to transition to a two column layout with the two secondary stories, so it’s a good time to begin a new row and nest a table in that

<tr>
	<td colspan="5" style="padding-left:20px; padding-right: 20px; padding-bottom: 10px;">
		<h1>This is your featured story</h1>
	</td>
</tr>
<tr>
	<td colspan="5" style="padding-left: 20px; padding-right: 20px; padding-bottom: 20px;">
		<p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<br /><br />
<img src="email_images/readmore.jpg" border="0" align="right" width="114" height="27" />
</p>
	</td>
</tr>
</table>
</td>
		</tr>

And, like I mentioned, we now have CSS to add in regards to the content.

h1 {
	color: #e95f03;
	font-family: Futura, Verdana, Sans-Serif;
	padding: 0;
	margin: 0;
	font-size: 24px;
	font-weight: normal;
}
.content {
	padding: 0;
	margin: 0;
}
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 20px;
}

Step 6 Progress

Step 7 – The Secondary Content

We now switch to a two column layout, and thus, open up a new table. I think the code is pretty self explanatory, as it’s the featured story repurposed for our two secondary articles. Keep an eye on the padding and note that we apply it directly to the table data cells, as opposed to the paragraph tags (since Outlook will not render padding on a paragraph tag).

<tr>
	<td align="center" class="email_background">
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td>
    	<img src="email_images/secondary1.jpg" width="271" height="150" border="0" style="padding-left: 20px;" />
    </td>
    <td>
    	<img src="email_images/secondary2.jpg" width="271" height="150" border="0" style="padding-left: 10px;" />
    </td>
</tr>
<tr>
    <td>
    	<img src="email_images/secondary_shadow.jpg" width="271" height="15" border="0" style="padding-left: 20px;" />
    </td>
    <td>
    	<img src="email_images/secondary_shadow.jpg" width="271" height="15" border="0" style="padding-left: 10px;" />
    </td>
</tr>
<tr>
    <td style="padding-left: 20px;">
    	<h2>This is a secondary headline</h2>
    </td>
    <td style="padding-left: 10px;">
    	<h2>This is a secondary headline</h2>
    </td>
</tr>
<tr>
    <td style="padding-left: 20px;">
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    	<br /><br />
    	<img src="email_images/readmore.jpg" style="padding-right:10px;" border="0" align="right" width="114" height="27" />
    	</p>
    </td>
    <td style="padding-left: 10px; padding-right: 10px;">
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    	<br /><br />
    	<img src="email_images/readmore.jpg" style="padding-right:10px;" border="0" align="right" width="114" height="27" />
    	</p>
    </td>
</tr>
</table>		
			</td>
		</tr>

With all of that code, we only added one additional style and that is the h2 tag.

h2 {
	color: #e95f03;
	font-family: Futura, Verdana, Sans-Serif;
	padding: 0;
	margin: 0;
	font-size: 18px;
	font-weight: normal;
}

Step 7 Progress

Step 8 – Closing Off the Email

We're getting close to the end of the email here, and next we are going to close off the main box of the email with a simple td tag that will have a 640px width and use the bottom fade image.

<tr>
	<td>
		<img src="email_images/bottom_fade.jpg" width="640" border="0" height="28" />
	</td>
</tr>

Step 8 Progress

Step 9 – Adding the Footer

One of the most important aspects to make sure you include in every one of your HTML emails is an unsubscribe link. Yes, yes, I know you never want to lose subscribers. But annoying your customers by making it difficult to unsubscribe will lose you a customer – instead of just a subscriber. So make it easy and visible. Many emails have it in their footer, on it’s own line, and clearly defined.

<tr>
	<td valign="top" height="80" align="right" class="footer">
		Simple Newsletter<br />
		55 Onextrapixel Lane<br />
		New York, NY 22222<br />
		<br />
		Want to Unsubscribe? Click here.
	</td>
	</table>
	<!-- End Actual Email Content -->
	</td>
		</tr>
	</table>
	<!-- End Email Wrapper Table -->
	
	    	</td>
	    </tr>
	</table>
	<!-- End Container Table -->
	</body>
</html>

Step 9 Progress

Test, Test, Test

With so many email clients out there in the marketplace, designers and coders have to do their due diligence in testing their HTML. Personally, I use Litmus to test my emails for work, which gives me true test screen shots of the preview and full email view in 29 different email clients from Lotus Notes to Outlook to all of the web based clients – in every major browser.

If you were to throw this email through a tester, you would find that not everything renders perfectly. Most significantly, the design would break dramatically in Outlook 2007 and 2010. This is because Outlook 2007 and 2010 use Microsoft Word to render their HTML emails (where as previous versions of the client used Internet Explorer as their rendering engine. Um, I’ ll let you decide which is better).

I plan to write a detailed step-by-step tutorial on how to include background images when designing for Microsoft Outlook 07/10, but you get into fixed width emails and setting one gigantic background image. If your audience is a heavy Outlook using crowd, I would recommend going with a straight background color, instead of using gradients, drop-shadows or box-shadows (not only will Outlook not render background images, it fails on CSS3). In the meantime, check out Campaign Monitor’s post on the same subject.

Conclusion

No matter how big new media gets, HTML emails will always remain at the core of digital marketing. As emails slowly adapt to the current standards, we have lots to look forward to, including video embeded into emails, full CSS support, and eventually dropping the table layouts.

What are some of your go to tips when coding HTML emails? How many emails do you put out a week? A month? Submit your comments below and join in the conversation.

Alex is the digital media coordinator and web developer for the NHL's Washington Capitals in Washington, D.C. In his spare time, he freelances in the D.C. Metro area, focusing on small businesses expanding their online presence in web and social medias. He loves working in WordPress, new technologies, and yes... HTML emails.