http://www.emaillabs.com/best_practices/best_practices_creative_design.

html

20 HTML Email Tips: Ignore at Your Own Risk

by Loren McDonald Feb 28, 2006

Email Marketing Design Creating Your Email Message: Message Creation Features Product Tour - Creating Messages Dynamic Message Assembly EmailLabs Solutions For: Ecommerce & Retail Email Newsletter & Publishing Enterprise Email Marketing Email Marketing Best Practices: Tips for Better Email Design

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 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). It's not a comprehensive manual of HTML and newsletter design (that's under development now). However, it pinpoints common problems HTML in email presents and offers alternatives and suggestions. More details about the topics listed below are available in our free Resource Center Articles and Quick Tips; and check our our Usability Rating Calculator.

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 wont 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. Dont forget navigation links, subscriber management in addition to multiple product or content links. 17. Navigation through your email should reflect your Web site navigation dont 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 wont 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.

Email Marketing Usability Rating Calculator - Take the Test http://www.emaillabs.com/email_marketing_usability_test.html

Usability of email marketing messages is one of the least written about, but most critical aspects of email marketing success. Take the usability test below and see how your email marketing program rates. Check back and take the test again as we'll continue to improve the test. 1. How many email sign-up forms (or links to a sign-up page) are on your Web site? Home page only Site registration only Resources/publications section only Other, but very few pages All pages, or nearly every page of the Web site 2. Do you include a short benefit explanation with your subscription solicitations? Yes No 3. Do you use a single registration page to list email choices, collect information and set preferences? Yes No 4. How many clicks does it take to complete your opt-in process (from start to finish including initial link through confirmation)? 1 click (no confirmation) 2 clicks

3 clicks 4+ clicks 5. Do you allow users to set their own preferences for one or more of the following: frequency, format (text vs. HTML), content/product personalization? Yes No 6. Do you test all elements of an email message before you send it to your list? Yes No 7. Do you promote your email program offline (catalogs, point-of-purchase, call center, registration cards, collateral, invoices, etc.)? Yes No No offline channels 8. Do your registration page(s) include pre-checked checkboxes for email signups or preferences? Yes No 9. Does your company, newsletter or brand name appear in the "from/sender" line in recipients' inboxes (as opposed to an email address)? Yes, we use our company, newsletter or similar brand name No, we just use an email address 10. Do subject lines include a brand or newsletter name (e.g., {EmailLabs}, {Intevation Report}, Company X News...)? Yes No 11. Do you offer a text version (in addition to HTML) of your newsletter? Yes No Only offer/send text version 12. If you send multipart messages, do you produce a text version that is included along with your HTML message? Yes No Do not send multipart, or only offer/send a text version 13. Does the text version include all the content and calls to action as its HTML equivalent? Yes No Only offer/send text version 14. Do you use alt tags and text to support images and graphics in your HTML messages? Yes No No HTML version offered

15. Do you include multiple access points to your Web site in your email messages? (These include back issues, subscribe, articles, search, contact us, resources, store locator, coupons, overstock specials, etc.) Yes, many No, only 1 or 2 such as "Home" 16. Do you label submit buttons with the actions you want readers to take ("Order now!")? Yes No 17. Do you send unexpected promotional messages to subscribers on your newsletter and announcement lists? Yes No 18. Which of the following do you include in your emails? (check all that apply) Forward-to-a-friend link Link to printer version Link to a Web version of the email "Mailto" email contact link 19. Do you provide a subscriber administration text box (email address used, update address, contact info., forward to a friend, Web version, etc.) in each message? Yes No 20. Do you link directly to your reader-preference or "update email address" page from the email message? Yes No 21. How many clicks does it take to change a preference? (From the email message through completion, but not including the number of preferences changed) 2 clicks 3 clicks 4+ 22. Does the unsubscribe link appear on a line by itself in the email message (e.g., not hidden or surrounded by other text)? Yes No 23. How many clicks does it take to complete the unsubscribe process? 1 click 2 clicks 3+ clicks

