HTML email newsletters are now seen as the latest and the smartest way to promote products presented in a visually appealing manner to the readers and also as a means to advertise a company’s services in a jiffy. Conventional e-mailing may soon be outdated as they get lost among hundreds of similar emails which viewers do not care to even read and just rush to delete them.

HTML newsletters offer various benefits to the companies generating them. Firstly, it helps publishers track the number of e-mails that were opened, forwarded or clicked through which in turn helps them gauge the popularity of their product or know what interests the readers about their products. Plain text may not capture the reader’s attention due to its boring presentation. HTML email newsletters on the other hand have an upper edge in terms of visibility and which distinguishes them from the other promotional emails.

But creating HTML newsletters is not a cake walk and requires careful coding in order to display well in various email software. Let us see what are the problems associated with creating HTML email newsletters and how we can achieve success with the same.

HTML email newsletters do not display the same in all desktop software and web based email services. It is somewhat similar to websites not being compatible with all browsers. Different readers have different ways of reading the emails; they may resize the mails to read them which may again cause a problematic situation. Does it mean that we cannot use HTML newsletters? Of course not! We can once we clear all the obstacles that come on the way. Let us understand the different kinds of newsletter layouts, issues with different email services and how we can alleviate these problems.

Types of Newsletter Layouts:

Single-column layout: Single column layout contains:
1. A header containing the logo with more or less all the navigation links from the main website to reinforce the brand and provide that sense of familiarity.
2. Intra-email links to text that is available further down the mail.
3. A footer with navigation links similar to the header with instructions on how to unsubscribe.

Two-column layout: Two-column layout contains:

1. A header and footer
2. A narrow side column and a broader column.
3. The narrower side column houses features and links to more information.
4. The broader column holds the content of the e-mail.

Promotional e-mails: They follow similar layouts as above but differ in the amount of content and links they carry. They often contain a big image with some explanatory text with links below the image.

So, how do we make the layouts? Use CSS and present a clean layout? No! Use HTML tables instead. This is because mail-clients are way too back in terms of CSS support. A layout using HTML tables renders consistently across different browsers.

How to create HTML emails

1. Layout: Use three tables for two-column layout; one each for the header, the centre content columns and the footer. Contain these tables into another table. Follow the same method for single-column layout too. This method is very suitable if the design of your email contains many images that are divided over multiple table cells.

2. Display: To control the table’s display, use the attributes within the table and td tags. For example, border=”0”, align=”left” etc according to your design. This ensures that it displays fine with the older email clients.

3. Design: Consider having a border around the table. Set the border value to “1” during the development time. This will help debug any alignment issues. Again, change the border value to “0” for testing and production.

Just because we are using an old method of using HTML tables, it doesn’t mean that we use only older methods. For example, you do not have to use the <font> tag even if it does not give the proper results. For this purpose we must make use of CSS Styles.

Adding CSS styles:

You may ask that I was the one who stopped you from using the CSS owing to its lack of support with the mail clients. You are right in asking. Though CSS is not supported, we can still use CSS for styles in your email once your nested table layout is set. You just need to bear some points in mind. Let us see how to style utilizing the CSS.

1. Styles: Firstly, use inline styles to store your style information just like this:
<p style=”color: red;”>. It also includes table, td, p, a etc.

2. CSS style declaration: Do not use the CSS style declaration in the HTML head tag. This is because mail services like the Google deletes them when it finds it.

3. Link to style sheet: Do not use the link element to reference an external style sheet. Most mail services delete, ignore or modify these external references.

4. Tables: Set your container table width to 98% as Yahoo mails require 1% cushion to either side to display the mail properly. But make sure that the tables inside the container tables should be set to 100%.

5. Font Style: Put the general font style information in the table td which is closest to the content. This can result in repetitive style declarations within multiple td cells.

6. Font Style: Put font style definitions in the headings, p or a tag only when required.

7. CSS Shorthand: Use CSS shorthand wherever possible. TRBL in CSS stands for Top, Right, Bottom and Left. For Example, look at this mark up:
style="margin-top: 15px; margin-right: 10px; margin-bottom: 15px; margin-right: 2;"

