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="https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/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. Gmail snippets before and after

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.

Outlook AutoPreview before and after

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.

  • Kieran

    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

    Good call Keiran, I’ll check that out and let you know the result.

  • Dave Ditges

    Very nice! This will definitely be implemented in our next email.

  • Brendan Vaughn

    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

    Perhaps that could be remedied by using that alt text in a spacer image before the first graphic?

  • Dave Greiner

    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

    Seems to me the line break is at the 76 char word wrap position, taking ‘

  • bryan

    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

    Can you add a non-breaking space character (&nbsp;) in between the words to force the words to stay on one line?

  • James

    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

    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

    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

    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

    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

    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

    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

    This technique sounds lovely, but I keep thinking that 1×1 pixel spacers might alert some SPAM filters. Does anyone know if that’s a concern?

  • Playgrounds

    Hi Connie – instead of using a specific “https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/spacer.gif” (with the filename https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/spacer.gif), replace it with a gif called “https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/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

    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

  • Samantha

    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

    I also get the image link that Playgrounds has referred, yet there was no follow up. Has anyone found a fixx for this?

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free