Make 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: