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

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