8. The above code can be rewritten using the shorthand in the following way:
style="margin: 15px 10px 15px 2;"

9. Divs: Use divs sparingly to float small boxes of content and links to the right or left inside a table’s td cell. While Google mail seems to ignore the CSS float, Yahoo and Hotmail deal with it quite well.

10. Content: Instead of cluttering your email, consider placing the floated content in the narrow side column.

11. Spans vs Floats: Use spans instead of floats as they seem to be more useful. This is because they are inline elements. Apart from using them for colouring or sizing text, they can also be used to position text above or below content.

12. Style definitions: Some email services unpack the style definitions to make them more clear and readable for all email software. For example, the CSS shorthand which was used before will be changed into its lengthier version. Test each mail and see what happens to the email code. To start with, check all CSS shorthand as it renders well with all email software.

Dos and Don’ts:

Taking for granted that the above information has helped you create a valid HTML newsletter, let us see what we need to do to ensure that the email is received in a way you want them to.

Do’s

1. Testing: Test your HTML email with various email services. Testing your email will tell you what are the elements which are not displayed properly and where you need to make the changes.

2. Cross-Browser Compatibility: Firstly, test your HTML newsletter in both Internet Explorer and Firefox. If it displays well or perfectly in both, then there are good chances that they will be displayed well in Outlook, Yahoo!, Google Mail, and other services with only minor problems.

3. Next, use an email delivery service to send the email to a range of test email accounts. Preferably, this should include accounts with the Yahoo!, Hotmail, and Google Mail services.

4. Use test accounts depending on the domain names of the people on the mailing list. For example, if there are no Hotmail subscribers in the list, it is sheer waste of time and money to test with a Hotmail account.

Testing Phase Tricks:

5. Sizing: Sometimes, you need to switch from percentage width to fixed width. Though it is not ideal because different users view mails differently—they may resize their email windows. But using a fixed width helps you get a layout which displays well in multiple email clients.

6. Spacing: If you are not satisfied with the spacing between the columns in the email design, change the attributes of cell spacing and cell padding in your HTML code. If that does not seem to work, apply CSS margin and padding attributes. HTML spacing is well accepted by older email software.

7. Tags: Sometimes, an image may get displaced if a td cell is closed right below an <img> tag. A solution to this problem is putting the </td> tag in the same line as the <img> tag! This gets rid of the irritating 1-pixel gap.

Don’ts

1. JavaScript: Do not use JavaScript. This is because email software disables it.

2. Images: If an image is sliced and spread across several HTML table cells, test the email using various test accounts. Sometimes, it appears fine in Outlook but may look displaced by a few pixels in Hotmail and other services. A better idea would be to use a background image on a new HTML table, which encloses all of the table rows and columns, which would display parts of the background image. This method helps you achieve similar effect as a sliced image and in addition uses less code with improved results.

3. a tags: For a tags use the target=”_blank” attribute so that when email recipients request for a page it does not appear within their web mail interface.

4. Use the table’s background attribute for background images instead of using CSS. This method works consistently across all email software than other possible solutions.

5. Images: Store all your email images in a web server. Make a separate folder apart from your site’s images folder and never delete them. This is because some people do not view these emails immediately on receipt and check them later (after weeks or months).

6. Although, using 1×1 pixel images may prove beneficial for providing spacing in your layout, very often spammers use it to determine if their emails have been opened. Therefore using this method for spacing may bracket your email in the spam category.

7. Do not use large images “above the fold” in the mail. This is a method used by most spammers and thus lead to your email being treated as a spam.

