Designing HTML Email For the Preview Pane
A few things aside, the browser is not a terrible canvas for a designer. Sure, there are a lot of unknowns—screen resolution, fonts, operating systems, plugins, connection speed, color profiles, etc—and IE doesn’t make it any easier (OK, so maybe it is a terrible canvas), but on the plus side we’re given a large slate of pixels that, for the most part, will behave as we expect.
However tricky browsers can be, email clients are often worse. In addition to all of the aforementioned unknowns, the HTML email designer has to consider spam filters, a great number of rendering quirks (most courtesy of Microsoft), and the different viewspaces that different clients offer. It’s the last one, the idea of the “preview pane”, that I want to talk about now.
A real-life example
Recently I had to come up with a quick redesign for a promotional email. I was about 80% done when I got stuck. To trigger some new ideas I opened up my inbox, took a screenshot, and then dropped in my email design. I was surprised to see just how little of the email fit into the preview pane. I was especially disappointed to see that my main call-to-action was completely obstructed from view.
Here’s the original layout, followed by a highlight of what was visible in the Outlook preview pane:
It wasn’t too awful—the header and intro line were fully visible—but I felt it could be better.
What are your users using?
In planning your email design one of the first things you want to consider is what type of email clients are popular among your users. Check and see if your email deployment service provides tracking data on what clients your subscribers are using. If not, you’ll need to make some educated guesses. Maybe you can infer something from your web analytics. Maybe you serve a particular audience, a corporate audience for example, where you can safely assume that most subscribers are using Outlook.
In my case this email was for a B-to-B market so I knew Outlook would be the most popular client.
Break out the measuring tape
To get an average measurement of the space I had to work with I set my display to 1024×768 and put the preview pane of Outlook 2007 at about the 50% mark. I measured a space of about 750×230.
Later I found this great study written by Benjamin Curtis of MicroMass Communications, in which he analyzes the preview pane dimensions of a number of desktop and web clients. The conclusion:
“From the above preview pane size results, you could surmise that designers and strategists should structure their e-mails to contain the most relevant calls to action within the top 638×86 pixels.”
The top 86px! That’s barely enough room to fit your “Trouble reading?” link.
I couldn’t bring myself to adhere to the 86px limit so I stuck with my plan to optimize for Outlook. According to the study, on a 1024×768 screen the average horizontal preview pane (with images enabled) in Outlook 2003 is 743×232.
So here is my revised template, as well as an overlay of the visible area of the Outlook horizontal preview pane. I flipped the hero image and main call-to-action. You’ll also notice that I moved the secondary call-to-action up and to the left side of the template (more on that in a second).
Now the call-to-action is fully visible from the preview pane.
What about the vertical preview pane? In Outlook 2007 the preview pane is set vertically by default (was this true for Outlook 2003 too?). By putting a secondary call-to-action on the left side of the template we can ensure that both horizontal and vertical preview panes contain a call-t0-action. Here’s the vertical pane overlay:
Is it essential that the call-to-action be exposed in the preview pane? Maybe not. But I don’t think it can hurt to give the user an opportunity to click through directly from the preview pane.
The lesson here is simple: if your subscriber base is likely to be using desktop email clients, try to squeeze your most valuable content into the far top-left of the design. If you’re designing a marketing email with a call-to-action, consider placing one call-to-action in the top ~200px and another in the top left ~400x400px. Or you could try combining these into one.
Also, use the measurements from the MicroMass study to get a feel for how much of your design will be hidden in various clients. If you have knowledge of which clients your subscribers are using, the data in this study can be very helpful.
Further reading: for more on the subject, you might like this article from Lyris.