Guide to a Better HTML Email Design – Part 13

12. Preview Panes and Blocked Images

The two advances in email clients are combining to deliver a double whammy to email marketers:

1. the horizontal/vertical preview panes which allow a reader to view just a narrow strip or square of an email message without actually opening it, and
2. a blocked-images feature that prevents images from downloading unless the reader requests them. Around 75% of people who use preview panes prefer the horizontal version, while the remaining 25% prefer the vertical version. You can cover both pane configurations by placing the most important information in the top left corner.

The Sprinklr India Newsletter in the Outlook preview pane: although the images are blocked, recipients can preview the email’s contents from the teaser text and a concise subject line.
Individually, each of these features can throw off your open rate and prevent users from seeing your most critical information. In tandem, it means your email performance may be reduced significantly if you don’t redesign your emails to deliver key information as quickly as possible. In fact, you should assume that you have only 2 to 4 inches of space to tell your story and persuade viewers to open your email instead of just previewing it.

Although this has implications for both business and consumer email marketers and publishers, the problem is especially acute for B2B emailers, because a significant portion of their readers are likely using Outlook and Lotus Notes — the two email clients that combine preview panes and blocked images.
Some email industry observers have even attributed drops in open rates to widespread use of blocked images, because an “open” is generally counted when a small, clear image within an email message is called from a Web server. If the image is being blocked, the “open” is not counted.

While most Web-based email clients don’t use preview panes, Yahoo Mail has a relatively new Web client that behaves more like a desktop client with a preview pane and default image-blocking. Yahoo Mail and other Web email clients also use image blocking as a default setting.

Take these steps to make your email more preview-pane/disabled-image friendly:

1. Redesign the top of your email template so that key content shows in the preview pane even if images are disabled or blocked. Content-oriented newsletters should include headlines or “In This Issue” teasers. Newsletters with banner/image-based ads should switch to text ads and content teasers. Ecommerce and other promotional-type emails should summarize or highlight the key proposition, offer or products right up top.
2. Study your click-tracking reports to understand where readers are clicking most often. Use this information to determine the best placement of images and links.
3. Ask to be added to your subscribers’ address book. Images are displayed by default if you’re in the address book for all AOL and Hotmail recipients as well as anyone using Outlook or Outlook Express. Always send from the same address, since that is the address the recipient will add to the address book.
4. Move less critical administrative information to an Admin Center at the end of the email or newsletter, especially if it draws few clicks. But consider keeping or including text links to key actions below your “In This Issue” or teaser text. At Sprinklr, we saw a fairly high number of newsletter subscribers clicking the “View Message Online” link. So, we kept that and added “Update Profile” and a few other key actions.
5. Your From and Subject lines become much more important in this new reality. Sixty percent of readers told us they consult subject lines to decide whether they’ll scan the message in the preview pane or just delete it without a glance.
6. In this new preview-pane format, the From and Subject lines become the top two points of a triangle, with the third point being the top of your newsletter or email. All three have to work together to snag a reader’s eye.
7. Remember that email clients vary in how they show From and Subject lines in the Inbox. You should keep both to no more than 50 characters each.
8. Use both text and HTML in advertisements, logos and branding messages rather than live images linked to your Website, such as JPEGs or GIFs. You’ll still be able to deliver key information even to readers whose email clients block images.
9. Use alt tags that describe an image’s content or action.
10. Review your HTML coding to make sure it complies with W3C standards.
11. Review how well your format complies with the quirks and nonstandard rendering of Lotus Notes. Depending on your B2B readership, your Lotus Notes subscriber base might range from a low of 5% to as high as 15%.
12. Eliminate skyscraper or vertically rectangular ads that go deeper than the pixel equivalent of 3 or 4 inches.

Whether your email subscribers are B2B or B2C, use of the preview pane will only increase. You should act now to redesign your emails for a world of blocked images and small preview panes.

Read earlier blogs on the subject “Guide to a Better HTML Email Design” on Kenscio Blog.