How should you design your HTML email campaigns for maximum readability?

If you design web pages, you probably start with the assumption that most users have a screen resolution of 1024×768 pixels. Then you work your way down from there. But what about when you design HTML emails?

Here’s a very nice HTML email design (click to zoom in):

It was designed no wider than 600 pixels. That’s extremely narrow, by most web designers’ standards.

Even so, here’s what that email looks like in the preview pane of Outlook 2003:

That’s on a 1024×768 screen, with the preview pane set to “horizontal” mode.

Here’s what it looks like in Outlook2003 with preview pane set to vertical:

Here’s the same email in Mozilla Thunderbird, with the preview pane set to horizontal (same 1024×768 resolution screen):

Here’s Yahoo Mail, horizontal preview pane (sorry, I forget if this was Yahoo Mail Beta, or Yahoo Mail Classic):

Here it is in Windows Live Hotmail, vertical preview pane:

For the Hotmail version, notice a couple more design challenges:

• The yellow warning at the top adds (telling you that images and links were turned off for your protection) pushes the email down 40 pixels.
• Which reminds me, Hotmail turns off all your images and links in your design, unless the sender is either a) in the recipient’s address book, or b) SenderScore Certified.
• Speaking of getting into the recipient’s address book, there’s a second warning: “you may not know this sender. Mark as safe?” That pushes your design down another 30 pixels.

1024×768 screen resolution is not an option in email design.

It’s not even close. Here’s that email in yet another email program (again, sorry—I forgot which one) set to vertical preview pane:

Design Emails For Teeny, Tiny Preview Panes

Clearly, you’ve got to design your emails so that compelling content appears in that preview pane.

That’s your first chance to make a good impression.

Newbie designers will complain and whine about this.

Experienced designers, who enjoy a good challenge (that’s why you became a designer, right?), will think this is nothing new.

Everything you design, whether it’s a poster, a website, a TV ad, a banner ad—you’ve basically got half a second to grab someone’s attention.

The trick in email design, IMHO, is to grab their attention with usefulness (not salesy-ness). It’s a test to see how many people you can get to open, click, and buy, based on your design. Talk about influence. It’s quite fun.

Anyway, here’s my advice on designing for preview panes.

Design Emails For The 250px Box

You’ve got a 250 pixel box to entice & woo your subscribers to read more of your email:

That’s an example I found on the Smith-Harmon blog. Most of my inspiration for this “250px Box” came from their tips and observations. If you’re getting started in email design, go and bookmark the Smith-Harmon website, and sign up for their email newsletter.

If you click on the screenshot above, you’ll see a 250×250 pixel red box in the top left of the email design. That’s what will peek out in a user’s preview pane.

Here is what the designer of that email squeezed into that 250 pixels:

1. An enticing pre-header snippet text that tells readers what kind of content is below. The first line of an email is often what mobile users see, and it’s what appears in Gmail’s inbox view as well. If you’re selling stuff to subscribers, it’s usually a good idea for your first line of content in an email to NOT be too functional (unsubscribe here, view archive, forward to friend, etc). Waste of space. Use it to tell readers why they should open. This is another observation first brought to light, I think, by the geniuses at Smith-Harmon, over at the EEC Blog then elaborated on by the folks at Bronto.
2. Under the pre-header text, they squeezed in an email archive link. That’s where recipients can click if they experience a “catastrophic failure” in the email’s design. Click it to see an archive in the browser. By the way, all your email designs should have an archive link.
3. The Sephora logo.
4. 3 links (just below the logo) pointing to sections on the website that I presume are Sephora’s most important categories (based on all the trips to Sephora that my wife makes me endure).
5. I snippet of the hot pink banner, which talks about the the cool new thing they’re introducing: “Ratings & Reviews”

That’s 5 huge, impactful things that this designer got into a 250 pixel box.

Let’s take a look at another example, this time from the experts themselves, Smith-Harmon.

Sign up for their email newsletter, and you’ll get a nice “Welcome Email.” Most people don’t spend much time customizing their welcome emails, but they should. It’s your only chance to make a first impression (BTW, we’ve got two tutorials about that here and here).

Anyway, this is what their welcome email looks like:

Did they design for the 250 pixel box?

You betcha:

Click on that thumbnail, and you’ll see that they got the following squeezed into their 250 pixels:

• Enticing pre-header text (”10 ways to improve your email creative”)
• Their logo
• A few lines of welcome text, reminding you that “you signed up for this, remember?” This is kind of a passive-aggressive permission reminder, to deter forgetful people from mistakenly reporting the sender for spam. But it’s also just a nice welcome. And kudos for their main banner image being creative, plus reminding the user that “you asked for it. we sent.”

Double kudos for making the welcome email so chock full of useful stuff. You get links to “Great Reads” plus you get 10 useful tips.

Usefulness is always the best “design tactic” for email.

The trick is putting that usefulness where readers can see it.

Notes:
This email is composed of slides from a presentation I gave at WebJam 2008, and also at The University of Georgia’s “Lunch & Learn” series for the Terry College of Business. I’ll be posting more tips and tricks from my presentation here on the blog soon. Stay tuned!

The screenshots of preview panes above were taken using MailChimp’s Inbox Inspector tool. You click a button, and we generate screenshots of your email design in all the major email programs (we’ll also tell you your spam score). Just in case you’re curious, it looks something like this: