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.
Round 2
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:
Fin
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.
Both comments and pings are currently closed.
Discussion
Great post! E-mail design is such a pain! I would rather go back to plain text for emails!
Can you post your layouts that you created? They would be an excellent addition to this post!
@Divya
Thanks!
Great post.
Something else concerning email previews and worth considering for your email campaign’s first impression is Outlook’s AutoPreview.
This is the small preview of text that is extracted from the beginning of the email when this feature is turned on. It is also present in Gmail next to the subject line (a client which has become popular among businesses moving to Google Apps). Again, it’s important to know what email clients your subscribers are using and prepare accordingly.
Alt text for a strategically placed image at the top of your email can be used for this AutoPreview, which can read better than the text that usually appears at the top of your campaign, such as a link to a web version or a permission reminder statement.
More about AutoPreviews can be read here:
https://www.campaignmonitor.com/blog/post/1842/optimizing-for-gmails-snippets/
Newsletter design are great pain the A–, different browsers render differently, majority of users use outlook as primary, which uses IE engine to render. When we design custom layouts it’s very difficult to maintain consistency, though.
Outlook actually uses the Microsoft Word engine to render email, not IE.
@Jaruhd
Great point! And thanks for the link. That’s a clever idea to use a leading 1×1 image to serve alt text to AutoPreview/Gmail. Whenever I see a hack like that I immediately think about spam filters but this one seems safe.
@chaitra
Indeed they are a pain. BTW, you’re right that Outlook 2003 uses the IE rendering engine but as Paul said, Outlook 2007 actually uses the engine from Word.
Great article Rob. I’m actually the author of the MicroMass Communications study you mentioned in your article, thanks for the feedback.
@Benjamin
Excellent job with that paper! I really enjoyed reading it. Let me know if there’s a better URL I should use to link to it. (btw, I added your name to the post. sorry, should have included that from the beginning. =)
Great post. I’m redesigning some templates right now, and this will help a great deal with explaining some of my changes.
Great post! This is a tough concept to explain but you’ve done a great job.
If you want to see how your email will look in clients I suggest checking out Email on Acid (https://www.emailonacid.com). They show you how your email will look in 16 different clients. It has saved me a TON of time when designing HTML emails for my clients.