Improve Your HTML Email for Gmail Subscribers

This has been bugging me for a while.

Before sending, I test our blog newsletters to Gmail, along with other popular clients (generally a smart thing to do).

By and large, the messages tend to look fine, outside of one detail that might seem minor to some but meaningful others who spend some time thinking about optimizing emails for best results.

Take a look at a few of the recent tests in my inbox and see if you notice what I’m seeing:

Gmail Search w/ Original Text

See what I mean? Here’s another view – what I see pop up from my task bar when I receive the tests:

Gmail Notifier View w/ Original Text

To subscribers, the frequency of “AWeber” and “AWeber Logo” could be trance inducing…at best. At worst, I fear it bores our Gmail viewers (who comprise 15.3% of our active list at the moment) and could suppress our open rates.

Why does that text appear there? Well, we use a template that includes a logo and a header image, both of which we use ALT text for (another good idea).

Meanwhile, Gmail displays whatever the first set number of characters appear in an email (alt text or otherwise) in this brief preview section of the inbox or Notifier app.

What Can We Do About It?

Get a free Gmail account for testing, if you don’t already have one, and send yourself tests of your messages. Do you see the same type of undesirable results?

Whether it’s ALT text or some other headline, it’s a good idea to replace it with something more enticing to subscribers to give them something worthwhile during that split second decision that makes them want to open the message rather than ignore or delete it.

You could tweak the layout of your template, or add some visible text at the very top of your message, but I did something else to avoid messing with the design or content of our messages.

Use an Invisible Image to Say Something Meaningful

In the free image manipulation software we use at our office, the GIMP, I created an image 1×1 pixel in size with a transparent background. Placed in an email, this image effectively goes unseen.

I then uploaded this file to our website and placed it in our blog broadcast template, just beneath the opening “body” tag, to make it the first thing Google “sees” to render in the email:

Transparent 1x1 image added

Remember how Gmail was pulling text from the ALT tags of our top placed images to my chagrin? Well, I found a way to use it to our advantage.

I simply added some ALT text to the image attribute that made more sense for the message I was sending out:

ALT text added

The result? Something much more appealing in the inbox and in the notifier. Check it out:

gmail message in Notifier, modified

You can take the same image I used and upload it to your website. Just add the following HTML just beneath the “body” tags like I did:

What Were the Results?

To be honest, I didn’t split test this before implementing. Why? My feeling was that it was one of those limited things worth implementing straight off the bat without testing, but I’m willing to bet it will help our opens given the number of Gmail subscribers we (and presumably you) have.

I hope it helps some of you to engage your Gmail subscribers better. I’m happy because, at very least, I can stop griping about the way it looks when I test.