Design HTML Email From the Top

My fellow Webmasters: Will you join with me in proclaiming that this is the year we will take our email marketing to the next level?

Let’s banish the days of the endlessly long email! No more will listeners receive messages filled with only images, resulting in a completely blank email that will more than likely be moved to the trash immediately!

For all the time, money and effort put into our Email Marketing, we are doing a major disservice to ourselves and to our databases by not following Best Practices.

Here are some examples of emails I get in my inbox within Entercom. Some good, some not so good; however, it’s not too late to start implementing some easy fixes!

This email is completely and utterly blank. This one might work based on the Subject Line alone, but for most people, we are just too busy to read all the emails we get. We have to be a little more enticing than just a good subject line, followed with a blank email. By default, images are blocked on most email clients.

This email is a better step in the right direction. It has text that let’s you know why you should care.

This email is the best of the bunch. It’s got a good mix of text and images. It could be enhanced even more by pulling out the Calls to Action in each paragraph by pulling it out of the paragraph and having it on it’s own line. The copy could be shortened up even more for a quicker read.

Below is a GREAT article I just shared with our digital staff. We plan on implementing a lot of these tips that we haven’t already incorporated:

It’s a well known fact that you only have a few precious seconds (and pixels) to grab email recipients’ attention and turn them into active readers. If you don’t entice them right away, chances are you’ll lose them. One of the biggest challenges of designing for HTML email is the limited amount of space you have to work with.

While email messages are displayed in windows of varying size, the design standard seems to be 400-600 pixels wide and a few hundred pixels tall. Anything beyond this area must be scrolled to view. What you do with this limited space is crucial to the success of your email marketing.

Being the visual people that we are, designers are tempted to hook viewers with big bold graphics and stylish text treatments done with non-Web safe fonts. But because of the limitations of HTML email clients, your designs must work without relying solely on graphics. Don’t put a big header graphic at the top of your email that takes up all of that valuable real estate. Take into consideration the risk of blocked images - most people will only see a big ugly missing image box with a red “X“. That’s hardly the enticing first impression you want to make.

Missing Image Box with Red "X"

Instead, try creating attractive layouts that can be implemented mostly with HTML. Then use graphics to further enhance the design. These graphics may not appear at first glance, but if you can get people’s attention they will be more inclined to click to view the graphics. All of your text however should remain HTML. The payoff you get from using graphical text won’t make up for the diminished audience you will attract.

In addition to enticing your audience to read more, here are some important content items you should consider adding to the top of your email marketing:

  • Mobile Version

    Alternate Versions
    One solution for dealing with the shortcomings of most email clients is to provide a link to the Web version – a copy of the email on your Web site. More and more people are also reading their email with mobile devices which render HTML email equally bad or worse. Including a link to a mobile-safe version of the email is a good alternative. Placing these links close to the top of the email ensures that they will be seen. Due to the variety of devices in use, as a rule of thumb the optimal line length for a mobile-friendly email is approximately 30-40 characters with spaces.

  • Unsubscribe Link
    There are varying schools of thought on the importance of an unsubscribe link at the top of your email. Creative, marketing, and anti-spam groups all have differing viewpoints. Keep in mind that people now have a number of options available to them if they can’t find your unsubscribe link. Gmail and Windows Live both have list-unsubscribe features in their email headers. And the spam and junk buttons are easily accessible within the top navigation of most email clients.

    Windows Live Unsubscribe

  • So you may as well make your own unsubscribe link easy to find at the top of your email, otherwise people are bound to resort to one of the other options available, which could result in high spam complaints and harm your deliverability. For more on this subject I recommend reading, Time to move the unsubscribe link?, by Mark Brownlow.
  • Call To Action
    Most HTML email marketing campaigns are created to drive more traffic to a company’s Web site or to landing pages for offer fulfillment. If this is the goal of your email, don’t burry this important link at the end of your message. Make it stand out and give it a prominent spot at the top of the email. It is good practice to give readers multiple opportunities to click, especially if the email runs long on content, but always ensure that there is at least one call to action positioned above the fold.
  • Email Call to Action


  • Logo

    While company logos are important for brand recognition and establishing trust with your audience, remember that most viewers won’t see it unless they actively turn the images on in their email client. Perhaps the top left corner could be used for something more engaging, such as an attention-grabbing headline or call to action. (see examples above and below).
    Email Logo Placement

    At the same time, to ensure that readers do recognize your email marketing as coming from your company or brand, include your company name in the subject line and friendly-from address. And of course your physical mailing address should appear in the footer of every email that you send, as per CAN-SPAM regulations.

  • Table of Contents
    Sometimes content is king, especially with email newsletters. Subscribers want to know what new and exciting information your latest e-newsletter will provide. Putting the table of contents at the top of the layout gives people an instant summary of the content. If the content is good, that should be all the enticing they need to read on.
    E-Newsletter Table of Contents

With the much anticipated release of Outlook 2010 everybody is wondering what, if any, rendering improvements there will be. Even if there are significant improvements, there are bound to be new design obstacles to overcome. And HTML email designers will still have to keep all these design techniques in mind for rendering issues in other email clients. One thing that won’t change is the limited space provided to view an email. That’s why engaging design in the first few hundred pixels will always be a top priority.

For more HTML email marketing design tips read: