Optimizing for Gmail's snippets and Outlook's AutoPreview
Posted by David Greiner on October 25, 2006
Inspired by Jeanne Jennings great write-up on designing emails for Gmail's snippets and Outlook's auto-preview, I decided to run a few tests of my own.
First things first, a Gmail snippet is that small chunk of light grey text immediately following your email subject in the Gmail inbox. It usually includes the first few lines from your email to give the recipient a sample of what's to come. Outlook's AutoPreview feature is a very similar concept.
Problem is, the first few lines of your email might be a link to your web-based version or an unsubscribe link - probably not the optimal text to encourage your recipient to dive into the email. Then Jeanne came out with this gem:
Yes, you can simply place your fabulously engaging snippet/AutoPreview phrase at the very top of the e-mail where all will see it. Or you can use alt tags and place it beneath an image at the top of your e-mail (say, your logo). The alt tag text will come through in the snippet or AutoPreview area, but it won't be seen once the reader opens the e-mail.
What a top idea! We decided to have a go at this technique with the latest version of the Campaign Monitor newsletter, which of course, was sent a few hours before we saw this article.
We left the original email completely untouched, but added the following single pixel transparent image to the top of our email with some alt text that gave a good overview of the email contents, like such:
<img alt="14 new email designs in the gallery, loads of tips and the latest updates for Campaign Monitor" src="explanation.gif" width="1" height="1" />
Here's a before and after sample of the original version of the email in both Gmail and Outlook and the updated version with the transparent image:
Gmail
The alt text version now gives the recipients a much better idea about what to expect from our newsletter.
Outlook
For some reason Outlook was inserting a weird line-break in our alt text that we couldn't avoid. If anyone knows the reasoning behind this we'd love to hear it. Either way though, a much improved bit of teaser text.
As you can see, that small hidden image gave our recipients a much better teaser about the content of the email, which would hopefully encourage more of our subscribers to check the email out. Big props to Jeanne for introducing us to the concept. I'd say we'll be using this approach for all our newsletters moving forward, and encourage you to do the same.
23 comments so far
Search all posts
Dig into a category
- Articles/Tips (110)
- Email Newsletter Design (125)
- Happy Customers/Press (92)
- In the Forums (11)
- Interviews & Case Studies (9)
- New Features & Updates (113)
- Observations & Answers (101)
Stay in the loop
Prefer updates via email? Sign up below and we'll send you all the good bits each month.
Popular articles
Email design guidelines
Straight to the point advice for creating effective emails.
Why we need standards support in email
Read why standards in HTML email are so important, and what we're doing about it.
CSS support in email for 2008
The CSS support of even more popular email environments tested and recorded.
Image blocking in email
A roundup of how each of the popular email clients suppress images in HTML email.
Can I use flash in email?
We test flash support in all the popular email clients. The verdict - don't do it.
Email design gallery
Our email design gallery showcases more than 150 amazing email designs sent by our talented customers.
Kieran
wrote on October 25, 2006 8:41 PM
Just a thought about the line break - it seems to be in the same place as the break in the code so I wondered if you might have included something within the alt tag other than a space which is tripping Outlook up....
Dave Greiner
wrote on October 25, 2006 10:08 PM
Good call Keiran, I'll check that out and let you know the result.
Dave Ditges
wrote on October 26, 2006 12:03 AM
Very nice! This will definitely be implemented in our next email.
Brendan Vaughn
wrote on October 27, 2006 3:21 AM
The downside here is that when previewed with images turned off, you have one image that takes up a lot of real estate to display this alt-text and it disappears when images are loaded.
Rob
wrote on October 28, 2006 1:48 AM
Perhaps that could be remedied by using that alt text in a spacer image before the first graphic?
Dave Greiner
wrote on October 30, 2006 4:49 PM
Brendan, just like Rob suggested, the image used was a 1 by 1 pixel spacer gif, so as long as you include the dimensions in the image tag, most email environments won't actually display an image placeholder at all. That's the beauty of this technique, the message is only seen in the snippet and AutoPreview area and not wasting prime screen real estate in the body of the email.
Keiran, we tried a few different text alternatives and were still getting the strange line-break issue. It's a weird one. If anyone can see a work around to the AutoPreview line-break, we'd love to hear it.
Dave
wrote on November 10, 2006 2:03 AM
Seems to me the line break is at the 76 char word wrap position, taking '
bryan
wrote on November 17, 2006 6:34 PM
When my company sends out HTML emails, the very first character of the auto preview is a blank white space. Does anyone know how to get rid of that?
Also, when sending out plain text emails my company follows the standard of wrapping text at 69 characters per line, 55 characters for capitalized lines. My clients constantly complain about plain text auto preview showing weird breaks just as several of you have mentioned already. I can't seem to figure out how to get around this problem no matter how the text is wrapped. Is there no fix for this?
Joe
wrote on December 8, 2006 5:37 AM
Can you add a non-breaking space character ( ) in between the words to force the words to stay on one line?
James
wrote on December 8, 2006 5:57 AM
Interesting.. i've always done this anyway (had a logo in the top corner with some alt text) but now ill add a bit more info into it.
Cheers for the tip.
James
Playgrounds
wrote on December 8, 2006 7:55 PM
After reading this post, I jumped back to my Outlook 2003 Inbox and previewed the newsletter from Campaign Monitor - just to see...Check out the result here and if anyone know, please explane how to get rid of that hyperlink!? That will defineltty scare of some people...
LINK: http://www.adjustit.dk/pixelbox/blog/_img/campaign_monitor_preview.gif
Dave Greiner
wrote on December 11, 2006 9:49 PM
Hmmm playgrounds, that's a new one. I'm running Outlook 2003 and I don't get the "HYPERLINK" text. Just to clarify, do yo actually have a link around this image, or is it a plain old static spacer image like we suggested in the article? Has anyone else seen this kind of alert in their AutoPreview before?
Playgrounds
wrote on December 14, 2006 12:01 AM
Well, as you can see on the link I sent, itīs the mail from CampaignMonitor and I tested it myself as well - without any hyperlinks around the img at all!?
Could it be Outlook settings somewhere?
Stewart
wrote on December 14, 2006 9:37 PM
So I' m just doing the work's Christmas mail and I've opted to use this spanky little technique but in deares Outlook Express 2003 after the alt text there's this "" What's that all about then?
Stewart
wrote on December 14, 2006 9:49 PM
oops. re my last comment, there's and end tag after the alt tag rather than two quotation marks, didn't realise it would be stripped...
Playgrounds
wrote on December 15, 2006 12:48 PM
Hmm, seems there's still a little bit of testing to do here...Haven't come across the end tag issue so far, but I still can't manage to get rid of the "HYPERLINK" text in AutoPreview (Outlook 2003).
If I'll make any progress, I'll post it here.
Connie
wrote on January 3, 2007 10:52 AM
This technique sounds lovely, but I keep thinking that 1x1 pixel spacers might alert some SPAM filters. Does anyone know if that's a concern?
Playgrounds
wrote on January 3, 2007 8:12 PM
Hi Connie - instead of using a specific "spacer.gif" (with the filename spacer.gif), replace it with a gif called "explanation.gif" for instance. At least that should slightly reduce the chances of going into SPAM.
Also, remember that open rates are usually tracked using this very method, by placing an invisible gif inside the e-mail. Once the gif is downloaded it counts as 1 open rate.
:) P.s. Still no news on the Outlook issue from my previous post.
dotdot
wrote on March 7, 2007 12:56 PM
The text of my email of outlook 2003 became ????, not sure what happened. I can read them before, but now with all the ??? I can not read them anymore
The text is chinese charaters
cmeqfzsat lmjbnxz
wrote on September 19, 2007 10:50 PM
xcpesgfmt wnkr qcbphznfm gtljf xgwtlscp tsnzaxhm gjzblnf
jyuovwi odri
wrote on September 19, 2007 10:51 PM
lkfdsm jbhv ozbysfnl dsargb baczpyd kegxi byoakc http://www.ojukbe.uvexqhn.com
Samantha
wrote on June 5, 2008 1:13 AM
If i place this spacer gif in the auto preview pane, when the email is viewed in the Outlook 03 or 07 Auto preview, will that count as an "open" or do i still need to have the email clicked and opened to tell my server that the email was opened?
Thanks!
Samantha
wrote on June 6, 2008 1:53 AM
I also get the image link that Playgrounds has referred, yet there was no follow up. Has anyone found a fixx for this?
Got anything to add?