Elance Blog

Ten HTML Email Tips for Web Designers

If you open your email inbox right now, you're guaranteed to see an HTML email (or maybe a hundred). When it's time to create one to send to your own clients and customers, there are some critical things to know in order to ensure successful delivery. Elancer Anchal Jaiswal, shares the top ten things you or your HTML email coder should be aware of.

There are several reasons why HTML emails are preferred to simple text versions. HTML emails give the impression of web pages, which have more visual appeal than plain text. This kind of mail is not only better for the recipient, but it is also more beneficial for the sender, who can use the tracking and reporting aspects of HTML emails, and metrics like open rate and forwarding rate.

Rich HTML coding makes an email more concise, attractive and readable. However, if your HTML coding is not done well, it will turn out to be a mess. It will either not work properly or will be rejected by various email clients. You therefore need to focus on common areas of concern, such as coding, included images, message width and file size. Here are 10 tips that will help you to code your HTML emails better:

1. Manual coding: In order to keep your HTML emails clean, always code it manually. HTML design programs, such as Microsoft FrontPage, are not ideal for the creation of HTML emails. If you code using this kind of software, you will get a different layout of the HTML email from what you expected, as such software adds redundant coding. However, if you absolutely need software to speed up your processes, you should opt for something such as HomeSite or Dreamweaver. After coding, always remember to remove unnecessary coding, if any, by hand.

2. Use tables but avoid “over-nested” tables: It is always advisable to use HTML tables as the framework for your HTML email but try to avoid the use of over-nested tables. If there is a need, you can nest your tables to a minor extent. Some email clients, such as Lotus Notes and Netscape Messenger in particular, stop rendering emails if they contain around eight nested tables or more.

3. Never use images to convey essential information: When using images in your HTML email, you should never depend on an image to convey significant information. Most of the email clients, from Yahoo! Mail, Gmail, to and Hotmail, turn off images by default. The user has to open the image by clicking on it. However, if you need to use images for subsidiary information, do not use PNG format. The 8-bit and 24-bit PNG images are not supported by Lotus Notes version 6 and 7, so use GIF or JPG formats in your email.

4. Never set the readability of text on the color of the background images: Always ensure that the text in your HTML email has enough contrast for readability. If you are using an image in the background, make sure that the text is clearly legible, independent of the background image.

5. Use ALT tags: The remedy for default image blocking by various email clients is the utilization of ALT tags. With ALT tags, you can write one or two words that describe the purpose of the image when the image is not displayed. This way you can convince the user to enable the image in your HTML email.

For instance, you can add the ALT tag:

<img alt="HTML Email Tips for Web Designers" src="http://www.-----.com/image/05.gif" border="0">

However, know that some of the email clients, such as Outlook 2007, Hotmail and Apple Mail do not support ALT text when images are blocked.

6. Provide a link: In your HTML email, always provide a link to your website or to the webpage that contains relevant information. This will help those users who face any problems in viewing your message. If you are using an HTML-heavy design in your email, it is advisable to give an option to view your message in their web browser. This way, you can ensure the delivery of the information you want to send to the user.

7. Host images: Another way of using an image in your HTML email is to host it on your web site instead of embedding it. This is recommended because emails with embedded images are filtered by some ISPs filters. Hosting will reduce the size of your email and help in preventing its blocking. While hosting the image, ensure that all the paths point to the full URL, e.g.: http://www.xyz.com/images.

8. Use video in email: As there is no support of Javascript or the object tag in HTML emails, web designers are needed to limit their email to just animated GIFs. However, with the evolution of HTML5 video can work in more and more email clients, such as Apple Mail, Entourage 2008, MobileMe and on the iPhone.

9. Email for mobile phones: Nowadays, with the arrival of the iOS, Android and other operating systems for smartphones, mobile can be a good platform for your HTML emails. In order to get a good result from mobile subscribers, you have to keep the width of the email below 600 pixels. The iPhone has a viewport of 320 pixels, Blackberry models have views of around 360 pixels and the Droid has 480 pixels. Setting the maximum width as 600 pixels will ensure its readability when it is scaled down for these devices. This width also performs pretty well in other web-based preview panes.

10. Test thoroughly: After you are done with the creation of your HTML email, you should perform cross-browser testing. Test the readability of your email on web browsers, such as Safari, Chrome, Firefox, IE and Opera. If you find that your email performs well on web browsers, then try to examine it on various email clients. There are more than 30 popular email clients, which have their own varying standards. You can test by sending the email to a variety of test email accounts on the desired email clients. These test email accounts should include email services, such as Yahoo, Gmail, AOL, Windows Live Hotmail, Outlook 2007, Outlook 2003, Lotus Notes, Thunderbird, Entourage and Mac Mail.

From a marketing point of view, HTML emails will be a mainstay. With the aforementioned10 tips, you can enhance the quality of your HTML emails and use them effectively to reach out to your clients, prospects and all readers in-between.

About the Author
Anchal Jaiswal has a B.Tech in Electronics Engineering and a Post Graduate Diploma in Embedded Systems and VLSI Design. With a keen interest in technology and its rapid evolution, she has been contributing to blogs and using her experience to create a better online experience for people.


you forgot to say...."commit suicide" after everything works except IE :)

From a young lady point of view,I am just starting out;learning how to work and be a super affiliate marketing person.I learn fast by doing hand on and every thing I do I do to the best of my ability.I strive at being the best at what I do ,because I believe in making my supervisor proud of me.I strive in making myself proud, my family proud and most of all God proud.When I get to the point that I've did the best I can do,I strive even harder to do even better.That is what I was taught my my dad,be all you can be and do the work to the best of your ability.You will always succeed. Sign Karen J Never Say I Can't

I really appreciate the help i have found here.
I have followed this Instruction.Nice meet all.
Saiful Islam
Web Programmer (PHP, MySQL, Ajax and jQuery)

great article. I use htmlforemail.com for html email coding but its always nice to see this kind of articles

HTML coaiding we specially use in web design,web developing,but now we understand the uses of html in sending email.
Thanx mam these things known to us.