Does this look familiar?
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!
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!