The Expert's Guide to Making
Professional HTML Email Templates

From planning with wireframes to wrangling HTML code itself,
this guide shows you how to conceive designs and execute a professional email template.

This tutorial will cover the following areas:

Planning an HTML email template design
Applying a design to a wireframe
Turning a flat image into HTML:
- Slicing up the design
- Working the generated HTML
Preparing to be imported

To accomplish this, you are going to need the following applications (or similar):

Adobe Photoshop CS 4
Adobe Dreamweaver CS 4
Adobe Illustrator (optional)
Adobe FreehandS (optional)

Planning an HTML email template design

Before a design can be started, content layout should first be determined. Explore layout options by composing wireframes. Wireframes, as the name suggests, are rudimentary graphical representations of a proposed layout made specifically to determine where content is going to live in the available real estate without becoming too preoccupied with the way the final product is going to look or committing to any particular art direction. Put simply, a wireframe is a kind of plan depicted visually. Moreover, this is a way to organize information without having to expend too much energy in creating a final product which may or may not get scrapped in favor for a different approach.

Consider the following wireframe sketches:

TIP :: Optional precision
Some designers are exacting with their wireframes and will designate actual height and width values for the elements that comprise their wireframes. Depending on how you do things, doing so may be helpful but it may also paint yourself into a corner. Do what works best for you.

TIP :: Rough sketches
Admittedly, the wireframes presented here are a bit polished and are made with the intention of passing them in front of a client for approval. Internally, you may not need such a cleaned up presentation to convey your idea to your team and a rough rendering on paper or whiteboard may suffice. The idea is to present a plan rather than divest development time prematurely and, possibly, wastefully. The lack of formality can expedite that process.

Some layouts are more suited for certain objectives than others. Determine what the point of the email communication is before deciding upon a particular approach. Some questions to consider:

What is the primary focal point of the communication?
Is the email meant to be anx intimate dialogue between sender or receiver?
Is pushing brand awareness the main goal?
Is presenting options the main focus?
How text-heavy is the communication meant to be?
In terms of user experience, is the email meant to look like an extension of its associated web site?
What is the bandwidth profile for your targeted audience (as large image files may affect download speed)?

: : Download entire set of wireframes as a PDF.

Applying a design to a wireframe

For the sake of this tutorial, the wireframe titled "three-across template 2" (but without the designated logo area at the top) has been selected to make the following design:

The above design was made using a combination of Adobe Illustrator and Adobe Photoshop but could have been made using any number of graphics and/or illustration applications. Things to consider when applying a design to a selected wireframe:

Moving from a wireframe to a design treatment does not simply mean applying color to backgrounds. The layout/wireframe is meant to organize the elements and identify regions for specific effect but beyond that there is a lot of freedom in coming up with a look and feel.
Consider the context of the email: the design proposed is what the content looks like but what does the rest of the email (the background or container of the entire thing) look like?
What fonts will describe the content?
What do links look like? Will they have any sort of mouseover interactivity?
Unless specified by the client, designs should be between 600-800 pixels wide or liquid and scaling no smaller than 600 wide.
How will the design scale should there be more content than designed for or less content than designed for? Will the design scale at all?
Though the vertical height of the email design often doesn't matter it is strongly suggested not to create a design that has an inordinately long scroll.

TIP :: From the top
Some communications take the preview panes used by various email applications into serious consideration and value the top 100-250 pixels of the email most of all. Consequently, they stick their most important message in that top slice of real estate.

WHY :: Narrow email design
Designs are usually kept as narrow as suggested in order to accommodate preview panes for email applications as well as fitting the email content within the real estate afforded by the user interface of a web client if viewed online.

Turning a flat image into HTML

This section of the tutorial is written with Adobe Photoshop CS 4 in mind but instructions may still apply for other graphics applications that support slices. Ostensibly, this process can be replicated manually but will take longer to do.

The goal here is to produce the HTML that will describe the contents of the template, and establish its structure via a table and extract useful graphical elements within the design, while discarding other elements that can be mimicked using HTML. To accomplish this, we will need to slice up the image using Photoshop and then manipulate the content in Dreamweaver. Please note that what follows is but one of many ways to achieve this result.

