10 Tips For Coding A HTML Email
September 18th, 2008
Designing a HTML email that works across all email clients can be a challenge. This week I have been working on one for my company and I thought I would share 10 tips that you should follow when you are designing your own HTML emails.
01. Keep the width of your layout 560 pixels maximum
I’ve done some research and the width of 560 pixels appears to be the safest bet to ensure your email displays properly in all email clients. If you are wondering why so small for the width, keep in mind that all email clients include at least one sidebar that is usually reserved for the mail folder list.
02. Use Tables
Tables? I know, I know, I thought they were gone. Tables are the still the best way to ensure that your layout appears as it should in all email clients. Futhermore, Gmail does not support floating through CSS.
03. Use In-Line Styles
This is one of the most important things to remember when designing your HTML email. Gmail and Hotmail will strip the <style> tag out of the <head> of your document. As well, Gmail even strips out any <style> tags within the <body> of your document. The solution is to apply your styles in-line. Below is an example of in-line styles attached to a <p> tag.
<p style=”font-size:12px;color:#000;line-height:18px;”>Your text here</p>
04. Avoid using images for typography
Wherever possible, you should avoid using images to display any typography. The main reason for this is, be default Gmail will always hide the images within a HTML email. The viewer will always have to click the “display images in this email” link to view them. Therefore, if you main headline is an image, it may result in your email being deleted since the viewer doesn’t have a quick indication of the subject matter.
05. Avoid using CSS background images
Background images through CSS are also not supported by Gmail. You are still free to use them for other email clients but ensure that your design works with or without them for your Gmail readers.
06. Don’t use image maps
Image maps are also a big no-no in Gmail. I recently learned that if you use one the links will not be detected. The image will display as it should but none of your links will work.
07. Keep your code simple and straight forward
As a general rule of thumb, try to keep your code as simple as possible. Don’t overdue it on styles or nested tables as you are just opening your email up to the possibility of not displaying properly. Less is more is always a better stance to take.
08. Wrap your entire layout in a <center> tag
To ensure that your layout is centered within your viewers email client, it’s a good idea to wrap your entire layout in a <center>Your Layout Here</center> tag.
09. Use the full URL path to any images
I’ll talk a little more about why you should do this in point 10. For now, ensure that all your images are hosted on your server and the full URL path is used in the image tag. See below for an example:
<img src=”http://www.yourdomain.com/images/yourimage.jpg” width=”" height=”" alt=”" />
10. Use a HTML Email Campaign Service
This might be a no brainer to some designers but always, always use an email campaign service for the actual sending of your newsletter. The service I prefer to use is . Simply pasting your HTML code into a blank email message and hitting send will not ensure that your viewers see the proper layout. In most cases they will receive a page of code. The solution is to host your newsletter on your own server, then provide your campagin service with a link to the page. The service will be able to pull the page into the actual email for your viewers.
Some other valuable features that you will receive by using a campaign service are: the ability to build and keep a list of subscribers, view stats on your sent emails, and the ability to automatically insert a text version of your email for viewers with HTML turned off.
That’s it, that’s all – I hope this list of pointers has been useful. Please subscribe to the feed comments if you would like to be notified on the release of the Cardeo HTML email template.
Print This Post
2 Comments on “10 Tips For Coding A HTML Email”
Nice tips! However, coding HTML email can be a mix of misery and pain.
October 22, 2008 » 2:46 am
Great tips just what I needed, I had no idea people were still forced to use tables in emails.
September 30, 2008 » 6:45 pm