EMAIL MARKETING MANUAL – HTML DESIGN FOR EMAILS

HTML design for email is a trickier prospect than HTML for the Web. Your message must display correctly across dozens of clients and platforms, each with its own quirks and rendering issues. Good HTML creates branded, usable and attractive email messages that convert better overall than plain text. But when HTML goes bad, your messages will be unreadable, not function correctly or trigger email blocks or filters. This manual contains:

• List of 20 best practices addresses critical issues in coding and design in three key areas: format, functionality and usability. These issues affect rendering (how recipients view your message in their email clients) and deliverability (how likely your messages will be blocked or filtered as spam because of incorrect or suspect coding).
• Coding
• Styling in different email clients

FORMAT

This section covers issues that affect how your message appears, including coding, images, message width and file size. 1. Code emails by hand if you can. HTML design programs such as FrontPage are not ideal for designing HTML emails, because these "WYSIWYG" (What You See Is What You Get) editors typically add extra code that causes havoc with certain email clients. Have an HTML programmer code your email template by hand to keep it clean. Otherwise, use programs such as HomeSite and Dreamweaver and remove any unnecessary code, if any, by hand. 2. Avoid nested tables. Some email clients, Lotus Notes and Netscape Messenger in particular, may not render them correctly. 3. Do not use canvas background images, which don't display in most email clients. Background images for individual table cells are generally acceptable but may not appear in some clients such as Lotus Notes. 4. Host images on your Web site instead of embedding them in emails. Some ISPs filter emails with embedded images. Also, the file size can get quite large with multiple embedded images, and this might also get the message blocked. Host those images on your Web site instead and make sure all paths point to the full URL, e.g., http://mysite.com/images. 5. Avoid 1x1 pixel spacer gifs (to force widths in your table data cells) as spammers use them and may flag your email as spam. 6. Avoid using Cascading Style Sheets. CSS on a Web site can simplify the coding process and ensure a consistent style, but in HTML email, they can cause incorrect rendering in some email clients or simply get stripped out or overwritten. If you must use CSS, choose the embedded styles also known as inline. Embed the style within the two body tags and not within the header. 7. Keep HTML Emails to 500 to 650 pixels wide. HTML messages that are wider force the recipient to scroll horizontally in many email clients to see the whole message. Messages that are too wide are especially problematic when users give your email only a quick glance in a preview pane. 8. Keep message file size under 100 KB. Although most desktop and Web-based email clients no longer balk at downloading large files, recipients still using dial-up connections might not have the patience to let a big file load, especially one 100KB or larger. Try to keep emails less than 50 KB if possible. But larger emails up to 100 KB generally won’t cause filtering or loading problems.

USABILITY

The preview pane and blocking by default of images and links are two of the biggest challenges to HTML design. 9. Validate HTML content. Invalid or broken HTML code can cause rendering as well as delivery issues. Several HTML design programs have built-in validators; you can also use this free utility. Additionally, tools such as Lyris?Email Advisor enable you to see how your emails render in more than 40 different email client environments. 10. Avoid scripting if you can. Script vulnerabilities pose security risks. Messages with scripts might either get blocked by the email service or have the script stripped out by the email browser. Instead, move readers to your Web site, where you can use dynamic components more safely. 11. Link to a Web version of your email message. This benefits recipients whose email clients don't render your email properly, no matter how carefully you format it. Also, create a text version for those who don't want HTML. Put the Web-version-link near the top of the message for maximum visibility. 12. Use image alt tags. These show one or two words describing an image or an action when the image doesn't display because of slow loading time or default image blocking. A sample alt tag looks like this: "<IMG SRC="http://www.emaillabs.com/image/01.gif" alt="Email marketing solutions" BORDER=0>" 13. Redesign the top of your email template so that readers who see only 3 to 4 inches across, 1 to 2 inches deep and none of the images will see your key content. Otherwise, your message will have no visible function. Use HTML tags - colors, bold and backgrounds to make this area both functional and attractive - even without images. 14. Use horizontal layout rather than vertical. This allows readers who scroll down in the preview pane to see more content in the pane. Eliminate story layouts and "skyscraper" ad formats that are more than the pixel equivalent of 4 inches deep. 15. Incorporate both text and HTML into newsletters or offers and use alt tags, color and graphics instead of live images linked to your Web site.

FUNCTIONALITY

