Site Search

 
Designing HTML Email From the Top
Design HTML Email From the TopIt'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 VersionAlternate 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:



###

About the Author

Dean Silvestri is a freelance multimedia developer and owner of Atlas Projects. He works directly with clients such as Lyris to design and develop HTML emails, landing pages, banner ads, presentations, Web sites, demo videos, and other marketing material.

Related Resources:
 

Add comment


Lyris HQ Client Login

Flash Player Required

Lyris HQ requires the most recent version of the Adobe Flash Player, a free browser plug-in.

Get Adobe Flash Player.

Get Adobe Flash Player

Integrated Email Marketing Solution - Lyris HQ
Maximize ROI from your spend. Lyris HQ brings together email marketing, deliverability tools, content creation, Web analytics, search, social and mobile marketing. Execute campaigns and review ROI performance from one integrated solution. That's the unbeatable power of Lyris HQ.

Salesforce Integration