How to Address Lotus Notes Compatibility

If you communicate to the B2B market, particularly large professional services firms and many Global 2000 companies, HTML email compatibility has long been a thorn in your side. The issues include:

Older versions of Lotus Notes (under R5) convert HTML emails to a Lotus Notes Rich Text format. Lotus Notes versions under R5 also do not recognize multipart messages (HTML and text combined in a single email). Some companies may be deploying later versions of the Lotus Notes client, i.e., R6, but using an older version of Lotus Notes/Domino server such as 4.6. In this example, the recipients email client would also render an HTML message incorrectly.

So for a recipient to view a properly rendered HTML email, a company must deploy both the Lotus Notes client and server of R5 and above. Here are some quick tips you can take if you have a significant Lotus Notes subscriber base:

Include a link at the top of HTML emails View Web Version the link sends recipients to a Web-hosted HTML version of the email (either on the email technology providers server or the senders server) Also include an Update Preferences link and provide a Web site update form that then enables recipients to choose to receive Text rather than HTML. Create complete Text versions for those who prefer not to receive HTML or cannot view HTML. On opt-in forms, include an option to receive a Text version and potentially list tips (i.e., If you are using Lotus Notes versions below R5, select Text).

Seven Tips to Improve Your Email Programs Usability 1. Design a standard box (in HTML) or copy block (in text) that includes all important subscription data: the email address used to subscribe, your company name and contact data, instructions on how to change preferences, an unsub link (separate from the reader-preference page), a link to your privacy policy or an abbreviated statement of it and any other relevant information. 2. Label each action clearly and separately: "Change your address/Update your preferences here;" "unsubscribe here." 3. Place this information in the same location in all messages, whatever the format. Near the end works best. Wherever you put it, do it the same way in all messages. 4. Dedicate a Web page to reader preference changes. Don't confuse its purpose with other goals or actions. 5. Allow readers to change their preferences by checking and unchecking boxes. List their new preferences on a separate page before they navigate away from it, but don't ask them to take yet another step to confirm them. 6. Make the unsub link stand out; label it clearly and don't surround it with extra copy or make it hard to find.

7. Move to a one or two-click unsubscribe process.

11 Tips to Make Your Email Messages Meaningful and Relevant 1. Use your company or brand name in the "from" line, which tells recipients who sent the email. 2. Write a brief (six words or less is ideal) subject line that accurately represents the messages major content. Longer subject lines are OK, just make sure each word is critical and the most important are in the first 50 characters those that follow will get cut off in many email clients. Include the emails title, if it has one (such as a newsletter title). If you can't, then include your company, division or brand name in the "from" line. List it first here. 3. Keep HTML-format messages as simple as possible. The more gizmos you pack into an HTML message -- superfluous images, graphics, sound or video -- the more likely something won't work on your recipients' computers. Store rich-media content on the Web; limit image size and use colors that reflect your logo. 4. In HTML messages, use alt tags and support text around images so that readers whose email clients block images by default will still get the gist of your message. Many email clients will also block alt tags, so good use of text is key. 5. If you offer a text version (read why here), make sure the content includes links to all of your core functions and tasks. Don't force readers to click to the Web version of your newsletter to receive its benefits or manage their subscriptions. 6. Load up on relevant links. If your goal is to funnel readers to your Web site, give them many access points, such as two or three order buttons sprinkled around a promo message instead of just one, or links to related information on your site. You've probably got a wealth of info at your site; make it easy for your readers to find it. 7. Lose the generic action button. Instead of "click here," use descriptive terms such as "Order now!" or "subscribe me!" or "Get white paper here." Be explicit about the actions you want users to take. 8. Test each email message before you send it, in different browsers (Internet Explorer, Firefox, Opera, etc.), email clients (Outlook, Lotus Notes, Gmail, Yahoo!) and platforms (Macintosh and PC). Click each link; watch out for oddities and inconsistencies in the way images load (or don't load) and in text fonts and widths. 9. Adhere to your users' preferences for frequency, format and content. If you keep sending promo offers to people who signed up just for the newsletter, you'll lose them. 10. However, you can promote your other publications in your messages, as long as those promos don't get in the way of the main content. For example, add a brief product offer at the end or side of a newsletter or announcement message, or list headlines from relevant news stories in a promotional-offer message. This way, you can promote other products and services without committing readers to extra emails.

