Code an Email Newsletter from PSD to HTML

Last week we learned how to go about designing HTML emails. This week we’re going to turn the PSD into a functional HTML email. To code a HTML newsletter you can either code it from scratch, or use an already existing template. I personally like to use an existing template, especially the ones supplied by Mailchimp simply because they have been tried and tested and they don’t ‘break’. Whichever way you decide to go about coding HTML emails you need to remember the following:

1. Use inline CSS to control presentation, such as background colours and fonts. eg:

2. You have to use Tables to control the designs layout – Pure CSS Layouts just won’t cut it i’m afraid. (I hate them too) It’s recommended that you know about HTML tables before following this tutorial as I am not going to be covering the basics of creating tables.

1. Setting up the Document

Open the PSD containing the email design and slice and export any images that are going to be used in the email. Create a new HTML file in your IDE of choice and copy and paste the following code into the document.

<!-- -->
<table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ebebeb">
<tbody>
<tr>
<td align="center" valign="top"></td>
</tr>
</tbody>
</table>

All extra styling will be placed inside <style></style> and the email content will be placed between <td></td>

2. Creating the Header

Create a table with a width of 600px and style the table with left and right borders with a width of 2px using the colour #e6e6e6.

Using the tr and td elements create a new cell and style it according to the design, adding a height 50px and because the CSS has to be inline, a background-color of white (#FFFFFF). This first cell will contain a link so that users can view the email in their web browser.

The text containing the link will be wrapped around span tags. Pretty much all text in this email will be contained inside span tags because our CSS has to be inline. So set the font-family to arial, sans-serif; and the colour to black.

Copy and paste the first cell (tr/td), removing the height of 50px and add the header image.

<table style="border-left: 2px solid #e6e6e6; border-right: 2px solid #e6e6e6;" cellspacing="0" cellpadding="0" width="600">
<tbody>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: center; height: 50px;" align="center">
<span style="font-size: 11px; color: #575757; line-height: 200%; font-family: arial; text-decoration: none;">
Having trouble viewing this email? <a style="font-size: 11px; color: #575757; line-height: 200%; font-family: arial; text-decoration: none; font-weight: bold;" href="#">View it in your browser.</a></span></td>
</tr>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #333333; border-bottom: 10px solid #FFFFFF;" align="left" valign="middle">

	<a href="#"><img src="img/header.png" border="0" alt="Monster Chomp Newsletter" align="center" /></a></td>
</tr>
</tbody>
</table>

3. Adding the Banner

Add a new table using a similar structure to the previous table in the document. This time our table will only container 1 row and 1 cell so only one set of <tr> and <td> tags are needed. Insert the image into the cell and wrap it around <center> tags just in case your image isn’t 560px in width.

<table style="border-left: 2px solid #e6e6e6; border-right: 2px solid #e6e6e6;" cellspacing="0" cellpadding="0" width="600">
<tbody>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #333333; border-bottom: 10px solid #FFFFFF;" align="left" valign="middle">

	<a href="#"><img src="img/freebar.png" border="0" alt="Monster Chomp Newsletter" align="center" /></a></td>
</tr>
</tbody>
</table>

4. Adding the Instructions

Create a new table using the same table structure as the others, only this time add a cellspacing value of 20. This is because this table will contain 2 tables. One for the instructions telling the user how they can claim their free bar of Monsterchomp and the table to the right will contain Terms and Conditions of  entry. So the cellspacing controls the space between the columns rather than them being directly next to each other. It works the same way as margins and padding do in regular CSS.

Inside the first cell wrap the header around span tags with relevant styles reflecting the design. Style the ul, li, and retweet elements in the header where we create <style></style>. It’s also important that the width of the instructions cell is 570

So, the HTML for this cell will look like this:

<span style="margin-bottom: 10px; font-size: 22px; font-weight: bold; color: #5cce13; font-family: arial; line-height: 110%;">There are just 4 steps to Happiness:</span>
<ul class="steps">
	<li><strong>1.</strong> Login to Facebook and Like the Official Monsterchomp page here.</li>
<strong>2.</strong> Login to Twitter and RT this message @monsterchomp:</ul>
<div class="retweet">
	@monsterchomp RAWRk! I love #monsterchomp bars!</div>
<ul class="steps">
	<li><strong>3.</strong> Click the button below to tell us you're ready &amp; we'll check if you've done everything we asked.</li>
	<li><strong>4.</strong> If you did everything like were supposed to, we will ask for your post details and your free bar of Monsterchomp will be on it's merry to your letterbox.</li>
</ul>

and the CSS in the head of the email will look like this:

<!--  ul.steps { margin: 0; padding: 0; list-style: none;}  ul.steps li { margin: 0 0 15px 0; }  .retweet { margin: 15px 0; color: #3c890b; padding: 10px; text-align: center; background: #e2f8d4; border-radius: 7px; font-size: 13px; } -->

5. Adding the T&C’s sidebar

Create a new cell after the closing of the instructions cell and set the width of this table to 170. Set the background colour of this cell to #F4F4F4 and give the cell a border radius 10px using the appropriate browser-specific CSS3 Declarations.

Again, use <span> styles to style the header and the text, setting the font-family to arial for both, a font-size of 14px for the header and 11px for the text.

<span style="font-size: 11px; font-weight: normal; color: #999999; font-family: arial; line-height: 150%;">
<span style="font-size: 14px; font-weight: bold; color: #575757; font-family: arial; line-height: 150%;">T&amp; C's of entry </span>

Both methods of promotion will need to successfully be carried out. No exceptions will be made. All consumer data that is collected post stage 4 will remain private and we will not sell or redistribute your data. By entering this competition you allow Monsterchomp to use your Twitter / Facebook or Email address for future promotions. Entrants must be aged 16+.

</span>

6. Adding the ‘complete’ button

Copy and paste the very first content table we created. (the header one) and paste it below the table we just worked on.

In the first cell add the ‘ready’ image that the user will click on when they’ve done the 4 instructions, and below this in a new table just add some more information or another incentive to claim their free bar. In this case I did a ‘Win a lifetime supply of Monsterchomp’ table.

<table style="border-left-width: 2px; border-left-style: solid; border-left-color: #e6e6e6; border-right-width: 2px; border-right-style: solid; border-right-color: #e6e6e6; height: 150px;" cellspacing="0" cellpadding="0" width="600">
<tbody>
<tr>
<td style="background-color: #ffffff; border-bottom: 10px solid #FFFFFF;" align="left" valign="middle">

		<a href="#"><img src="img/ready.png" border="0" alt="Monster Chomp Newsletter" align="center" /></a></td>
</tr>
</tbody>
</table>

7. Win a lifetime supply of Monsterchomp

<table style="border-left: 2px solid #e6e6e6; border-right: 2px solid #e6e6e6;" cellspacing="0" cellpadding="0" width="600">
<tbody>
<tr>
<td class="win" style="background-color: #ffffff; border-top: 0px solid #333333; border-bottom: 10px solid #FFFFFF;" align="left" valign="middle">
<h2>WIN a lifetime supply of Monsterchomp</h2>
All entries made will automatically be added into a draw where the winner will receive a lifetime supply of Monsterchomp. Now there's even more reason to claim your FREE bar of Monsterchomp.</td>
</tr>
</tbody>
</table>

8. Adding an un-subscribe option

It’s important to give users the ability to un-subscribe to your outgoing emails. They could not want to receive them anymore, or they could have received it by mistake so it’s always a good thing to add an un-subscribe option. For this just use a similar table structure to what we have used throughout the email.

<table style="border-left-width: 2px; border-left-style: solid; border-left-color: #e6e6e6; border-right-width: 2px; border-right-style: solid; border-right-color: #e6e6e6; height: 60px;" cellspacing="0" cellpadding="0" width="600">
<tbody>
<tr>
<td style="background-color: #ffffff; border-top: 0px solid #000000; text-align: center; height: 50px;" align="center">
<span style="font-size: 11px; color: #575757; line-height: 200%; font-family: arial; text-decoration: none;">Think you've received this email by mistake?
	<a style="font-size: 11px; color: #575757; display: block; line-height: 170%; font-family: arial; text-decoration: none; font-weight: bold;" href="#">Oh.</a></span></td>
</tr>
</tbody>
</table>

Conclusion

Now we’ve got email template ready – what now?

Archive all related HTML and image files into a .zip file and upload it to a web based emailing marketing application. Mailchimp is my marketing campaign application of choice, because not only is it simple to use – it even tests your email with the most popular email clients to make sure that your email is being delivered the way you want it.

This entry was posted on Wednesday, July 14th, 2010 at 5:15 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.