Every email client shows you the sender (usually the “Friendly From”) and the subject line. Some go a step further and display additional text below the subject line. Desktop programs such as Outlook and Thunderbird, browser clients such as Gmail and Yahoo, and devices such as the iPhone and some Android phones, all display this “snippet” of text. The snippet is a potential opportunity to increase the likelihood that your email will be opened, but it is often overlooked. We have already discussed the importance of a good “From” address in Best Practices Enhanced Vol. 1, and good Subject Lines on this blog, but the snippet, while not used everywhere, is used in enough email clients and on enough devices to warrant consideration when you are putting together your mailings.

Here is an example of how snippets display on an iPhone 5:

You can see that the snippets for PBS and Wall Street Journal are not very inspired, while the snippet for Travelocity, at least, includes the most important bit of information from the email (“EXTRA 12% off today”). iPhone users can turn off the snippets or change the number of lines that are displayed, but four is the iPhone’s default setting, and people rarely bother to change default settings.

Here is another example taken from the desktop version of Gmail:

In this case, ThinkGeek, an online store that specializes in science fiction-themed knickknacks, has made sure that the next line of text after the subject line has some useful information, while the other vendors shown are counting on their subject line to do all the work. The worst offender here is Touch of Modern—which is slightly ironic considering that this particular website says in its description that it is dedicated to “extraordinary design.” The subject line (“Something incredibly artful”) is so nondescript it almost seems like a placeholder, and the snippet that follows it only makes matters worse by begging to be added to your contact list. Fab’s first email subject line is long enough to push most of the snippet text out of the line. That works fine in Gmail on the desktop, but the iPhone only displays the first 35 – 40 characters in the subject line and devotes the next lines to snippet text. On the iPhone, most of the visible information, then, would be devoted to the click-to-view message, followed by the first alt tags on the images at the top of the page.

It’s a shame to waste this valuable real estate on things like “Click here to view as Web page,” “Unsubscribe,” and random alt tags when you could be using it to further promote your message. There are some easy ways to do this, and they don’t require major redesigns to your email. In this article we’ll look at some of these ways, including some advanced techniques that will help ensure your email gets noticed.

First Element Solution

The simplest, and most popular solution to the problem is to make sure that the first text in the email is meaningful information. Here’s a typical example:

Old Navy has started their email with the line “Give something special and treat yourself too.” In email browsers that display snippets, the Subject line (“Amazing Gifts for Them…And You!”) is immediately followed by this line. By putting this sentence before the usual “View in Browser” and “Unsubscribe” links, Old Navy ensures that the snippet expands on their sales message. It is probably no coincidence that it rhymes as well.

Here’s a slightly more sophisticated approach from gdgt.com:

In this case, they’ve organized everything so that the first bit of text on the page is their image’s alt tag (“gdgt”), followed by two text-based links (“Reviews” and “Best Gadgets”). The alt tag and the two links all assemble into a meaningful phrase (“gdgt Reviews Best gadgets”) followed by the two lines of text on the left:

Cleverly, they’ve used “text-transform: uppercase” to make the links text appear in uppercase in the email, but still appear upper and lower case in the snippet. Unfortunately, they did all this at the expense of the “View in browser” link, which appears nowhere in this particular email. Knowing that alt tag text is also incorporated into snippets, some marketers takes this technique one step further by making sure that the image is the first element on the page, and that the image’s alt text contains the preheader message. With the technique, the alt text is also the first text on the page if image display is turned off.

The downside to using preheader text as a first element is that it runs the risk of drawing attention away from the primary message. This is especially true if, as with the Old Navy example shown above, the preheader text is also a link. For this reason, email marketers often assign a mid-tone color to the text and use “text-display: none” in its style information if the text also contains a link.

Preheader Div Solution

An alternative to the first element approach is to use a non-displaying div preheader that contains the information you want to appear in the snippet. This method affords greater flexibility because the text that appears in a div preheader does not have to appear anywhere else in the message. With this method you can either expand on the meaning of the subject line, give people the most important piece of information from the email, or paraphrase the text on the page as needed. Here is an example from Direct Marketing News (DMN):

Ignoring, for the moment, the fact that DMN has mixed up their own initials in the From name, the div tag gets the piece of information that will appeal to the most people across immediately (“Register now for a chance to win an AMEX giftcard!”). A look at the actual email shows that this information does not appear in the top part of the message:

By using a preheader div, DMN was able to keep the top of the message on topic while allowing the snippet to act as an enticement to encourage registration. Had DMN not used the preheader div on this email, the text below the subject line would read: “View web version Leads, Channels, and the Ongoing Pursuit of ROI,” which may have worked with some segments of the market, but nothing beats a free gift (as long as it’s genuine).

But preheader divs come with one drawback. As we discussed in the series on Responsive Email Design, not all email clients handle invisible divs well. Some will go ahead and place the text on the page. For this reason, preheader div tags are usually configured something like this:

The color attribute shown in the example is based on an email with a white background. Some marketers prefer to omit this color information since text on a background of the same color is seen by some spam filters as a negative quality and can effect the email’s deliverability. Some marketers set the font size to zero, but that comes with the same caveat as color on color.

Which is better?

So is it better to use a div or a preheader that appears as the first text on the page? Most email marketers use the first text approach. It is simpler to implement and is in less danger of being flagged as spam. It also eliminates the problem of compatibility. A preheader that appears as text on a page will work anywhere, whereas non-displaying divs might not.

On the other hand, if your email design is not conducive to the first text approach, and there is some message further down in the content that makes a better teaser line than the first text on the page, then the div approach is the better choice.

Preheader Best Practices

Whichever method you use, it is a good idea to make sure that the snippet is not misleading. If the snippet reads “Learn how to receive your personalized coffee mug,” there better be a way to do so in the email or you are only going to alienate your audience and come across as dishonest.

You also need to be careful about the wording in your preheader. A preheader sentence such as “All clothing is now 50% off for all platinum club members,” could shorten to “All clothing is now 50% off…,” which might make non-platinum club members angry when they finally see the full sentence. Rewording the sentence (e.g., “Platinum club members now get 50% off on all clothing”) so that the modifying information comes first will help avoid this problem. Also be careful with statements where the second half of the sentence contradicts the first half (e.g., “The Ford Fiesta is a great car, if you like visiting the repair shop”). Unless you are intentionally intending for the message to be cut off for a humorous effect, it’s a good idea to reword the line so that this won’t happen.

Another thing to watch out for is the Title tag, which the iPhone will include as the first text in the snippet, but other email clients, such as Gmail and Yahoo, will not. There may be times when you can take advantage of this idiosyncrasy, but in most cases you’ll want to remove the title tags from your email’s HTML to ensure that your preheader appears the same across all platforms.

Whether you choose to use a first text preheader, or the div version is up to you, but you should be doing one or the other. The various email clients give you a certain amount of text to get your message across, and if you’re not taking advantage of it, you are missing out on a simple and easy method to add to the potential selling power of your email.