Creating Mockups for HTML Email Templates

The quick and dirty:

• Keep it within 600 pixels wide
• Make sure the email will make sense to the recipient BEFORE they download the images. (i.e. keep images small and don’t use them in place of text)
• Make sure there is CONTENT (not just mastheads and images) in the first 300 pixels vertically
• Every email must have an unsubscribe link in an obvious location (at the top, bottom or both)
• Every email must have a physical address (not a P.O. Box) of the sender. Companies in the UK must also include their “Registered in England number”
• Dark backgrounds are generally a bad idea.

At Mailout Interactive, we design our customers’ email templates in two steps. First we create a graphical mockup of the template. Then, once the design and layout are approved, we build the template. (Note: The Text Only version of the email template is generally an afterthought for clients. As a result, we generally find it useful to wait until the HTML email is created before introducing the Text Only version to our clients). The mockup is designed to the “Best Case Scenario” where images load, css is applied and web standards are adhered to. This isn’t the way the email will render in everyone’s mail client but it’s the best that can be done.

Designing for email is difficult. There are no well-accepted standards that are applied to how an email will display. As a result, designers must consider several factors when creating a message. These factors include: Preview Panes, Image Blocking, Web Fonts, and Unsubscribe / Privacy / Legislative Requirements. There are different types of mailouts and each has its own unique qualities and best practices. The most common that we see are Newsletters, Announcements, Invitations, and Promotions. Each of these types has it’s own common elements and challenges.

Preview Panes

2005 statistics showed that 69% of business to business email users read their email in the “Preview Pane” of their email program. This feature is increasingly becoming available on web mail services as well (i.e. Windows Live). There are two varieties of preview pane that designers must contend with, vertical and horizontal.

Vertical preview panes require that the width of an email be narrow 550 – 640 pixels is optimal. There are situations when you can have greater widths such as when recipients are high tech business users. However, this is the exception rather than the rule.

Horizontal preview panes make for a short area with which to get your point across. This is challenging for designers who are accustomed to web pages or printed communications. In both of those media, the masthead can be very large and the message and/or call to action is generally in the center of the page. If an email that is designed with a large masthead and content in the middle of the page, the recipient is unlikely to understand the message. All they will see is the branding. It is important to ensure that at least some of the content of the message appears within the first 300 vertical pixels of an email. If the mailout is a newsletter, it’s a good practice to give the reader an “In this issue” index that gives the reader indication and navigation to what lies below (and outside of the preview).

Image Blocking

It’s tempting to design an email as a single graphic. To do so would give the designer complete control of the creative. Sadly, this approach just doesn’t work. Many (and possibly most) email programs initially block images in emails. As a result, many of your recipients see grayed out boxes or blank spaces where your lovely images appear. For the email designer, this means that the verbiage or copy of an email ought to be in text as opposed to being part of a graphic. This limits the choices of fonts available for your copy to the typical web fonts. These fonts include: Times, Times New Roman, Georgia, Arial, Verdana, Helvetica, Trebuchet MS, Tahoma and Lucida Sans. Don’t count to heavily on any of these though. In some extreme cases, email clients will override your fonts with their own.

Mailout elements that should not be images include:

• Unsubscribe links
• Privacy Policy Links
• Article titles
• Body copy
• “If you are having trouble viewing this properly” text
• CAN-SPAM address (physical address) and/or Registered in England number

Unsubscribe / Privacy / Legislative Requirements

Unsubscribe - Unless your mailout is an internal mailing, you need to include an unsubscribe link. In many countries it’s the law. In cyberspace, you’re asking for BIG TROUBLE without it. As a our customer, we require it.

Privacy Policy – This is never a bad idea. Why not set your subscribers at ease? If your organization has a posted privacy policy, you should link to if from your mailouts.

Legislative Requirements – In addition to the unsubscribe link the two big legislative requirements come from the U.S. and the U.K. The United States requires you to put a physical address (NOT a P.O. Box) on your mailouts. The U.K. requires Registered in England numbers from those who are registered there. Although your recipients may not be located in one of these countries, it is entirely likely that their email box physically resides there.

Rich Media (i.e. Flash, DHTML, Javascript, etc.)

Forget it. The best you can hope for is to use the “Sliding Doors” image rollover technique for some email clients. Everything else doesn’t really work and will result in broken or blocked mailouts.