Wildbit

The Blog

Thoughts on building web apps, businesses, and virtual teams.

16 Aug How to get better email content previews in Gmail ← Go back

Posted by Alex Hillman on August 16, 2011 — 4 Comments

Does this look familiar?

Gmail preview

You might not have even noticed, but Gmail previews the first few lines of text in an email right after the subject. Normally, this is great, helping you peek inside an email to determine if you want to read the rest. But we realized that for our newsletters, the preview piece was always the same: “Follow us on Twitter. Read our Blog. View this Newsletter Online”. Not very helpful, is it? Wouldn’t it be great if those first few lines were more descriptive, or at least more enticing to the reader?

I poked Eugene about this problem, since he’d recently done a bunch of work to optimize our email templates for Beanstalk. He hadn’t heard of a good solution, so he set out to experiment and create his own.

The challenge was to create some text at the beginning of the email that would be shown as the preview, but not appear in the body of the email itself. It turns out, like many HTML email tricks, an old-school method ended up working best.

Remember spacer gifs?

Back in the days before beautiful CSS-powered layouts, we used tables. Sometimes a table cell needed to be propped open, and a common technique was to take a 1px by 1px transparent gif image file and set its height or width dimensions to stretch it as a “shim” to hold a table cell to a certain size.

Since HTML emails use tables for layout, Eugene was inspired to go back to some old tricks.

<img alt="Free tutorials, tips and best practices to help you make the most of your design and development workflow." src="spacer.gif" width="1" height="1" border="0">

By putting the text we want to show up in the Gmail preview in the alt tag of a 1px by 1px spacer gif, we were able to accomplish the desired effect without changing the visible content of the email. Success! Nice work Eugene!

Better Gmail preview

What to put in your optimized email preview text?

The key to these previews being useful is to find information that supplements the subject line of an email.

For our newsletter announcing Beanstalk Guides, we made the preview more focused on the kind of person who might want to look at guides – in our case, people who wanted to make the most of their design and development workflows.

For your newsletter, you will want to write a preview that speaks to your ideal recipient. Let the subject focus on the specifics of a deal or offer – the preview should be a little more personal feeling!

Update: Looks like Campaign Monitor wrote about this technique…in 2006! We’re glad to see that we’re not the only ones who’ve found this solution, but we’re also sure that we’re not the only people who hadn’t seen Campaign monitor’s post, either. So we’re happy to give this topic a much needed “bump” and encourage people to improve their emails!

4 Comments

1 Trackbacks/Pingbacks

  1. Pingback: Grab Your Subscribers' Attention Beyond the Subject Line on July 24, 2013

Why not put the alt text in a header image instead?

Gary Coleman — August 16, 2011, 1:21 pm

Gary,

In our case, our “Follow on Twitter” and “Read our Blog” link appeared before the logo, so that didn’t work. For any number of reasons, the logo might not be the first bit of content in your email, and this technique provides an alternative!

Alex Hillman — August 16, 2011, 1:24 pm

What is wrong with a simple div with inline style display:none? Seems to me less convoluted and works.

elmimmo — August 20, 2011, 1:09 am

Sorry, comments for this entry are closed at this time.

← Go back

Get in Touch

Wildbit, LLC

Work 20 North 3rd St, 701
Philadelphia, PA 19106 USA

Google Maps
 
 
Fax
+1 (267) 200 0835
Email