Gmail inbox tricks and alt text traps

Gmail displays more than just the sender and subject in the user's inbox. You also get a snippet of text from the email's body appended to the subject line.

Smart marketers exploit that knowledge to encourage people to open the email. But manipulating the displayed snippet can also backfire.

Here's the story...

First, a screenshot of my Gmail inbox:



The appended text shows up in gray to the right of the bolded subject lines. You'll note none of the senders chose to optimize for Gmail users.

Gmail appends the first bit of text it comes across in the email, which usually means:

1. Blurb about viewing the email online, or...
2. The salutation that often graces the start of the email's copy, or...
3. The first headline in the email (commonly a copy of the subject line)

Those bits of text are in the email for good reason (probably), but they do little to encourage a Gmail user to investigate the email further.

If you want custom snippet text to appear, then there are two common approaches...

1. Text preheader

You can place the text you want Google to pick up at the top of your email. Like this:



Indeed, many people choose to use this preheader space for a call to action or little teaser anyway. The text's appearance in the Gmail inbox is just a bonus.

Others, however, prefer to leave that space free of clutter and use it for an image, or to point people to functional links like the web version, the forward-to-a-friend feature, etc.

Which brings us to the alternative approach...

2. Alt attribute text

Gmail doesn't just pick up free-standing text, it also reads the text in the alt attribute listed in your image code:

<img src="http://acmesite.com/EFGR.jpg alt="click here for coupon">

You can exploit that by putting a transparent 1x1 pixel image at the very top of your email and giving it the alt text you want Gmail to display.

When the image is downloaded by the recipient, it's effectively invisible. So this code...



...looks like this in Gmail:



(The pixel is invisible but the "Boost your clickthrough rate by 25%..." alt text will show up in the inbox as the appended snippet of text.)

OK, I see a hand going up at the back there. Yes?

"What about when images are blocked?"

Good question, and one which users of this technique often forget about. A tiny, invisible image is not quite so tiny and invisible when images are blocked by the recipient's email client or webmail interface.

Trap 1: Undefined image size

If you forget to define the size of the 1x1 image using height and width attributes, this is what happens in Gmail:



The blocked image expands to fit in the alt attribute text, which can play havoc with your layout.

Yahoo! Mail does this as well and Outlook 2003 creates this mess:



So, first warning: define the height and width of your snippet pixel.

Trap 2: Defined image size

If the height and width is defined as 1, then the image effectively remains invisible, even when Gmail blocks an image:



But we're not finished yet.

If you're sending out all your emails coded like this, there are some clients that aren't so friendly as Gmail.

For example, even if the height and width is defined, Thunderbird will still expand the size of the blocked image to fit in all the alt text you used:



So if you're going the invisible pixel route, run some design tests just to make sure you don't mess up your layout if images are blocked.

Related posts:
Alt attributes and image suppression in email

More on email design and copywriting | Tags: email marketing, gmail, image blocking

Sign-up for the Email Marketing Reports NEWSLETTER
Twice a month, free, packed with email marketing advice and all the posts from this blog.

Email:      First Name:     
    More info and sample

 feed | email | Follow me on Twitter

The main website for everything email marketing
Email marketing search engine | Introduction
Email advertising basics | Service listings | Sources of statistics
Advice on email design, delivery issues and list building

Top email marketing info sources for 2009
Outlook 2007 and HTML design
42 HTML email design resources

follow me on Twitter