To avoid your email being rated as a spam, it is advisable that you check for factors which may classify your emails as spam. A useful resource which comes handy is the SpamCheck (http://spamcheck.sitesell.com/) service which highlights the problems in your email newsletter which make it appear like a spam. The good news is that this service is absolutely free!

Checklist before sending your newsletters

• Check if the From address displays correctly
• Check if the subject line is correct
• Check if the contact information is correct
• Check if the top of the email and the bottom of the email display the text “You received the text because………” and the instructions on how to unsubscribe.

If you want to know how your email will be displayed in different browsers you can try the services of Browsercam (http://www.browsercam.com/Default2.aspx). Most email clients use web browser components to display HTML email. Therefore, it is recommended to check your email for cross-browser compatibility to spot any errors in your email newsletter.

We may presume that Google being a newer email client will display the emails properly by supporting the latest web standards. But it is not true. Unfortunately, Google like the others behave in a similar manner by ignoring or deleting the CSS styles. Moreover, the fonts in the HTML table appear larger than they are supposed to irrespective of how the HTML mail is structured.

Listed below are some of the methods which can ensure your emails to render well in Google as well as other email clients:

1. Set the background colour in a td cell with bgcolor= and not in the CSS.

2. Use padding instead of margin style for controlling margins within the td cell.

3. Google mail displays the border around a td cell if it is defined in a div, but not when it is defined as a border style in a td tag. So define the border in a div.

4. If you want a light-colored link against a dark background, put the font definition in the td cell (to apply to p and a tags equally) and then add a color: style to the a tag.

5. If you find that the a and p fonts are of different sizes, confine the a tag in a p tag.

6. Make sure that the padding style in the content tds is set to 10 pixels all around. This is because Google mail uses the right hand column of the Google mail interface, thus pushing the HTML email into the centre. It also causes the text to hit against the left and right edges.

7. Google mail account does not display some of the font styles that appear in td, h1, h2, p, a, and other tags. Check every font carefully so that Google Mail displays the fonts properly.

Apart from the problems faced with the display of emails in Google Mail, programmers have an added burden of getting the emails displayed successfully in Lotus Notes. It can be a tough task to remove the aberrations that the Notes introduce into the HTML code. The software has the ability to convert the images to their proprietary formats. Moreover, it is not consistent with how it displays the HTML in every mail.

Tips on managing Notes

1. Always use a container table to contain all the internal layout tables. This helps in keeping the whole layout compact and prevents it from displaying in parts.

2. Provide ample space around the container table by setting the width to a percentage or using cell padding of minimum 5.

3. Make use of absolute URLs to images stored on the web server. Though not much can be done about the image conversion in Notes, remote images may help in this regard.

4. Avoid using any kind of links (named anchors) as they hardly work in notes.

5. Avoid using colspans in your HTML tables as Notes usually consider the basic table layouts.

6. Ensure the accuracy of your td cells as Notes sizes each td cell based on its defined width.

7. Email layouts in all probability should be left-aligned for Notes.

Suggested Reading:

1. MailChimp weblog
(http://mailchimp.blogs.com/)

2. HTML email tips for Web Designers
(http://mailchimp.blogs.com/blog/2006/01/im_a_web_design.html)

3. Free HTML email templates
(http://www.mailchimp.com/resources/templates/)

4. MailChimp resources
(http://www.mailchimp.com/resources/)

5. CSS support in HTML emails of Hotmail, Yahoo! Mail and Gmail
(http://www.xavierfrenette.com/articles/css-support-in-webmail/)

6. A Guide to CSS Support in Email
(http://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_ css_support_in_emai.html)

7. Secrets to HTML email
(http://www.graphics.com/modules.php?name=Sections&op=listarticles&secid=16)

8. SpamChecker
(http://spamcheck.sitesell.com/)

9. Style in HTML email
http://css-discuss.incutio.com/?page=StyleInEmail

10. CSS and Email, Kissing in a Tree
http://www.alistapart.com/articles/cssemail/

11. Optimizing CSS presentation in HTML emails
http://www.campaignmonitor.com/blog/archives/2005/08/optimizing_css_1.html

12. How HTML Code Affects E-Mail Deliverability
http://www.clickz.com/showPage.html?page=clickz_print&id=3490146

13. Free Lotus Notes downloads
http://www-128.ibm.com/developerworks/lotus/downloads/

14. Cross Browser Compatibility Testing
http://www.browsercam.com/Default2.aspx