11. Help readers manage your information. Include a forward-to-a-friend link in messages where appropriate and a print option that links to a printer-friendly version of an HTML message. Label those functions, either with icons or brief text. Designing Your Emails for the Inbox Use Good Design & Format Weak designs and improper format frustrates users. They cant navigate your email easily or find the information they want. So, they opt out. Or, they delete you every time. Or, they hit the Report Spam button and hope that makes you go away. Thats why you test sample messages, to make sure they perform across many email programs and Web services.

Differentiate or Delete Your email has to stand out in a crowded inbox. Put your company name in the from line for fast recognition. Add a grabber subject line. Design the top of your email to be preview pane and "disabled images" friendly. Use teaser text and HTML colors and layout rather than an image so readers can get an immediate "preview" of your email even if images are disabled. Finally, put the important content the offer, the call to action, newsletter contents up at the top for immediate viewing. You have just a couple of seconds to make your case, so dont waste them. Add Personality to Your Newsletters Email marketing is very dependent on impressions. From the time your reader views the subject line, they've already begun forming their impression. Every step along the way can either cement that impression or change it. From the first view to the last click, you want your customers to connect with your email in a positive way, and in order to do that, it's important to think about the individual elements of your email and how they can combine as a whole to create an impression. What does the subject line say about you? In order to connect with your readers, your readers also need to feel connected to you. A simple change might be adding a personal touch - perhaps an article or note from the editor, written in first person. It can create a more personal connection with the reader if they feel the email comes from a specific person rather than just a company in general. Readers can develop a greater affinity to a person behind an email rather than just a company brand, and will be more likely to open the email.

A good email provides useful information, but a well-written email provides useful information in a voice that your readers can relate to.

Style Sheets: Don't Use 'Em, But if You Have To... Many Web designers utilize Cascading Style Sheets (CSS) to simplify the coding process and ensure a consistent style throughout a Web site. Use of CSS in HTML emails can be problematic (see chart below), however, as many email clients will not render style sheets correctly. We recommend that you avoid using CSS if possible, but if you must, choose the embedded styles also known as inline. Embed the style within the two body tags and not within the header. Some email clients will truncate or strip out the header, so the recommendation is to add the style within the body tags. For example:

<body> <style type="text/css"> <!-td.maintext {} --> </style> </body>

Validate HTML Content and Avoid Using Scripts

An estimated 9 out of 10 HTML emails are not W3C HTML compliant, which can cause rendering as well as delivery issues, particularly at MSN and Hotmail. One of the dirtiest tricks in a spammer's arsenal is invalid, broken, and malicious HTML code, used to obfuscate his payload. If you use HTML in your messages, make sure your code is errorfree and follows W3C HTML guidelines. Use the HTML validator in your email application or third-party validator such as The W3C Markup Validation Service. Also avoid scripting. Security risks due to script vulnerabilities in email browsers have increased over the years. The result is most scripts, such as JavaScript and VBScript, are stripped out of messages. Some email systems reject messages outright if scripting is detected. For greatest compatibility, avoid using scripts in messages. Instead, drive your readers to your Web site, where dynamic components are easily rendered.

Keep HTML Emails to 500-650 Pixels in Width

Ever notice that most of the HTML emails you receive appear to be about the same width? Measured in pixels, most HTMLs fall into the range of 500-650. The early email clients were developed pre-HTML and thus were not designed to render wide Web page-like emails. More recently, the message windows of popular Web-based email services such as Yahoo! Mail, Hotmail and Gmail will typically present 500-650 pixels - varying based on the user's screen resolution settings. In simple terms this means that your HTML messages that are wider than this range will require the recipient to scroll horizontally to view the entire width of the email. While forcing a user to scroll horizontally might be OK on your Web site, it should be avoided with your emails. Users may only give your email a quick glance and with key content and images getting cut off, you risk losing a transaction or reader, and at minimum being an irritant.

