One of the best ways to learn about effective email design is by actually seeing the design in action. In this article, we'll show you seven real-world examples of the good, the bad, and the ugly when it comes to email preview pane design, highlighting both pitfalls and successes. Consider these samples as you work to improve your recipients' own preview pane experience, as well as your open and click-through rates.

The email preview pane, also known as the ‘reading pane’, is the part of the email client typically on the right hand side or at the bottom. It gives recipients a sneak peek at what the email is about. And the way an email displays in the preview pane can make the difference between the recipient opening and interacting with the email, or quickly hitting the 'delete' button.

Especially Important for Welcome, Reactivation Campaigns
Certainly, mature email lists are less likely to encounter ongoing preview pane issues--after all, long-term customers have ostensibly added your email address to their whitelist and are seeing your emails as you intended. But the email preview pane is especially important when you're reaching out to first-time customers or attempting to re-engage customers who may not have responded in some time. The first impression (or re-impression) you make will help recipients decide whether to pay attention to your brand or search for the unsubscribe link.

Preview Pane Pitfalls to Avoid

Understanding how your email appears in the preview pane is one of the keys to email design success. Realizing that many email clients block images by default, ignoring how your email looks with images turned off can end up turning off email recipients. It is vital that you test your emails in a variety of different email clients, and that you use a separate account that doesn't have your sender address added to its whitelist. By doing this, you'll have the most accurate view of how a first-time or reactivated email recipient may experience your email. (Note: Click on images to view full size)

Single-Image Emails Leave Recipients Uninformed

Many emails that appear in the preview pane look very similar to the example above: a large blank square with a red x in the upper left-hand corner, indicating that the image has not been downloaded. Outlook will also populate the 'Right-click here to download pictures' message by default--not exactly the most welcoming, customized message your brand could deliver.

Emails like these rely solely on the subject line and the hopes that the email recipient recognizes the 'from' address as the incentive for the email to be opened and fully viewed. When an email looks like this in the preview pane, it's easy to see why a recipient may make the decision to hit delete.

Centered Images Miss the Mark, and Negative Text Sets the Wrong Tone

We see a similar situation with this email. But instead of one red x showing up in the left-hand corner, all that is being displayed is the black background color of the message. The images are actually centered and therefore the 'can't download image' message simply falls off the right-hand side of the screen. When you fully open the email, it displays just fine, but in the preview pane recipients don't get the full effect--and may reach for the delete key as a result.

Notice too the 'Having trouble viewing this email?' message at the top of the email. This is the only text that recipients can read, and the tone of it is negative. Consider a more neutral statement like 'View this email in your browser' as a way to help set the proper tone for your interaction.

More Images, More Potential Issues

Whether you're using one large image or a series of small images, one thing remains the same: if there is no HTML code that is supporting the email, then you simply don't have a lot that you can do to make a good impression in the preview pane. In the email above, you see a handful of red x's--not exactly an invitation to explore further.

This very common design practice also has another potential downside: if your email has an unusually heavy ratio of images to text, many spam filters interpret it as potential spam and score it lower, which may have a negative impact on your inbox deliverability.

Personalization and Relevant Text Provide Incentive to Open

My personal inbox sees between 200-300 emails per day, so I have a vested interest in quickly browsing through emails to see what needs my attention and what can be deleted. The email above was one that was opened rather than tossed, because it did a good job of giving me an incentive to open. How?

First, they've addressed me by name--'Dear Andrew' shows me that there's a good chance that I've interacted with them at some point. Secondly, with a quick glance at the text below I can see that this email has to do with cricket, a sport that I love. Yes, this is definitely an email I intended to receive and want to open and read. With a design that considers the preview pane, this sender is quickly showing me what this email is about, even though no images are displayed.

The Power of HTML to Add Brand Triggers

The example above looks different than other emails we've seen thus far, but how did they get their logo to display in the upper-left hand corner? They didn't. The headline at the top may look like an image, with the attractive colors and the bold font, but it isn't. It's actually a hard-coded HTML that reiterates the site's brand name and mirrors the color scheme used in the company's Web site design. Using HTML code to add brand triggers to your email designs is an excellent way to ensure your emails make it past the preview pane.

Navigation Elements Invite, Capitalized Text Informs, Coupons Inspire Action

The email above does an excellent job of giving recipients an incentive to open and further explore. Notice that the email has navigation elements that are similar to those that may appear on a Web site, and that the navigation elements are repeated as inline links within the body copy. This provides recipients with a very subtle but compelling invitation to browse the site even if they are not responding to a particular offer.

Another technique that this retailer has used is simple, but very effective. As mentioned earlier, Microsoft adds alternative text to the images reminding users that images are not automatically downloaded. But the designer's alternative text also appears. The designer of this email very cleverly decided to capitalize his alternative image text (GREAT CHRISTMAS OFFERS) as a way to help it stand out from the text that the software automatically generates.

Finally, pay attention to the special offer and coupon code in the red box. The bold color helps draw the eye to this very important call-to-action, and showing the coupon code within the preview pane shows the recipient that this is a legitimate offer.

Text-Only Email Can Offer an Effective Alternative, Especially in the Follow Up

After seeing a slew of red x's, one can see how effective a text-only email is when it is displayed in the preview pane. Not only are they effective, but text-only emails are also relatively easy to produce--just put together some compelling copy and go.

One smart way to use text-only emails is as a follow up to HTML emails to capture additional opens and click-throughs that you may have missed. Use your email marketing software to segment your mailing list, sending a text-based version of the HTML email to recipients who did not open. This is something that we've done in our own campaigns: sent an HTML-based email on a Thursday, and then on Friday sent a text-only follow-up message to those who didn't open Thursday's email. Our results have been impressive--our follow up text emails achieved open and click-through rates of between 3-6%.

Preview Pane Email Design Gives a Competitive Edge

For marketers wanting to fully optimize every possible aspect of your email campaigns, the preview pane offers the potential to maximize often overlooked territory. Through testing, designers and marketers can work to create a preview pane display that meets both marketing and email design goals, and gives recipients a good reason to double-click.

###

Related Resources:

• Subscribe to Inside Lyris HQ our monthly online-marketing newsletter.
• Download free online-marketing guides, tools and webinars in the Lyris Online-Marketing Resource Center.