Make Email Look Good In Gmail – 8 Design Tips for Images-Off

Gmail ImagesGmail is a popular email service, and chances are your opt-in subscriber list has more than a handful of these accounts on it. Did you know that Gmail disables images in HTML emails by default, even if your customer has added you to his or her safe list? Email recipients have the option of turning images on in Gmail, but many won’t because they haven’t noticed you can, or are simply too lazy.

Likewise, many email designers and marketers could improve their emails so they render nicely even with images blocked, but they’re too lazy. Or they never noticed there was a problem.

Well now you have no excuse. This post will show you what typical emails look like in Gmail – the good, the bad and the ugly. Plus, 8 tips for optimizing emails when images are turned off.

1. Provide a link to a web-based version of your email near the top of your message.

This is the simplest way to salvage a skeleton email. Unfortunately, Delia’s has no link – the email recipient must find Gmail’s link in the green area to see the offer.

Delia’s Email Images Off

Make sure the link is easy to find. Comp-U-Plus does a nice job:

Compuplus Email Link

Anthropologie’s link is hard to miss, but also hard to read:

Invisible text

Providing the link again at the bottom of the email is even better usability, as readers may have scanned your email to the bottom, are interested, and can view the images without scrolling back and looking for your link.

Link at Bottom of Email

2. Make sure your link works and your web-version displays properly.

Diesel Cult makes its link nice and clear. Too bad the landing page was completely clear.

Diesel Cult Email

3. Use alternate text for important images.

This is especially important for headlines, special offers and other calls to action. Circuit City adds alternate text to the most important CTAs, and leaves blank images that are not so important. This is a great idea, it’s less cluttered and readers will be drawn right to the offers.

Circuit City CTA’s

Unfortunately, GAP only went half-way. It displays the coupon code, but not the discount or the items it applies to.

Gap Email Images Off

Gap Email Images On

Email designs that include body copy are not necessarily better, but have the advantage that you can get your message across with images off. It’s a good idea to include your offers in body text, because believe it or not, some email programs are worse than Gmail. Here’s a screenshot from the popular open-source email client Squirrel Mail that is used by many web hosts and webmasters.

Squirrel Mail:

SquirrelMail example

Gmail:

Linens N Things Email Images Off

Images On:

Linens N Things Email Images On

Even if the alt text is blocked, the reader could get the gist of the email if the 20% off deal was included with the text of the email.

Blue Nile is a fantastic example of a completely usable email with or without images on.

Blue Nile Email Images On

Blue Nile Email Images Off

4. Include specific product names and prices where appropriate.

Comp-U-Plus shows list price, the Comp-U-Plus price and the email special price alongside the product name. The product links are long and messy, but you get the idea. Enticing readers with the value of the offer is important for gaining that click through to the site.

Comp-U-Plus Example

Best Buy’s “Product 1, 2, 3″ etc. is not helpful:

Best Buy Products

5. Avoid colors that will camouflage hyperlinks.

Can you spot the blue link in this email from Abercrombie and Fitch?

Abercrombie’s Invisible Link

Williams-Sonoma’s not as bad, but the call to action “See all of our newest items” is very hard to read:

Williams Sonoma Email Images Off

Better:

Better Williams Sonoma example

6. Place your best offers above the fold. As website visitors scan content looking for “trigger” keywords, so do email recipients. Often large images push the offers and calls to action down.

REI Email Images On

REI Email Images Off

This is not a hard rule, just a guideline. While it’s true that a lot of people don’t scroll, if someone’s interested in your offers they will. But putting your best perks gives you a better shot at capturing interest with images off.

7. Test designs in different browsers.

Emails can look great in IE, and horrid in Firefox, and vice versa. Here’s an example of the same Comp-U-Plus email in 2 different browsers:

Firefox:

Compuplus Firefox

Internet Explorer:

Compuplus Email Images Off

8. Send out test emails to test accounts from a number of different email services before you blast to your entire list.

Did I miss anything? Let us know in the comments.

**Update: Delia’s next email showed much improvement:

New Delia’s Email


Related Articles

