Designing for the preview pane
June 5th, 2007
Are you too busy to open your emails during the day? Can’t afford that extra click of the mouse to receive your friend’s message about the latest YouTube video? Or maybe you’re just too damn lazy. Whatever the reason, have we got the solution for you. It’s quick. It’s easy. And it runs by default on most email clients. Curious? Impatient? What could it be?!?
You’ll find out…right after this brief message from Microsoft and Outlook 2007. “Outlook 2007: Setting email code back to 2002 since 2006″.
To many of us out there consistently fighting the daily onslaught of our inbox, the preview pane is the answer to our prayers. It allows us to view a portion of an email without the need to open it. This save us time and provides more information about the email before we make the decision to open or delete the message.
All of that is well and good for the user, but how do you design for it? Not only do you have to still consider the overall message that you’re convincing the recipient to read and ultimately take action on, but we have 25% of the space to do it in. Wait, there’s more. This precious 25% of space could be displayed horizontally or vertically, depending on the setting of the email application and the individual recipient. Having fun yet?
Okay, okay. Enough of the dramatic effect. This isn’t the end of the world. It’s just going to take more consideration and planning. You only have 2-4 inches to convince someone to open your email. Let’s explore how to do it.
The Stats - Customer Usage
- Overall, 64% use preview panes as default when they are presented with this feature.
- 95% of B2B users have email clients that are preview pane capable. 64% are using them.
- 38% of B2C users have email clients that are preview pane capable. 27% are using them.
If you’re thinking right now, “I market to B2C. 27%? Awesome.” - don’t. This preview pane usage may seem low, but it’s deceiving because it takes into account web-based email clients. But don’t you fret. The new versions of Microsoft Hotmail and Yahoo! Mail are preview pane capable. So that 27% will just grow and grow and grow.
More Stats - Age Usage
- 84% of 18-34 year olds
- 68% of 36-54 year olds
- 58% of 55 and older
Viewing Methods
As I mentioned earlier, there are 4 ways you can use a preview pane to view your email - small horizontal, large horizontal, small vertical and large vertical. The good news is that the majority of these users are using the horizontal preview page - 18-34 (76%), 36-54 (74%), 55+ (81%) - which is easier to design for.




Take Action
The upper left corner is the one area that is displayed in all preview pane layouts, so take advantage of it. Reduce the size of the masthead images/logos and move them out of the left corner. Put your most important call to action in that space instead. In promotional emails, proudly display your offer or a “Shop Now” call to action. For your e-Newsletters, list your table of contents or an “In this Issue” teaser highlight.

But my branding, my identity, is in that left corner? What is an e-marketer to do? Remember that email marketing is about encouraging action, whether it’s to buy a product, register for a webinar or simply view a web page. A masthead may brand your email, but it does not encourage action. Don’t worry, your email’s “From” address will still have your company name and your subject line will still include the name of the email. At least industry best practices says it should (hint, hint).
And now for my “wet blanket” moment. Just because someone does not use a preview pane does not mean they read your entire email. They just see your subject line and line listing and are making the decision to open or delete your email based on that text. So don’t forget the subject line.
A Final Thought
Designing for the preview pane is not a massive undertaking, so don’t sweat it. It just takes some additional planning and considerations of your goals, your audience and the action you’d like them to take to reach those goals. Your bottom line will thank you for it.
Read/Add Comments (0) | 2,088 Views | Design, E-mail
Digg this | Bookmark at del.icio.us | E-mail This Post








