Best practices for the preheader area in email tell you should include two things – a message to support the content of the email and a link to view the email in a browser. While the browser link is important, a supporting message is arguably more important. In Outlook, Gmail and the iPhone, the preheader text is displayed following the Subject Line. Since the iPhone holds 23% of the market share for email clients this is certainly something that should be taken advantage of.
Let’s take a look at two examples.

American Apparel

Subject Line:
KESH x American Apparel: The New Limited Collection‏

Preheader:
Please click here if you are unable to view the images.

This email from American Apparel doesn’t include a supporting preheader message. Instead, they’re using the space for a browser link only. Kudos for including a browser link, but as you can see on the iPhone preview, they’re missing out on an opportunity to better communicate the message.

Backcountry.com

Subject Line:
Casual Summer Clothes + The 4th of July Sale Is On

Pre-header:
Kick Back With Summertime Clothes From Icebreaker, The North Face, prAna, & More ›

This email from Backcountry.com is a good example of best practices. There is a nice supporting message in the preheader as well as a browser link. Notice the preheader message is on the left and the browser link is on the right. Positioning is important. In order for the preheader text to appear after the subject line it needs to be the first instance of html text in the email. Positioning the preheader message on the left side ensures that it’s the first instance.

‍