Create a Web Version of Your Email Newsletter

It is always a good idea to provide your recipients with a Web version of your HTML email or the ability to switch to a Text version. Although the vast majority of email clients and email Web interfaces (i.e., Yahoo, Hotmail) render HTML correctly, your recipients could be using an older version of Lotus Notes or AOL, which means your HTML may not render correctly and could result in a garbled message. Providing a Web or text option ensures recipients can view the email as it was intended. Three tips to keep in mind:

Include a "View web version of this message" link at the top of your email. The link can be automatically generated to a Web-hosted version by your email service provider or to a link to your Web site where you've posted it (perhaps along with back issues in the case of newsletters). One EmailLabs client is seeing about 0.40% of recipients clicking on the Web version link, not an insignificant number if you have a large list. Also include a link to the Web version in the footer or admin area of your email.

Include "Format Preference (HTML or Text)" on your opt-in form. Also include a note such as the following: (Text is recommended if you use Eudora Light, Eudora Pro 3 and below, Lotus Notes versions below R5 or AOL 5.0 and under.) Be sure to include a link to a "Profile Update" page enabling recipients to change the format they are receiving from HTML to Text if they prefer.

Don't Neglect Your Email Design

Improving the design and layout of your email is one of the easiest improvements you can make that can deliver an immediate huge return. Design and layout are critical to pulling your reader through the email and motivating them to take action. Your email marketing communications are also a key brand touch point of your company and should directly reinforce your company's brand personality and essence. We highly recommend that you utilize the services of a designer experienced in the email marketing environment. The payoff can be big, as EmailLabs has seen some ecommerce clients' revenue from email double after redesigning the layout of their emails.

Writing Effective Subject Lines

Subject lines are one of the most important components of a successful promotional or newsletter email. Working in tandem with the from line, the content of a subject line is the key determinant for whether a recipient will open an email, delete it immediately, ignore it, file it for future access, report it and/or filter it as spam. The subject line content is also a major component in the algorithm of many ISP and recipient-level spam filters. In other words, a poorly written subject lead may not only go unopened, it may not even reach the recipients inbox in the first place. Keep these six principles in mind as you approach writing subject lines for your messages:

Inform: Subject lines should convey something important, timely or valuable, and should say to the recipient: "If you dont open and read this email, you'll miss out on something of real value." Intrigue: Your email is competing with 50 to 100 or more other emails for the recipients' attention. To increase the chance of having YOUR email be opened it must intrigue the

recipient, the same way a well written headline does. It must stimulate some part of the recipients brain, prompting them to open the email immediately. Entrust: Your subject line can support or hurt your brand image. Subject lines that over promise or mislead will ultimately destroy trust with recipients, damaging your brand and driving customers away. Action: Subject lines are a major driver of click-through rates, as they direct recipients to pay attention to specific articles, products and information. Every email you send should have an overt or implied strategy behind it. You hope that specific products are purchased over others or that recipients read a specific article and then visit your Web site seeking additional information. Subject lines should reflect your goals and help direct recipients to take the desired action. Empathy: While your emails may be distributed to thousands or millions of recipients, they are being received by individuals. Subject lines must recognize this and speak to the needs and interests of your recipients as individual customers, readers or prospects. Togetherness (Subject Lines and From Lines Must Work Together): Largely because of the dramatic increase in spam email in the last year or two, recipients increasingly look at a combination of the from and subject lines to determine whether it is from a trusted source. As a result, the job of a subject line now must not only entice someone to open an email, it must discourage the recipient from deleting it as an unwanted email.

Dealing With Microsoft Smart Quotes

