If you regularly skim through your junk folder, you must have noticed some patterns when it comes to the structure of emails that land there. Let’s face it – there’s a horde of marketers that decide to take the risky route and, instead of writing well-formatted HTML messages, they simply insert a one gigantic image and link it to their landing page. This not only runs counter to HTML and email design best practices, but it also guarantees a junk folder “final stop” in most cases.

Yes, marketers, even a great domain reputation and a top-notch team optimizing deliverability “round the clock will NOT help you if your HTML template violates spam rules.

That’s why we’ve decided to draw up a 4-part series of posts that will shed some more light on effective planning of your email message sections, in accordance with industry’s best practices.

Let’s Talk About Preheaders!

So let me start by introducing you to our first “preheaders” blog article with case study. First, let’s explain what is a “preheader” and why it’s so important!

Imagine you’re walking down the street looking in store windows, trying to decide whether to go in or not. You just walked by a chocolatier and it stopped you in your tracks! The gorgeous, mouth-watering, colorful truffles, crèmes, and jellies are already melting in your mouth.

The preheader is just like your storefront window – the email section subscribers see right after they open your email.

Now what you have to do is get them salivating with the preheader, then exceed their expectations with some juicy offers, great info, and cool graphics or video.

A picture’s worth a 1000 words, so let’s examine a screenshot of a typical HTML email found in a spam folder. Please note that we’re dealing here with the “images off” version as most ISPs (such as Gmail, Yahoo or Hotmail) block images by default nowadays. The purpose of this is to make the spammer’s life a little harder and prevent them from displaying offensive pictures and knowing whether the recipient opened the message.

Here’s what such a spam mail may look like:

Not really exciting, eh?

In a well-constructed email message, you should be able to easily recognize the following sections: preheader, header, main call to action and footer. In the example below, the marketer could surely do a better job of getting our attention right away. Think enticing window display or “impulse” candy section at the grocery check-out line!

One look should tell you the sender is not getting the best possible outcomes because the HTML content is kind of “mooshed” together rather than separated into sections, such as:

Instead of following the best practices path, this designer has decided to base the entire message format around one huge graphic that doesn’t give the recipient a clue about the topic or content before he chooses to unblock images.

Use “ALT” Attribute To Describe Your Images

If you saw this in your email, would you unblock images if you had NO idea whether it came from your neighborhood florist or a Canadian Pharmacy spammer?

The images lack a text description (no ALT attribute), so subscribers are unable to link the blocked image with any particular business or offer. Senders should always use ALT attribute to describe an image with concise text, even if the graphic itself is blocked. This gives them some idea of what they’re going to see once the image is unblocked.

Why are ALT attributes a “must” for senders today?

Simple: the number of email clients that block images by default these days is mind-numbing. And the fact that you’re a legitimate and reputable business doesn’t mean that 100% of your subscribers will instantly recognize your company name. ALT attribute gives your subscribers that extra bit of information they need to feel confident about your message − and that increases responsiveness and engagement.

How To Create A Great Preheader?

OK, enough doom and gloom! Let’s get to the point and focus on preheader design. Sometimes we spend so much time on the core marketing message, we totally skip the preheader part, yet doing so is like leaving your store window empty – deliberately reducing your open rate and click-throughs.

There are no golden rules regarding what preheaders should include but, based on our  experience, you should consider the following points:

• Try using snippet text, which usually communicates a concise call to action, like this:

• Create a link to generate the “lite” version of a newsletter for those folks who read their mail on Blackberrys, iPhones and other smartphones;
• Write a short note suggesting that recipients add the sender’s address to their address books so that future messages can get past spam filters and into their inboxes;
• Additionally, you could insert an extra unsubscribe link to prevent some recipients from hitting the spam button. A “forward-to-a-friend” link in the preheader also seems to work well for many of our customers.

When you boil it all down, there are two major factors that influence the effectiveness of your preheaders: 1. those that enhance the marketing message of your offer, and 2. purely functional elements designed to improve deliverability and email reception.

Here a few examples of effective preheaders:

Example #1

Example #2

Example #3

Still Not Convinced?

If you’re still hesitant about adding a preheader in your messages, please consider the following:

• Many email clients block images by default. Preheaders allow you to “smuggle in” the marketing content, even if the rest of the HTML creative will be torn off the shiny call-to-action (CTA) images and buttons − and all subscribers will be able to see are empty white frames!
• Again, snippet text is a cunning and effective way to show 1-2 sentences encouraging your recipients to open your message. Gmail and MS Outlook 2007 render snippet text next to the subject line, so you can always use the extra characters to enhance your broadcast and give recipients another reason to open your newsletter;
• Last, but not least, you should summarize the content of the message in the preheader, so recipients can quickly and easily grasp your message without scrolling down a couple of times or, worse, deleting your email. In fact, this could be a real lifesaver in some cases!

Convinced yet? Just keep in mind the fact that preheaders have special requirements that need to be respected if you want to produce email sections that really deliver results. Here’s an example of preheader snippets and some details about how to use them effectively:

• Snippet text needs to be placed at the very beginning of your preheader. If you precede it with “Click this link to view the online version” or any other text, you will not be successful in rendering the call-to-action before the message is opened;
  
• Gmail will cut off the CTA snippet text displayed before opening the message after 100 characters. The email client in iPhone allows an additional 40 chars to this, making it 140 characters altogether, so keep these limits in mind when optimizing the snippet text for your next newsletter;
• The call-to-action in your preheader should complement the subject line, instead of simply summarizing it. Use it to motivate recipients to open the message. After all, without opens, there are no clicks and conversions!

To wrap it up, however successful you think your preheader might be, don’t forget to test it for maximum effect. GetResponse split-testing can be a key to success here, so don’t hesitate to make the most of it and pin down the right preheader to “nail” your email marketing success.

If you’re already using preheader in your messages, feel free to share your thoughts in the comments below. Has it increased the responsiveness of your list? How about open rates?

We look forward to your feedback and to seeing you again in a couple of days when we’ll return with Part 2 of the series, this time tackling the “header”!