Slicing up the design

Bring this image into Photoshop. Turn on rulers if they aren't already visible by going to the View menu up top and selecting Rulers from there (or simply press Control-R if you're on a PC or Command-R if you're on a Mac).
Select the Move Tool from the Tool palette. From the rulers that appear on either side of your image, drag a guide onto the canvas. (In this tutorial, the guides are red, a color chosen for higher contrast and visibility for the point of instruction. The default color for Photoshop guides is teal.)

TIP :: What guides?
You may need to turn on guide visibility by going to View > Show > Guides or unlock guides (View > Lock Guide) in order to move them.

Drag guides from the rulers and place them on the image in such a way that they outline the regions of the various elements of the design both vertically and horizontally. Be sure to include the gutters that appear between the various elements. Don't worry if your guides will cross each other. Despite the crisscrossing of lines, you should be able to make out those regions as they were first defined in the wireframe that the design is based on. You should wind up with your image marked up like this:
Select the Slice Tool (which appears "beneath" the Crop Tool in the Tool Palette). Click on the "Slices From Guides" button that appears at the top of the interface. Photoshop will now use those guides you demarcated to slice up the image. It should look like this:

TIP :: What button?
If the "Slices From Guides" or "Make Slices From Guide" button is nowhere to be found, you may have accidentally selected the Slice Select Tool instead of the Slice Tool. The two icons look very similar. If you are not sure which of the two you have selected, simply hover over the tool icon in the Tool Palette for a couple seconds and a tool tip will indicate what it is.

Now while the image is sliced up, you are provided with entirely more slices than is needed. What you need to do now is to combine slices. In particular, you will need to combine slices for those elements that should just be the one piece but because of guide placement are sliced up into many pieces. Also, you will want to combine those slices that are long horizontally contiguous regions of "nothing" (that is to say, nothing but background). To do this, go to the Tool Palette and choose the Slice Select Tool. This can be found in the same place as the Crop Tool and the Slice Tool.
Click on Slice 1 in the top left corner. Then shift-click on the rest of the slices that make up that row, adding to your selection. You may need to zoom in on some of the smaller slices in order to select them. Selected slices will be indicated by having an outline of a different color.
When that entire row is selected, right click on any of the selected slices and choose the Combine Slices option from the contextual drop down menu that appears:
Continue to combine slices as directed above in Step 5. Ignoring the guides, you should have only a total of 29 slices (as opposed to the original 77 slices that were made) and something that looks like this:
Select Save for Web & Devices from the File Menu. For now, select the highest quality and click the Save button.
From the Save Optimized As.. popup menu, be sure to select HTML & Images from the Format dropdown menu, Default Settings are fine and make sure All Slices are selected for Slices, selecting a location for Photoshop to deposit all of the files it will generate. At the Save As.. prompt, enter "turtle.jpg".

TIP :: Default Settings
In the context of what is being accomplished here, the settings pertain to how the exporting of the files above happens. In particular, you can set certain parameters that describe how the HTML is formatted as well as the file naming convention used for the sliced up image files.

At the location specified, Photoshop will now create an HTML file that will contain a single table (that matches up to the way you sliced up your image) as well as a folder called Images that contains all 29 of your slices. Each of the image slices will be named turtle_01.jpg, turtle_02.jpg, turtle_03.jpg and so on. At this point you are pretty much done with the Photoshop part and are now ready to move things over into Dreamweaver.

: : Download sliced Photoshop CS 4 file.

Working the generated HTML

This section of the tutorial is written with Adobe Dreamweaver CS 4 in mind but instructions may still apply for other WYSIWYG HTML Editing applications.

When you open the resultant HTML file in Adobe Dreamweaver and review the code produced, you should notice a couple things off the bat. Because Photoshop treated the HTML as if it described a standalone web page, there are both <head> and <body> tags, complete with <title> and <meta> tags. For HTML email, there is no need for these elements and, as such, we will only be dealing with the HTML table that makes up the bulk of the code.

The HTML we want to be working with should look like the following (without both the Photoshop generated comments that bookend that code and the table ID Photoshop automatically gave it).

TIP :: Slice Sizes
The code that's presented in this example may vary from what you have made if only because your slices might not be the same exact dimensions as the slices prepared in this guide. The process will still work even if your numbers vary from the guide's. Keep that in mind as you move forward with the prescribed process.

CODE SNIPPET :: Generated HTML, trimmed down
<table width="677" height="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7"><img src="images/turtle_01.jpg" width="677" height="23" alt=""></td>
</tr>

<tr>
<td><img src="images/turtle_02.jpg" width="38" height="279" alt=""></td>
<td colspan="5"><img src="images/turtle_03.jpg" width="600" height="279" alt=""></td>
<td><img src="images/turtle_04.jpg" width="39" height="279" alt=""></td>
</tr>

<tr>
<td colspan="7"><img src="images/turtle_05.jpg" width="677" height="21" alt=""></td>
</tr>

<tr>
<td><img src="images/turtle_06.jpg" width="38" height="229" alt= ""></td>
<td colspan="5"><img src="images/turtle_07.jpg" width="600" height="229" alt=""></td>
<td><img src="images/turtle_08.jpg" width="39" height="229" alt=""></td>
</tr>

<tr>
<td colspan="7"><img src="images/turtle_09.jpg" width="677" height="20" alt=""></td>
</tr>

<tr>
<td><img src="images/turtle_10.jpg" width="38" height="47" alt=""></td>
<td><img src="images/turtle_11.jpg" width="195" height="47" alt=""></td>
<td><img src="images/turtle_12.jpg" width="8" height="47" alt=""></td>
<td><img src="images/turtle_13.jpg" width="195" height="47" alt=""></td>
<td><img src="images/turtle_14.jpg" width="7" height="47" alt=""></td>
<td><img src="images/turtle_15.jpg" width="195" height="47" alt=""></td>
<td><img src="images/turtle_16.jpg" width="39" height="47" alt=""></td>
</tr>

<tr>
<td colspan="7"><img src="images/turtle_17.jpg" width="677" height="9" alt=""></td>
</tr>

<tr>
<td><img src="images/turtle_18.jpg" width="38" height="183" alt=""></td>
<td><img src="images/turtle_19.jpg" width="195" height="183" alt=""></td>
<td><img src="images/turtle_20.jpg" width="8" height="183" alt=""></td>
<td><img src="images/turtle_21.jpg" width="195" height="183" alt=""></td>
<td><img src="images/turtle_22.jpg" width="7" height="183" alt=""></td>
<td><img src="images/turtle_23.jpg" width="195" height="183" alt=""></td>
<td><img src="images/turtle_24.jpg" width="39" height="183" alt=""></td>
</tr>

<tr>
<td colspan="7"><img src="images/turtle_25.jpg" width="677" height="23" alt=""></td>
</tr>

<tr>
<td><img src="images/turtle_26.jpg" width="38" height="35" alt= ""></td>
<td colspan="5"><img src="images/turtle_27.jpg" width="600" height="35" alt=""></td>
<td><img src="images/turtle_28.jpg" width="39" height="35" alt=""></td>
</tr>

<tr>
<td colspan="7"><img src="images/turtle_29.jpg" width="677" height="31" alt=""></td>
</tr>

</table>

WHY :: Removing the table ID
Tip: We Suggest that you avoid using styling tags in your HTML (for email). Why? Keeping the elements as stripped down of style elements is necessary for at least two very good reasons: 1) this will not interfere with whatever IDs that the mass email sending application may assign it when the code is ultimately imported into it and 2) when the email is sent and viewed via a web client, those elements with IDs may inadvertently inherit a style that describes elements within the web application itself and consequently may not behave as intended.

The code above is ideal if we were going to send an email comprised of a table made up only of images. However, that would be a terrible idea as not only is there a complete lack of text, thereby rendering the email useless should the receiver have images turned off on their email client (a common happenstance), but the size of the email to download is unnecessarily huge since it is, again, made up only of images.

The first thing we need to do here is identify those elements worth keeping and what elements can be "faked" using just HTML, i.e., those aforementioned long horizontally contiguous regions of "nothing" mentioned in the previous section. Let's review the design again, this time with an eye for what elements are going to be kept as images (mouseover for detail):

This means that, ultimately, we're only keeping 5 of the 29 images that slicing has produced. In particular, we'll be keeping the Splash Image, the Learn More Button, the Sign Up Now Button, the Tell A Friend Button and the Accent Image.
That said, rename those image files to something that makes more sense. In particular, rename turtle_03.jpg, turtle_11.jpg, turtle_13.jpg, turtle_15.jpg and turtle_23.jpg to splashimage.jpg, btn_learnmore.jpg, btn_signupnow.jpg, btn_tellafriend.jpg and accentimage.jpg, respectively.
You'll notice that in Dreamweaver (in the Design View), the preview now has broken images in it. In the HTML, update the IMG tags with the updated filenames in Step 2. As you renamed 5 files, you will be updating exactly 5 places in the code.
Currently, the sea foam color of the email is accomplished via images that just happen to be that same color. This presents a problem insomuch that removing those images at this stage will produce "holes" in the layout, revealing the (often white) background of the email instead of the color desired. To get around this, we will first indicate a background color for the table. In the TABLE tag, set BGCOLOR="#CCFEE8"
We're almost ready to start making holes. Due to the economy of space that HTML observes, if we simply go and remove objects that are essentially pushing open the various table cells, they will collapse because they no longer contain anything and aren't told otherwise how to behave. We get around this by indicating the HEIGHT and WIDTH attributes of the cells we want to affect with the HEIGHT and WIDTH attributes of the very images we will be removing. This is a simple though tedious task of copying the HEIGHT and WIDTH attributes and values from the image tags and pasting them in the table cell tags (the TDs) that contains them. Your code should look like this after copying and pasting:

CODE SNIPPET :: Updated HTML, cut and pasting HEIGHT and WIDTH values
<table width="677" height="900" border="0" cellpadding="0" cellspacing="0" bgcolor="#ccfee8">
<tr>
<td colspan="7" width="677" height="23"><img src="images/turtle_01.jpg" width="677" height="23" alt=""></td>
</tr>

<tr>
<td width="38" height="279"><img src="images/turtle_02.jpg" width="38" height="279" alt=""></td>
<td colspan="5" width="600" height="279"><img src="images/splashimage.jpg" width="600" height="279" alt=""></td>
<td width="39" height="279"><img src="images/turtle_04.jpg" width="39" height="279" alt=""></td>
</tr>

<tr>
<td colspan="7" width="677" height="21"><img src="images/turtle_05.jpg" width="677" height="21" alt=""></td>
</tr>

<tr>
<td width="38" height="229"><img src="images/turtle_06.jpg" width="38" height="229" alt= ""></td>
<td colspan="5" width="600" height="229"><img src="images/turtle_07.jpg" width="600" height="229" alt=""></td>
<td width="39" height="229"><img src="images/turtle_08.jpg" width="39" height="229" alt=""></td>
</tr>

<tr>
<td colspan="7" width="677" height="20"><img src="images/turtle_09.jpg" width="677" height="20" alt=""></td>
</tr>

<tr>
<td width="38" height="47"><img src="images/turtle_10.jpg" width="38" height="47" alt=""></td>
<td width="195" height="47"><img src="images/btn_learnmore.jpg" width="195" height="47" alt=""></td>
<td width="8" height="47"><img src="images/turtle_12.jpg" width="8" height="47" alt=""></td>
<td width="195" height="47"><img src="images/btn_signupnow.jpg" width="195" height="47" alt=""></td>
<td width="7" height="47"><img src="images/turtle_14.jpg" width="7" height="47" alt=""></td>
<td width="195" height="47"><img src="images/btn_tellafriend.jpg" width="195" height="47" alt=""></td>
<td width="39" height="47"><img src="images/turtle_16.jpg" width="39" height="47" alt=""></td>
</tr>

