Tuesday, February 20, 2007

How to Design an HTML Email

HTML Email marketing is one of the most popular marketing techniques on the internet available today. Many organizations like banks, IT companies, and electronics companies, are using HTML email marketing to promote their business. It is the fastest and one of the most effective ways to get your message across.

Few of the HTML email creation tips which will help you in making your HTML email design more appealing have been summed up below.

While designing your HTML email, you need to emphasize on three main things:

1. Format
2. Functionality
3. Usability

It comprises the design, appearance and coding of your HTML email template. An attention-grabbing format is required to make your email campaign professional and effective.

1. Code it your self: Avoid using any HTML email template creating softwares like Front Page since these softwares add unnecessary code to the template thereby making the email incompatible with certain browsers like Outlook and AOL. Do the coding yourself or hire an html programmer for the purpose. It won’t do any harm to use softwares like the Dreamweaver to design your email template although you shouldn’t forget to remove extra code.

2. Tables: HTML tables are used to create a legible layout of the email template. They are also helpful in reducing any confusion in the viewers’ mind, born out of excessive text pushed into a small space like that of an email. However, an excessive use of HTML tables is not recommended since in some email clients like Lotus notes and Netscape messenger, they do not appear correctly.

3. Images: Using images is a great way of making your HTML email more appealing. Moreover, images, when used in your HTML email will represent your product/company and will convey your message to your client. However, excessive use of images increases the file size which results in the message getting blocked. To overcome such problems, it is more advisable to host those images on your website and to provide links to these images in your email.

4. Avoid CSS: Cascading style sheet is a very powerful tool used for designing Web pages. It provides more control on the design and layout than straight HTML. However, when used in conjunction with HTML email, they can cause incorrect rendering in some email clients or simply get stripped out or overwritten in some other. If at all you want to use CSS, choose the ones with the embedded styles. However, keep in mind to embed it within the two body tags rather than within header tag.

5. Width: Avoid HTML emails that are too wide. Wider HTML emails force the viewer to scroll horizontally to see the complete message. There are two advisable widths for your HTML email newsletter template. First is the 100% width. Use this width if your HTML email template looks good in both the resolution monitors - 800X600 and 1600X1200 - or one with even greater resolution. Second, use widths corresponding to a specific pixel size. Most of the popular pixel sizes fall within 500 to 600 pixels.

6. File Size: Most of the internet users across the world use dial-up connections. Hence, speed is an important issue. An email with a small file size increases the loading speed of the email. Hence, it is recommended to keep your email file size below 100kb, otherwise it will create filtering and loading problems.


Validate HTML Code: Invalid HTML code and broken links can create lots of problems and frustration for the viewer since invalid HTML code and broken links result in loads of problems while displaying the HTML content of an email in certain email client environments. You can use certain HTML designer programs which have built-in evaluators. In addition, use tools that enable you to see your HTML email template design in multiple email client environments.
Avoid Scripting: From a security point of view, use of scripting in email is not recommended. Emails with scripts may get blocked by email servers or the script might get removed from the email by email browsers.

Provide links to your web version of html email: This is a good idea for those clients who have old versions of email client environments or whose email environments don’t display your message correctly. For such clients, create text emails and provide links to the web version of your email at the top of the message.

Use image alt tag: The Alt tag is used to display the text description of an image when the image is not getting displayed or when the viewer moves his/ her mouse curser over the image. This is an important feature since certain email clients such as Outlook have images disabled by default. Hence, using this tag at least lets the user know what the picture was.

Top of your email template: The Top section of your HTML email template requires proper attention since this is the first thing that your clients will see first. Use attractive colors and an appealing background to make this area attractive. You can also use small images to effectively grab the viewer’s attention.


Include links to your website in your content: Including links in your content will increase the number of clicks and the conversion rate on your websites. Also include navigation links and links to your products or articles.

Navigation: The Navigation section of your HTML Email should be designed in such a way as t present a comprehensive idea about your website navigation. Include links to the key functions of your site in your HTML email.

Subscriber Management Section: Include Subscriber Management sections in your HTML email newsletter so that your subscribers can perform different functions ranging from updating profile to changing their email addresses right from the email, without visiting your site.

Host rich media functions on your site: Certain email environments do not support rich media functions like flash, inline audios or videos. Hence, it becomes difficult for clients to read such emails. Instead, host such media functions on your website and include links to these functions in your HTML email.