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:
To accomplish this, you are going to need the following applications (or similar):
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:
: : Download entire set of wireframes as a PDF.
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:
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.
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.
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.
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.
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.
: : Download sliced Photoshop CS 4 file.
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.
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>
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.
CODE SNIPPET :: Main text area populated
<tr>
<td width="38"> </td>
<td colspan="5" width="600" valign="top"><p><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;">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.</font></p>
<p><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;">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.</font></p>
<p><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;">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.</font></p></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.
CODE SNIPPET :: Text boxes populated
<tr>
<td width="38"> </td>
<td width="195" valign="top"><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;"> 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>?</font></td>
<td width="8"> </td>
<td width="195" valign="top"><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;"> 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?</font></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>
CODE SNIPPET :: Footer populated
<tr>
<td width="38"> </td>
<td colspan="5" width="600" valign="bottom"><p><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 10px;">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et <a href="#">molestiae non recusandae</a>.</font></p></td>
<td width="39"> </td>
</tr>
CODE SNIPPET :: Link styling
<tr>
<td width="38"> </td>
<td colspan="5" width="600" valign="top"><p><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;">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.</font></p>
<p><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;">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.</font></p>
<p><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;">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.</font></p></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.
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.
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"><p><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;">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.</font></p>
<p><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;">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.</font></p>
<p><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;">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.</font></p></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"><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;"> 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>?</font></td>
<td width="8"> </td>
<td width="195" valign="top"><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 12px;"> 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?</font></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"><p><font style="font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; color: #001b2d; font-size: 10px;">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>.</font></p></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).
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.