41 Responses to “Make Email Look Good In Gmail – 8 Design Tips for Images-Off”

  1. Tomer says:

    I think most email clients [not Gmail] load images from saved email address. So you should always write at the top of your emails: “Please add newsletter@mycompany.com to your saved email address” to make sure your emails make it through.

    Also it’s important to test emails in all the different email clients. Many of them have preview panes, so make sure your email looks “OK” there, cause many people won’t even open it all the way, just glance from the preview area…

  2. Hi Tomer, great tip about the preview pane.

    And you’re right, most clients load images, and Gmail doesn’t for some reason.

  3. Kristen says:

    Great tips and the illustrations were really helpful. I included a link to the hosted version of our email for the first time last month, and it got a lot of hits and sent a good deal of traffic to our site.

  4. Chris says:

    Also, in addition to the preview pane comment from Tomer – be sure to view the preview pane in various ways including left side, bottom, strtch it out, close it up, etc. – endusers customize in lots of different ways.

    Also, as an FYI, Outlook 2007 no longer uses the HTML rendering capabilities of Internet Explorer, rather uses MS Word’s “HTML” engine. Be sure to grab a copy and test your email there – I guarantee you’ll need to make adjustments.

  5. Michael Schur says:

    The most striking aspect of these samples is how many of them rely on images for elements that would render perfectly in HTML. The Gap navigation bar, for example, uses simple text on a grey background… rendering it in HTML would completely eliminate image blocking as a variable for that particular message element.

  6. Thank you Linda for this great article. I always learn lots of things from you.

    Email marketing is so important that sometimes you get most of your visitors from your periodical newsletters.

    One of the most important things is not to use images if it can be handled with HTML, as Michael stated above. There are lots of companies that rely on images on their emailings. I think coding old-school HTML (with tables) will eliminate lots of errors too.

    Here are some links;

    A Guide to CSS Support in Email
    http://www.campaignmonitor.com/blog/archives/2006/03/a_guide_to_css_1.html

    How to Code HTML Email Newsletters
    http://www.sitepoint.com/article/code-html-email-newsletters

    Free HTML Email Templates
    http://www.mailchimp.com/resources/templates/

  7. Thanks for the links, Burak. Very helpful for our readers!

  8. Anna says:

    Great clear explanation of techniques. I’m going to write a follow-on to a series I wrote a few months ago- 10 emails with images off- and I’ll link back to here!

    http://www.banane.com/workblog/?p=32

  9. Hi Anna, sounds good!

    Just an update to our readers, not sure if this is a result of this post (LOL), but I noticed that Delia’s next email message was better optimized for images off. If I can still find it I’ll post that as a follow-up in this post.

  10. Alex says:

    Amazing article – very through, with practical examples on what to do – and what not to do when it comes to making emails usable. Thank you for writing it, and posting screenshots!

  11. Nathan says:

    I have a question about an email that looks like HTML (photos, structure), but when it arrives nothing needs to be clicked to view the images. The newsletter was through http://www.travelmanitoba.com.

    How do they get this effect? I notice that when right click to save an image in Outlook it comes up with something like “!cid_image001.jpg@01C8803C[1]” rather than a the regular “header.jpg”.

    If this is possible, why doesn’t everyone go this route?

  12. Thanks Alex :)

    Nathan, I don’t know. Maybe drop TravelManitoba an email suggestion? (With or without images, LOL).

  13. Nathan, I don’t know if it was an auto-generated email, but you can embed images in your emails. Try opening a simple web page (should be http://www.travelmanitoba.com) in Internet Explorer and navigate through File -> Send -> Page by Email. If you have Outlook installed (maybe other email clients will also work, I don’t know) you can see images embedded in your email.

    Because travelmanitoba.com is not specifically coded for “mailing”, there will of course be so much design errors, but you can still see images.

    So if IE can do this, why can’t we :) I was looking for a solution embedding images in email body, but can’t figure it out yet.

  14. Nathan says:

    Thanks for the explaination Burak. I sent myself an email generated from a website and it did exactly that. The images were visible without clicking anything.

    To clarify, the reason large companies (ie, professional newsletters) don’t use this method is because it’s not standards compliant? I am guessing there are errors in how it’s handled in the various email programs, while with HTML emails can be counted on to display properly no matter what – is that correct?

    BTW, I checked your website out, very nice work!

  15. Nathan, you are right about standards, but according to http://www.email-standards.org (a very big “thank you” goes to Jonathan Snook for bookmarking that site on his del.icio.us account and help me to discover it), there are really no standards on the market. As you can see from the tests, big companies like Google with Gmail, Apple with Apple .Mac, IBM with Lotus Notes and Microsoft with Outlook 2007 (no surprise!) fail tests.

    It’s really becoming very hard for developers to stick to standards. Those 4 big guys dominate the email market, but still do not support the standards. After browser wars, there is another war on the email market for a long time.

    After those results, I really started to think “Are standards really important if they are no use”. If no one will use those standards (or at least big companies), then why do we, the developers, still try to stick to those standards?

    Actually I know nothing could be done without standards and I’ve always been addicted to standards, but there may be a very thin line between “standards” and “demands”.

    PS: It’s very strange that Microsoft fully support important CSS functionality at Windows Live Mail and pass the tests, while decided to cut-off the same CSS functionality on Outlook 2007. I think I will never understand Microsoft.

  16. Gecko says:

    I have a way of getting Gmail to display ANY images without turning on images or having the receiver do a thing. ;-)

  17. You do not know how much time you saved me by having this post. Email Templates will now be a breeze.

    Thanks again

  18. I have HTML and images turned off in Outlook by default, for security reasons. It’s surprising how many retailers send emails with no “view online” link and no preview text. Our local science museum sends emails that are one large image with no text whatsoever, so there’s nothing to look at to decide whether I want to download the image, except the subject of the email. This is such a specialized area that finding a marketer who specializes in email marketing is critical.

  19. Veroncia says:

    Love the article! It should be in our help center. Thanks.

  20. Thanks for these. We’ve explored a few of these options, and found the alt tags and a “view online” link increased response and conversion rate by about 15%. Going to have to give our other strategies a look and see if we can implement any of the above. Thanks again for this breakdown! :)

  21. I like that you provide actionable tips, but I’m a little dissapointed that this mostly didn’t carry through on the title’s promise. Perhaps a do-over starting with how gmail differs from other clients, followed by really tailoring emails to gmail’s particularities would be better? Nothing personal!

  22. Hi Gab,

    I think the main difference of Gmail to many other clients is it disables images in HTML emails by default, even if your customer has added you to his or her safe list, as mentioned in the opening paragraph.

    So essentially, to make your email look good, (render properly) the Gmail user must enable the images. The point here was how to show content right away that would either entice the recipient to turn on the images, or to get the “gist” of the email without seeing the creative.

    To just “design for Gmail” as a client is more difficult because it also depends on screen resolution and browser etc.

    I’m open to reader comments on the matter, if anyone’s done their own testing, please share!

  23. Sohbet says:

    I’m open to reader comments on the matter, if anyone’s done their own testing, please share!
    whoow:)

  24. Theo says:

    Hi Linda

    I’m finding one specific Gmail problem with my email – regarding background color or images.

    Gmail in Firefox and Safari on Mac OSX does not appear to support or tags.

    Anyway around this?

    I’m looking into css but need some help if anyone knows a good solution.

    Thanks!

  25. Theo says:

    Hi Linda

    I’m finding one specific Gmail problem with my email – regarding background color or images.

    Gmail in Firefox and Safari on Mac OSX does not appear to support body bgcolor or body background tags.

    Anyway around this?

    I’m looking into css p style:backgound-color but need some help if anyone knows a good solution.

    Thanks!

  26. khalil says:

    I want to know how can i make an email and to know how can I change it’s password whatever I want

  27. hi ijust set up my emale

  28. Streak says:

    I found that in emails where I added buttons beside images (favicons) to link to pages of my website, IE placed a line break between the two. Also, there is evidently no line break character. Is there any way to prevent this?

  29. rowan says:

    There is a great problem in designing HTML emails in gmail as the offlines images cannot be copy-pasted directly.

  30. DoeHand says:

    I want to using some text on your post
    “Make Email Look Good In Gmail – 8 Design Tips for Images-Off” for my blog. Can I do for it?

  31. @Doehand, sorry we don’t allow reprints of Get Elastic content.

  32. 8 design tips do work, you can have a try, my gmail inbox looks more functional than every, hha

  33. parsa says:

    i love to have a email

  34. jymnwhk says:

    qD0MWJ qkdrfwxqaqkz, [url=http://tndbwmsofqfd.com/]tndbwmsofqfd[/url], [link=http://wzgdbzpjztzw.com/]wzgdbzpjztzw[/link], http://qtjwznscalxw.com/

  35. Miks says:

    amazing article i send the link to my client for which he started cancelling the project if image not displayed i wont take the project i forwarded your link and working fine

  36. nakliye says:

    Gmail is a popular email service, and chances are your opt-in subscriber list has more than a handful of these accounts on it. Did you know that Gmail disables images in HTML emails by default, even if your customer has added you to his or her safe list? Email recipients have the option of turning images on in Gmail, but many won’t because they haven’t noticed you can, or are simply too lazy

  37. Hurda says:

    I think type of site that is useful in sharing information and it is important to shar.Web proliferation of new developments in the field of design and entrepreneurial spirit of people who have very beautiful and pleasing to be professional

  38. Sanket Jain says:

    Hey Linda

    Great tips and the illustrations were very helpful.

    I would like to add about Image Mapping. Gmail doesn’t seem to support it. So if the creative team uses image mapping, the whole email becomes a big image and the recipient is not able to click on ANY of the links which leaves a customer dissatisfied and frustrated.

    This might lead to unsub requests or worst case Spam complaints.

    I know of many prominent senders in the retail sector who use image mapping all the time.

    What do you think?
    Sanket J

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS