Designing HTML Email


The most difficult task in sending HTML email is making the email compatible with as many email clients as possible. Unfortunately there is not a standard across all platforms. The best practice is to use tables when you are designing your email. Setup a basic template and send this out with some basic text added first. This way you will see if your simple template works. Once you have done some quick testing you can move on and add more to your HTML email.

HTML Email

The first step in setting up your new HTML email is to decide on what kind of layout that you want to use. Remember that this is an HTML email template and not a template for a web page. The basic’s are the same but simple is better. Decide on a single column or two column layouts. These work best for an HTML email because they offer better control.

Single Column Layout

  • Contains a header with some or all of the navigational links. The email looks similar to the parent website. This helps to reinforce branding.
  • This layout may contain links in the body to other articles in the email.
  • A footer is included that may contain identical links that are at the top. If your email is already lengthy then the bottom links can be eliminated to save on html email size.
  • The footer should also contain instructions for being removed from your list.

Two Column Layouts

  • Contains a header with a logo
  • Contains two columns, typically with a narrow side column with links back to the parent website and possibly to different parts of the email newsletter.
  • Contains a second wider column which contains the meat of the newsletter.

Regardless of what your layout is make sure that the most important part of your message is at the top of the email. Many people will simply delete if their attention is not captured by what they see first.

How to Send HTML Email

You can send HTML email using outlook or a web based email application but this will take hours to send to a short list. Yes there are ways to merge letters and send to a list but the far better way to send HTML emails is to use an auto responder program. Auto responder programs are designed to setup your HTML email once and send to hundreds or thousands of prospects or clients. If you are sending HTML email as a regular part of your business then there is no other way to consider. There are web based auto responders and also PC based auto responders that can be purchased for this type of use.

Best Practices for creating and sending an HTML Newsletter

  • Use fixed table widths. Even though users do re-size you can be assured that your email will maintain the original integrity that you intended when you set it up.
  • If spacing becomes an issue then try to use cell padding or cell spacing to tweak your message.
  • Never use Java Script, Most email clients turn it off.
  • Try to avoid using an image that has been sliced. If you do use a sliced image then make sure it displays properly in multiple email clients.
  • Never embed your images. Always store your images on your website. It is best to keep them in a separate folder and do not delete the folder. If you do then an email that is viewed at a later date will have broken images in it.
  • Make sure all images include an alt tag, a height tag and a width tag.
  • Do not send a large single image email. It will look like spam and your efforts will be wasted.

Testing your HTML Newsletter

Always remember that there is no such thing as one little mistake when you are sending to a list of clients or prospects. It is always multiplied by the size of the list. So always test and inspect what you are sending. Once you have the layout and the look down make sure to look for all of the following:

  • Is your from address displayed properly?
  • Is the subject line correct?
  • Does your message contain a link to an online version of the newsletter?
  • Do you have your remove link at the bottom?
  • If you are using merge codes in your email are they displaying the correct information?
  • Do all of the links work correctly?
  • Do all of your images have an alt tag in place?
  • Have you sent the email test to all of the popular email clients such as Gmail, Yahoo? Hotmail and AOL?
  • Have you checked your email with a spam checker to ensure the best results for deliverability?

If you can say yes to all of the above then you are ready to send out your HTML email.

Leave a Reply

Your email address will not be published. Required fields are marked *