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.

Become a Better Email Marketer

Subscribe to This Blog by Email
Why Subscribe?

30 Comments

  1. Hi Marc,

    Great tip here.

    Just a question. Does gmail have the same problem for text emails?

    4/17/2008 8:38 am
  2. A very useful tip.
    Thanks.

    I personally switched to the Seamonkey Email Client (the successor of the Mozilla Suite) just recently and found out quickly that it does label most Emails from Internet Marketers via AWeber as ‘Possible SCAM’.

    Why?

    It does it, when using HTML, specifying a URL as link text AND when using click tracking at the same time. Simply because the displayed URL (e.g. example.com) does not match the target URL in such case (e.g. aweber.com/r?HYUJD65rFGHT)

    Good to know, isn’t it.

    Other mail clients AND spam filters might work on a similar detection mechanism.

    4/17/2008 8:59 am
  3. John,

    Definitely good to know.

    Showing readers one URL and sending them to another is a sure way to make your email look like a phishing attack. That’s why we recommend linking text or images in your HTML emails rather than typing out URLs.

    4/17/2008 9:31 am | Follow me on Twitter
  4. John, I don’t understand the issue. (I don’t use AWeber yet, so I am sure that has something to do with it.)

    If you’re saying that your HTML emails are going out with a visible link such as:

    http://www.mywebsite.com

    but underneath the URL is really:

    http://www.anyotherdomain.com

    then yes, I agree that this is an issue, because the URL that is visible to someone in the text is not the same as the URL that is underneath. (Like seeing http://www.citibank.com and hovering only to see http://www.stealyourcredit.ru.)

    However, I would think (and this is where I could be wrong) that the AWeber tracking links are no different whether you’re hovering or reading.

    Having said that, I’m not sure why you would use a URL in your HTML tracking links that is different from the actual URL. Wouldn’t you rather just use text with a call to action so that your link says "Get the details" or "Find out more today" or something like that?

    I think using actual words for your links (with the URLs underneath) does not cause the same problem as what I think you’re describing.

    4/17/2008 9:31 am
  5. Martin Lee,

    For plain-text email messages, whatever you have at the top — as the first several words in your message – is what will appear in the "preview" section.

    If you’re sending plain-text, you may want to put some kind of "sub headline" to your subject there to help to boost opens.

    I should point out also that this is a good idea for HTML senders, as well. The reason I used the ALT="" text for an invisible image instead was I didn’t want to change the appearance of the layout I was already using by putting text at the top (which would look funny in my case).

    4/17/2008 9:47 am
  6. Marc,

    This is absolutely brilliant. I’ve noticed the issue in GMail before, and while I’ve thought about changing the alt text, I had not even dreamed of using a transparent image and loading up the text with something useful.

    This blog entry is worth the price of admission. In fact, it’s worth double the price of admission. [Wait a minute... did I pay to get here?]

    Thanks!

    4/17/2008 1:42 pm
  7. I also must say that I do not understand. Is this something to do with Aweber or GMail?

    4/17/2008 2:01 pm
  8. Miroslav,

    This has to do how email messages, whether from AWeber or any other service, appear in Gmail. The article gives some information on how to get worthwhile text into the preview section of a message, even if a graphical template is used that would be difficult to modify otherwise.

    4/17/2008 2:09 pm
  9. When I design ezine templates for clients I always start the email with text using this format: [Name of Ezine] {ezine tagline} [Volume and Issue Number] [ISSN], as in "Rev. Deb’s Joy Journal" biweekly e-newsletter. March 14, 2008 – Vol. 1 No. 4 – ISSN 1916-422X".

    Admittedly, not very enticing, but that’s why we have subject lines for, right?

    I’d be hesitant to include another "headline" which would ONLY display in the preview – what’s going to happen when a subscriber clicks on the email to open it and then doesn’t see the "hidden" headline? If you repeat the same headline in the "hidden form" and again in the visible, wouldn’t that trigger spam filters?

    As with anything in this business, we can at least split-test it and see if there’s any difference. However, using Aweber, we’d have to separate the Gmail subscribers into a separate send/or list to see the difference, since you guys don’t show us which subscribers (by their email address) opened.

    4/17/2008 4:07 pm
  10. I’m 99.999% convinced that text-based email is the way to go, and not html, and this is one more reason. If you want someone to see your "pretty html" then put a teaser in a text email that sends them to a page on your website. You can track visitors and source via your analytics. I and others I know – even very internet savvy people – just delete html-based emails. I test all my Awebered blog posts, email blasts, etc. to my gmail account and never have any issue with how it views. Just my 2 cents…

    4/17/2008 5:33 pm
  11. I understand the last comment, but I think what we’re saying is, we have an image, which has an interesting pulling header. They open based on that. They see,[Name of Ezine] {ezine tagline} [Volume and Issue Number] [ISSN], then they see the head line if you have to use one. Then you could pull it all together with a first line of body copy to match the "pulling" header that was visable only at the start.

    Also, you can obviously vary your HTML and Plain Text body copy if you wish, or run Plain Text sends with a totally different header.

    Does that make sense?

    I’m a new aweber user, still getting to grips with things.

    4/17/2008 5:38 pm
  12. Joshua U

    Interesting idea.

    I thought this technique would create spam issues? Perhaps those damn spamhauses have me too scared…

    4/17/2008 9:53 pm
  13. E-mail response is not a problem I am having in Setup.
    It is a continual system failure which is causing a loss , time wastage and uneccessary chaos and recommunication.

    4/18/2008 3:51 am
  14. John,

    I’ve never had Aweber crash on me – maybe because I’m using a Mac ;-)

    As for my technique, it would be easier to show you what I mean, then tell you. Tale a look at this online version of my client’s ezine:

    http://joyminister.com/ezine_archive/

    4/18/2008 8:43 am
  15. Boris:

    Split testing is usually a great idea, and a good habit to get into. Besides the individual snippets of knowledge you learn about the behavior of your subscribers, through the process you get to know them better as a whole. … always a good thing.

    Neil:

    Welcome aboard, and thanks for contributing to the discussion. That makes sense, and I tend to agree. I think of this "preview" more as an extension of the subject than something that would be expected to appear in the content of the message – sort of like some search engines will pull a page’s description from meta tags.

    Joshua:

    I’m not aware of any SPAM issues this would create. Many senders use 1×1 pixel invisible images for things like opens tracking, with no reported issues.

    John:

    I’m afraid I’m not sure of what you mean. I’ve emailed you privately to get some more information about whether you’re an AWeber user and what specific problems you’re having. I hope we can help you out.

    4/18/2008 9:08 am
  16. anyone can push a spam button at anytime, with just a click.and you are left holding the bag,even if it is not true.

    4/21/2008 1:38 am
  17. This is mind bogglingly complex for me. Is there a primer for learning about the way email marketing is handled by Gmail and other ISPs?

    4/21/2008 9:08 am
  18. Hey, great tip here!

    I hadn’t thought about it much, but I do test to my primary account. I will get a gmail account to test to since I didn’t realize it might be so different… especially now that I have switched to an HTML format for the updates.

    Hmmm. So much to learn, but you guys are great with the tips.

    PS: Hey, let me return the favor. Have folks who don’t know how to add an AWeber web form to their WordPress blog? I created a video showing how to create the list, add the web form and add it to WordPress. My gift to you for all your help…

    http://www.videos.bycenay.com/category/blogging/

    4/24/2008 4:13 pm
  19. Hi Cenay,

    I’ll check your WP video as I am in the process of putting a WP blog together for a client who is using Aweber – perfect timing :-)

    Back to the original thread: you may be in for a big surprise when you see how your HTML email looks like in Gmail – it is notorious for very poor support for HTML-formatted emails.

    You do also check your email campaigns in AOL, AIM, Yahoo, MSN, and other web mail readers? And Mac OSX Mail, Eudora, Thunderbird, Outlook and other Mac- and PC-based email readers? It’s a must.

    4/25/2008 10:27 am
  20. The inbox view for my Gmail does not show this text. Is that a setting somewhere in Gmail?

    8/2/2008 5:14 pm
  21. Ryan,

    It’s possible you may have turned off those "snippets" in your Gmail settings. I believe they are on by default for Gmail users.

    8/4/2008 10:35 am | Follow me on Twitter
  22. So be it. Found the toggle switch, I have.

    Yet another worthy accolade with AWeber is your Gmail Tech Support :)

    Thanks, Justin.

    8/4/2008 11:13 am
  23. Instead of using a small image why not use the ALT text on your logo? I mean instead of saying "Aweber Logo" you can have the ‘teaser’ text there instead.

    1/14/2009 8:13 pm
  24. Liliya

    Hi,
    first I want to apologize myself if the answer of my question can be found above.

    I have to send mass mail with html. But when I made some tests I found some problems in visualization. The most important of them was that some content was missing. This problem occurs only with gmail!

    10/30/2009 4:56 am
  25. is this alt tag tip still efficient these days? your article is from some years ago.

    thanks

    7/22/2010 5:59 pm
  26. Virginia,

    It still works.

    There are also other ways to achieve the same effect using HTML text if you prefer not to use an image. Here’s a simple example (assuming that your email has a white background):

    <span style="color:#fff;">Your Text Here</span>

    7/23/2010 8:24 am | Follow me on Twitter
  27. Thanks for this tip! I have implemented it on our emails!

    One thing I added that other folks may find helpful as well: I always load emails without images first, since many users do so as well… In Gmail, the full alt text of the 1×1 pixel will display when the images are not loaded. To avoid users from seeing that text, I added a style tag to my 1×1 image: <img style="color: #FFFFFF; font-size: 6px;"> This will essentially hide your alt text even with images off. Just make the color the same as your background color and the text small enough so it doesn’t noticeably push your other content down.

    8/25/2010 12:39 pm
  28. I’m an Aweber user and I’m wondering if you type your message in HTML AND in Text, which will Google show the subscriber by default?

    I want to make this easy because frankly, the idea of needing to take this extra step of creating a fake image every time I want to send an email.

    5/19/2011 12:19 pm
  29. I have just finished my testing for Gmail.

    E-mail showed totally different on Iphone, Android and PC/Mac. I was actually quite amazed when I saw how my e-mail looked like.

    For Android, I had to use the “Alt for the first image” approach.

    For Iphone and PC/Mac, it showed all the stupid alts and introductory text before the main text. I had to remove it, too.

    Be careful, test your e-mail on all devices!!!!

    8/18/2013 8:15 am