Subscribe via RSS FeedMake Email Look Good In Gmail - 8 Design Tips for Images-Off
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.
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.
Make sure the link is easy to find. Comp-U-Plus does a nice job:
Anthropologie’s link is hard to miss, but also hard to read:
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.
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.
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.
Unfortunately, GAP only went half-way. It displays the coupon code, but not the discount or the items it applies to.
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:
Gmail:
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.
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.
Best Buy’s “Product 1, 2, 3″ etc. is not helpful:
5. Avoid colors that will camouflage hyperlinks.
Can you spot the blue link in this email from Abercrombie and Fitch?
Williams-Sonoma’s not as bad, but the call to action “See all of our newest items” is very hard to read:
Better:
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.
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:
Internet Explorer:
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:
Like This Article?
|
Get New Posts Delivered to You
|
Add to del.icio.us
Sphinn It!
Stumble It
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…
Hi Tomer, great tip about the preview pane.
And you’re right, most clients load images, and Gmail doesn’t for some reason.
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.
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.
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.
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/
Thanks for the links, Burak. Very helpful for our readers!
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
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.
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!
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?
Thanks Alex :)
Nathan, I don’t know. Maybe drop TravelManitoba an email suggestion? (With or without images, LOL).
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.
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!
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.
cool
I have a way of getting Gmail to display ANY images without turning on images or having the receiver do a thing. ;-)
You do not know how much time you saved me by having this post. Email Templates will now be a breeze.
Thanks again
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.