Netplus, an iMedia Top 25 Agency to Watch
by Jim DelPizzo
December 7th, 2011

Building better Emails - HTML Best Practice

A couple weeks ago I wrote about email layout and best practices when thinking about your email to your clients. In this blog post I will take you through the best practices when building your email.

The first thing you have to think about is the width of your email. You want to keep the width of your emails 650px or under.

When building your email use basic HTML, and when I mean basic I mean go back to when you used tables for everything. That’s right build your email with tables. Your main table can have a width of 100% and then have all your content in a sub table width be 650px and have it centered. If the users email client is larger than the 650px the main content will be centered. You do not want to use background images on tables, but can use a solid color.

The top of your email should have the housekeeping links. Links for forward to a friend, view in a web browser, and teaser copy. After the house keeping links you want to have a navigation that mirrors that of your website. You want your users to feel comfortable when they get your email. You don’t want them to think it is spam. You also want the navigation incase the user wants to get to your site, but doesn’t click on any calls to action (CTA) within the email

On the average users spend 2 seconds on an email before they decide to keep reading or delete it. You want all your important information above the fold. You want to keep your email short and keep it simple, the KISS method (keep it short and simple, what were you thinking?). Give users basic information with lots of read more links. If by chance you have a lot of information you want to be displayed in your email use a table of contents with anchor tags linking down to the content.

You want your email to have an even balance of text and image. You do not want your email to be one large image. Most email clients have images turned off by default. When putting images into your image make sure you use the width, height, and alt attributes within the img tag.

For content blocks tease the users and add read more links to the content on the site. This will give you a better click through rate for your emails. You do not want to have images as CTA. If a user has images turned off they will not know it is a link.

Below are inline styles you can use in your email. These basic tags area all you will need to format your emails

  • Font
  • font-family
  • font-size
  • font-style
  • text-align
  • line-height
  • text-indent
  • color
  • background-color
  • border
  • height
  • width

Another quick hint to fix white gap between adjacent images in some image clients use style=”display:block”.

With my last post and this post you are now ready to build a great email that your users will not only love but click through to your site. My next post will be best practices for building a better email for mobile users.



NETPLUS TWEETS

BLOG
Insights, thoughts and notes

PUBLISHED
Articles and presentations