This section covers crucial benefits HTML brings to email, such as search, navigation and links back to your Web site. 16. Provide lots of active links to content at your Web site. Our studies have found adding more links to special content or offers, related information, etc.  actually boosts your click and conversion rates. Don’t  forget navigation links, subscriber management in addition to multiple product or content links. 17. Navigation through your email should reflect your Web site navigation – don’t  use different terms. Key shopping channels or functions on your Web site should have links from your email. But also design your main email navigation to reflect the key actions you want recipients to take from the email. 18. Add functionality such as Send-to-a friend...carefully. Many email clients won’t render forms correctly or pass the data from an email form to your Web site. We generally recommend using links to your Web site for send-to-friend forms, surveys, search boxes, etc. to ensure the greatest compatibility. 19. Add a subscriber-management section to each template. Make it easy for your subscribers to change their email address, update their subscriptions or profiles, unsubscribe or contact your company right from their email. 20. Host rich-media functions such as inline audio, video or Flash on your Web site instead of embedding them in an email. Instead, post a link that connects directly to these functions on your Web site. Many recipients won't have a compatible computer platform, email software or correct version they need to render those functions correctly.

CODING HTML EMAIL DESIGN

TABLES. Email clients live in the past, so all emails must be built using tables for layout. How it should look:

1. <table>
2. <tr>
3. <td>Header 1</td>
4. </tr>
5. <tr>
6. <td>Lorem ipsum dolor sit amet.</td>
7. </tr>
8. <tr>
9. <td>Sign off and footer</td>
10. </tr>
11. </table>

WRAPPING THE EMAIL IN A 100% WIDTH TABLE. Email clients only take the code within the body tags, not the body tags themselves. In order to use a background color, you must create a 100% width table to "fake" the background effect. How it should look:

1. <table width="100%">
2. <tr>
3. <td>
4. <table width="600" align="center">
5. <tr>
6. <td>Lorem ipsum dolor sit amet.</td>
7. </tr>
8. </table>
9. </td>
10. </tr></table>

LINK STYLING. Don’t forget to style the <a> tag. This will overwrite the email client's standard link tags. How it should look: <a href="#" style="color:#000000; text-decoration:none;">Link</a> NOT NESTING TABLES. Apart from the 100% width wrap table, you should try your best not to nest additional tables. This is easily avoidable; use the stacking system instead. This allows for a much easier, controllable email. How it should look:

1. <table>
2. <tr>
3. <td>Lorem ipsum dolor sit amet.</td>
4. </tr>
5. </table>
6. <table>
7. <tr>
8. <td>Lorem ipsum dolor sit amet.</td>
9. </tr>
10. </table>

BORDERS. Within emails, we don't have much room for browser or email clients specific fixes, so when we have borders that can either sit outside or inside the <td> or be included or excluded from the <td> width, there's not much we can do. To fix it just drop two extra <td>'s to either side of the main <td>, and set the background color in each one. This will again "fake" the look of a border and work in all browsers and email clients. How it should look:

1. <td width="1"></td>
2. <td width="598">Lorem ipsum dolor sit amet.</td>
3. <td width="1"></td>

FIXING HOTMAIL IMAGE BUG. Over the past couple of years, Microsoft has vastly improved the Hotmail/Live service. But… one huge bug you will come across is the strange padding added to all images. Why do they do this? Who knows? All I know is, there is a wonderfully easy fix. How it should look: <img src="image.jpg" style="display:block;"> ENCODING ALL CHARACTERS. Encoding characters allows us to be certain that all characters are being displayed as they should. How it should look:

1. &quot;Some sample code &#45; with special characters&quot;

USING A SPACER.GIF. Some browsers (Internet Explorer), don't get on with empty <td>'s. Even if the <td> is set to 10px in width. IE will ignore this and set it to 0. The fix is to add a transparent GIF, and set this to 10px wide. This then provides you with something to put within the <td>, thus fixing IE's issues with having empty <td>'s. How it should look:

1. <td width="300">Lorem ipsum dolor sit amet</td>
2. <td width="10"><img src="images/spacer.gif" width="10" height="1" /></td>
3. <td width="300">Lorem ipsum dolor sit amet</td>

***IMPORTANT: DON’T FORGET TO SEND TEST*** ***IMPORTANT:  ALLOW USERS TO ACCESS YOUR EMAIL SOMWHERE ELSE*** Some users may be utilizing a very basic email client – maybe they’re checking there webmail at work or on their phones. Images and complex designs may not be best for these types of clients,. Consider, at the top of the email newsletter, having a link which points to the email on a web server somewhere, so the user can view the email in all its glory. How it should look: Cannot view this email? View it here.

STYLINGS IN DIFFERENT EMAIL CLIENTS