Problem: Small boxes that appear in your HTML where your quotation marks, double hyphens and arrows once appeared in your MS Office document. Cause: Microsoft Smart Quotes are a series of special characters that appear only in Microsoft Office Products. Because they are not default plain ASCII characters, they generally do not convert to standard HTML characters. As a result, most non-Microsoft Email clients have a difficult time rendering these characters correctly, often times substituting a question mark or small box in its place. Solution: Disable the use of Smart Characters in your Microsoft Office Documents. In most versions it can be found under the Tools, Auto Correct, Auto Format as you type. Uncheck, "straight quotes" with "smart quote" and hyphens (--) with dash (). Secondly, it is always recommended that you "clean-up" your MS Word copy by pasting it into a nonMicrosoft editor like Homesite, Dreamweaver, Notepad or similar program. This can help identify and aid the removal of any unnecessary characters.

Personalize Your Subject Lines

Personalizing subject lines does not mean putting someones first name in the subject line, followed by generic information such as, Loren, Your Personalized May Newsletter. If you are segmenting your list in any way, then each segment should likely receive appropriate and different subject lines. Even if you arent creating separate versions of your email, if you have relevant information on segments of your subscribers, tailoring the subject line to their interests should improve open and click-through rates.

3 Important Reasons To Use Image Alt Tags

HTML "alt" tags are used to display a text description of an image when either the image does not display or when a mouse is scrolled over a displayed image. Using alt tags in your HTML emails is important for three reasons:

1. Recipients using dial up or other slow connections may not see images for a few or several seconds. Displaying alt tag text can at least convey a sense of what is to come, while the recipient waits for the image to load. 2. Many email clients (Outlook 2003) and email services (AOL and the soon to be released Gmail) have images disabled by default, or display a warning message asking the user if they'd like view the images. 3. The new Gmail email service (launching later this year) displays what they call a snippet, the first few text words it sees in an email, following the subject line. Gmail will also display the text from alt tags, so it is important to use this to your advantage - as an addendum to your subject line.

A sample alt tag that would display looks like this: "<IMG SRC="http://www.emaillabs.com/image/01.gif" alt="Email marketing solutions" BORDER=0>" Tips on using alt tags: Newsletters: For logos, headers, section titles and other uses of images, describe the logo and image, but as appropriate consider adding a brief teaser that explains that section of the newsletter further. For example: "Optimization - Strategies for improving email marketing performance." Ecommerce Emails: Include short but complete descriptions of product photos. If the image includes banners such as "50% off", include that as well. Charts and Graphs: Include enough text to explain the value and contents of the chart or graph, such as: "Chart: Open Rates from A/B Split Test." Gmail Snippets/Preview Text: Use an appropriate image in your header to display key teaser info. For ecommerce emails the information might expand on special offers mentioned in the subject line, reinforce Free Shipping or promote additional products. For newsletters, consider mentioning additional articles beyond what is in the subject line, or expand on the existing topic.

While this may sound like a lot of work, at most it probably adds 5-10 minutes to the production of your email. Most importantly though, by not using alt tags correctly, marketers risk seeing lower open and clickthrough rates resulting from recipients deciding not to display images or take further action.

AOL Filter - Blocks Emails With HTML Errors Among the various filters AOL applies to incoming mail, one in particular, while easily avoided, will completely block your AOL message delivery if triggered. This new filter is

an HTML validator which scans incoming messages for HTML syntax and formatting errors. If invalid HTML is detected, the message will be rejected. The error itself does not need to be a glaring omission to trigger this filter; any syntax inaccuracy may be sufficient. Ending a link tag, for example, with <a/> instead of the correct </a> will cause your message to be rejected. This filter was presumably employed to combat a favorite spammer tactic of inserting nonsense HTML code to foil standard content filters. We always recommend that procedures for proofing email campaigns be established, and that the proofing checklist should include HTML validation. Popular HTML editing software such as Allaire Homesite or Macromedia Dreamweaver already offer effective validation tools, and will highlight any errors on the fly, as your message is being created. For a complete reference spec of HTML formatting, please visit the World Wide Web consortium documentation pages. Also, you can use the HTML validator in your email application or third-party validator such as The W3C Markup Validation Service.