<tr>
<td colspan="7" width="677" height="9"><img src="images/turtle_17.jpg" width="677" height="9" alt=""></td>
</tr>

<tr>
<td width="38" height="183"><img src="images/turtle_18.jpg" width="38" height="183" alt=""></td>
<td width="195" height="183"><img src="images/turtle_19.jpg" width="195" height="183" alt=""></td>
<td width="8" height="183"><img src="images/turtle_20.jpg" width="8" height="183" alt=""></td>
<td width="195" height="183"><img src="images/turtle_21.jpg" width="195" height="183" alt=""></td>
<td width="7" height="183"><img src="images/turtle_22.jpg" width="7" height="183" alt=""></td>
<td width="195" height="183"><img src="images/accentimage.jpg" width="195" height="183" alt=""></td>
<td width="39" height="183"><img src="images/turtle_24.jpg" width="39" height="183" alt=""></td>
</tr>

<tr>
<td colspan="7" width="677" height="23"><img src="images/turtle_25.jpg" width="677" height="23" alt=""></td>
</tr>

<tr>
<td width="38" height="35"><img src="images/turtle_26.jpg" width="38" height="35" alt= ""></td>
<td colspan="5" width="600" height="35"><img src="images/turtle_27.jpg" width="600" height="35" alt=""></td>
<td width="39" height="35"><img src="images/turtle_28.jpg" width="39" height="35" alt=""></td>
</tr>

<tr>
<td colspan="7" width="677" height="31"><img src="images/turtle_29.jpg" width="677" height="31" alt=""></td>
</tr>

</table>

Now you can go ahead and remove those calls for images that are just the sea foam color. The easiest way is to use the design view of Dreamweaver and selecting and deleting the images. Each time you do so, Dreamweaver will drop a non-breaking space ( ) in its place. This is fine. If you do this manually, you should include those non-breaking spaces in place of the images as well. Your code should now look like this:

CODE SNIPPET :: Updated HTML, placeholder images removed
<table width="677" height="900" border="0" cellpadding="0" cellspacing="0" bgcolor="#ccfee8">
<tr>
<td colspan="7" width="677" height="23> </td>
</tr>

<tr>
<td width="38" height="279"> </td>
<td colspan="5" width="600" height="279"><img src="images/splashimage.jpg" width="600" height="279" alt=""></td>
<td width="39" height="279"> </td>
</tr>

<tr>
<td colspan="7" width="677" height="21"> </td>
</tr>

<tr>
<td width="38" height="229"> </td>
<td colspan="5" width="600" height="229"><img src="images/turtle_07.jpg" width="600" height="229" alt=""></td>
<td width="39" height="229"> </td>
</tr>

<tr>
<td colspan="7" width="677" height="20"> </td>
</tr>

<tr>
<td width="38" height="47"> </td>
<td width="195" height="47"><img src="images/btn_learnmore.jpg" width="195" height="47" alt=""></td>
<td width="8" height="47"> </td>
<td width="195" height="47"><img src="images/btn_signupnow.jpg" width="195" height="47" alt=""></td>
<td width="7" height="47"> </td>
<td width="195" height="47"><img src="images/btn_tellafriend.jpg" width="195" height="47" alt=""></td>
<td width="39" height="47"> </td>
</tr>

<tr>
<td colspan="7" width="677" height="9"> </td>
</tr>

<tr>
<td width="38" height="183"> </td>
<td width="195" height="183"><img src="images/turtle_19.jpg" width="195" height="183" alt=""></td>
<td width="8" height="183"> </td>
<td width="195" height="183"><img src="images/turtle_21.jpg" width="195" height="183" alt=""></td>
<td width="7" height="183"> </td>
<td width="195" height="183"><img src="images/accentimage.jpg" width="195" height="183" alt=""></td>
<td width="39" height="183"> </td>
</tr>

<tr>
<td colspan="7" width="677" height="23"> </td>
</tr>

<tr>
<td width="38" height="35"> </td>
<td colspan="5" width="600" height="35"><img src="images/turtle_27.jpg" width="600" height="35" alt=""></td>
<td width="39" height="35"> </td>
</tr>

<tr>
<td colspan="7" width="677" height="31"> </td>
</tr>

</table>

WHY :: Removing all those extra images
It may seem like a wasted effort to have produced so many images only to get rid of them later. Despite their ultimate exclusion, the discarded images are a very important part of the process if only because it is through their inclusion that we have the numbers that describe those elements of the layout that provide structure. Their HEIGHT and WIDTH values are what make them worth it.

TIP :: Non-breaking Spaces
Again, due to the economy of space that HTML observes, should you have a character space inserted somewhere, if there is nothing else near it, HTML ignores it. So, if you put 300 character spaces in a row between words, HTML will render it as a single space. To get around this, use the HTML character entity  . Browsers will interpret it as a space in the text that won't get collapsed. Using non-breaking spaces in these otherwise empty cells tells the browser to observe the cell dimensions we've indicated and not to collapse them like normal.

Dropping in the main content, we affect the second cell of the fourth table row (the cell occupied by turtle_07.jpg). First we delete the image as in the previous step and then add the required content (for the sake of this tutorial, Latin filler text is used). Use fonts and text colors as indicated in the original design (don't worry about link styling for now; that will be covered later).
In addition to simply removing the image placeholder and dropping in the content, two other things need to be done: add VALIGN="top" to this cell and remove the HEIGHT values for all the cells that make up this table row. This part of the code should look like this:

CODE SNIPPET :: Main text area populated
<tr>
<td width="38"> </td>
<td colspan="5" width="600" valign="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint <a href="#">occaecat cupidatat non proident</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
At vero eos et accusamus et iusto odio <a href="#">dignissimos ducimus</a> qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</td>
<td width="39"> </td>
</tr>

WHY :: Vertical alignment
Including explicit mention that the vertical alignment of the text box should be at the top ensures that the content will start at the top of the region it has been placed in. If this isn't designated, the text's default vertical alignment is middle. In this case, a middle alignment adds an unnecessary top and bottom margin that is unattractive and unwanted.

WHY :: No heights
Everywhere else has height indicated in order to prevent unwanted collapsing of the layout. In this case, however, height is omitted in order to allow for scaling. This is one of the areas in the design that we want to be able to stretch out to accommodate its content, however long it may be.

TIP :: Use font tags
To make the styling of the text be as bullet-proof as possible within the context of other stylesheets that the email content may reside in (this is especially the case with web email clients), the FONT tag is used as it is the element that nests the content the closest. Note the redundancy of the tagging here. This, too, ensures that the text styling is as desired without falling prey to incomplete or incorrect tag nesting.

Now do the same for the two text areas in the boxes that appear beneath the buttons, producing the code below. Though the VALIGN attribute can be in each cell that makes up the row, at the very least it should be included in those cells with content in order to ensure that they are all aligned with respect to each other. Note that, like before, the heights of this row have been omitted, allowing for the entire row to scale vertically should any one of the text boxes run long. However, given that the size of the image that is contained in the second to the last cell of this row is fixed, the row can only be as short as the image (183 pixels).

CODE SNIPPET :: Text boxes populated
<tr>
<td width="38"> </td>
<td width="195" valign="top"> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis doloribus asperiores <a href="#">repellat</a>?</td>
<td width="8"> </td>
<td width="195" valign="top"> Quis autem vel eum iure reprehenderit <a href="#">qui</a> in ea voluptate velit esse quam nihil molestiae consequatur, vel <a href="#">illum</a> qui dolorem eum fugiat quo voluptas <a href="#">nulla</a> pariatur?</td>
<td width="7"> </td>
<td width="195" valign="top"><img src="images/accentimage.jpg" width="195" height="183" alt=""></td>
<td width="39"> </td>
</tr>

Lastly, do the same for the footer, except in this case set vertical alignment to "BOTTOM" to eliminate any unnecessary margin that may appear beneath it.

CODE SNIPPET :: Footer populated
<tr>
<td width="38"> </td>
<td colspan="5" width="600" valign="bottom">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et <a href="#">molestiae non recusandae</a>.</td>
<td width="39"> </td>
</tr>

To affect link styling, add STYLE="COLOR: #0069B0; FONT-WEIGHT: BOLD. TEXT-DECORATION: NONE;" to every hyperlink tag used around linked text. This code snippet should be an attribute in the anchor and look like the highlighted areas below:

CODE SNIPPET :: Link styling
<tr>
<td width="38"> </td>
<td colspan="5" width="600" valign="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint <a href="#" style="color: #0069b0; font-weight: bold; text-decoration: none;">occaecat cupidatat non proident</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
At vero eos et accusamus et iusto odio <a href="#" style="color: #0069b0; font-weight: bold; text-decoration: none;">dignissimos ducimus</a> qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</td>
<td width="39"> </td>
</tr>

WHY :: Minimal CSS
You may have noticed that very little CSS has been used in this template (and at very specific regions, too). This is because most HTML email does not support the entirety of CSS and only a subset is considered "safe" to use. In particular, CSS that describes text styles is considered alright but even that has to be done within reason. Not only is CSS support an issue but dealing with the cascading nature of stylesheets within the context of other stylesheets (say, those describing a web email application) becomes a complicated mess as elements begin interacting in unexpected ways as a result of the various stylesheets competing for expression.

As for those images that will serve as buttons, add anchor tags on them as usual but be sure to add BORDER="0" within the IMG tags to make sure that they don't have an outline.

CODE SNIPPET :: Buttons without borders
<tr>
<td width="38" height="47"> </td>
<td width="195" height="47"><a href="#"><img src="images/btn_learnmore.jpg" width="195" height="47" border="0" alt=""></a></td>
<td width="8" height="47"> </td>
<td width="195" height="47"><a href="#"><img src="images/btn_signupnow.jpg" width="195" height="47" border="0" alt=""></a></td>
<td width="7" height="47"> </td>
<td width="195" height="47"><a href="#"><img src="images/btn_tellafriend.jpg" width="195" height="47" border="0" alt=""></a></td>
<td width="39" height="47"> </td>
</tr>

TIP :: No borders, in general
While it isn't necessary to turn off borders on images that have links on them, their inclusion often appears ungainly. Moreover, a link border on a button is needlessly redundant. If a button is included in a design, it should not need to have a hyperlink border visible on them to indicate that they are a button. They should be designed in such a way that interaction from the user is implied without any assistance.

WHY :: No borders, on this design
For this particular design, having buttons without borders is not simply the product of a design decision but a structural one. A one-pixel border on one of the buttons adds two pixels to the amount of horizontal real estate that it takes on the design. Three buttons means six pixels. Since the layout is designed at a fixed width, these six extra pixels that are unaccounted for can potentially break the layout.

For the final touches, add ALIGN="CENTER" to the table so that the content of the email centers itself when viewed and add ALT or ALT and TITLE attributes to all the images used. Given that the contextual background of this email is white (the default for practically all email clients), nothing more needs to be done. Had that not been the case and a specific color was required, simply place the entire table that describes this email within another table that has WIDTH="100%" and BGCOLOR="#rrggbb", where rrggbb is whatever color is desired.
Your final code should look like this:

CODE SNIPPET :: Final HTML
<table width="677" height="900" border="0" cellpadding="0" cellspacing="0" bgcolor="#ccfee8" align="center">
<tr>
<td colspan="7" width="677" height="23"> </td>
</tr>

<tr>
<td width="38" height="279"> </td>
<td colspan="5" width="600" height="279"><img src="images/splashimage.jpg" width="600" height="279" alt="Oceans of Opportunity - A Special Message For You"></td>
<td width="39" height="279"> </td>
</tr>

<tr>
<td colspan="7" width="677" height="21"> </td>
</tr>

<tr>
<td width="38"> </td>
<td colspan="5" width="600" valign="top">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint <a href="#" style="color: #0069b0; font-weight: bold; text-decoration: none;">occaecat cupidatat non proident</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
At vero eos et accusamus et iusto odio <a href="#" style="color: #0069b0; font-weight: bold; text-decoration: none;">dignissimos ducimus</a> qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</td>
<td width="39"> </td>
</tr>

<tr>
<td colspan="7" width="677" height="20"> </td>
</tr>

<tr>
<td width="38" height="47"> </td>
<td width="195" height="47"><a href="#"><img src="images/btn_learnmore.jpg" width="195" height="47" border="0" alt="Learn More"></a></td>
<td width="8" height="47"> </td>
<td width="195" height="47"><a href="#"><img src="images/btn_signupnow.jpg" width="195" height="47" border="0" alt="Sign Up Now!"></a></td>
<td width="7" height="47"> </td>
<td width="195" height="47"><a href="#"><img src="images/btn_tellafriend.jpg" width="195" height="47" border="0" alt="Tell A Friend"></a></td>
<td width="39" height="47"> </td>
</tr>

<tr>
<td colspan="7" width="677" height="9"> </td>
</tr>

<tr>
<td width="38"> </td>
<td width="195" valign="top"> Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis doloribus asperiores <a href="#" style="color: #0069b0; font-weight: bold; text-decoration: none;">repellat</a>?</td>
<td width="8"> </td>
<td width="195" valign="top"> Quis autem vel eum iure reprehenderit <a href="#" style="color: #0069b0; font-weight: bold; text-decoration: none;">qui</a> in ea voluptate velit esse quam nihil molestiae consequatur, vel <a href="#" style="color: #0069b0; font-weight: bold; text-decoration: none;">illum</a> qui dolorem eum fugiat quo voluptas <a href="#" style="color: #0069b0; font-weight: bold; text-decoration: none;">nulla</a> pariatur?</td>
<td width="7"> </td>
<td width="195" valign="top"><img src="images/accentimage.jpg" width="195" height="183" alt="Oceans of Opportunity Turtle Logo"></td>
<td width="39"> </td>
</tr>

<tr>
<td colspan="7" width="677" height="23"> </td>
</tr>

<tr>
<td width="38"> </td>
<td colspan="5" width="600" valign="bottom">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et <a href="#" style="color: #0069b0; font-weight: bold; text-decoration: none;">molestiae non recusandae</a>.</td>
<td width="39"> </td>
</tr>

<tr>
<td colspan="7" width="677" height="31"> </td>
</tr>

</table>

TIP :: ALT vs TITLE
Using the ALT attribute within the image tag is helpful in order to display information about an image if it hasn't yet loaded in an email application or, in the case of email clients that don't automatically load images at all, won't load without user action whatsoever. TITLE attributes (not to be confused with TITLE tags which live in the <head> of an HTML page) included in images as well as within anchor tags provide tool tip or mouseover text when the user hovers their mouse pointer over that particular element.

: : View final template as an HTML page (<head> and <body> included in order to make the page render in a browser).

Preparing to be imported

Keep the email lightweight. Unless specified by the client, keep the total (all assets including the HTML page itself) under 50 KB. And remember - if this is a template that will have variable content, you won't know how much may be loaded into it in terms of textual content and custom images. The text usually isn't much of a concern but images often make up the bulk of the total file size. Before you import your design and assets into your email delivery platform, optimize your images (particularly your large ones) using Adobe Photoshop or Adobe Freehand.

TIP :: File sizes
When viewing the file sizes of the media, be wary of the "on disk" size as that represents the file's size plus whatever other operating system related data that is associated with it instead of just the file by itself. The actual file size may be a significantly smaller size.

Be sure to delete superfluous image files not needed by the template. If you haven't already deleted the extra 24 images produced by this tutorial earlier, you should do so before handing the HTML and image assets off to be sent off as an email.

Net Atlantic is an email service provider helping clients send email, text, and social campaigns to their subscribers, customers, and prospects with online multi-channel marketing solutions.

The Expert's Guide to Making Professional HTML Email Templates

Planning an HTML email template design

Applying a design to a wireframe

Turning a flat image into HTML

Slicing up the design

Working the generated HTML

Preparing to be imported

The Expert's Guide to Making
Professional HTML Email Templates