More and more hosted email providers– namely Yahoo Beta and Gmail– are turning off images by default. In advising one client on how best to handle the alt-text, that is the text that shows when an image is “turned-off” by the email server, I scanned two email inboxes and found ten examples that illustrate the various techniques being done out in the field. Covered are: Coit Liquor, Eddie Bauer, Red Envelope, Gap, Avis, Discovery, Peets‘, Macy’s, Fandango and Barnes & Noble. Also reviewed 2 weeks later, “10 Images- 2 Weeks Later.”
Tips: How to Design For Images-Off
- Use of non-image HTML techniques, such as colored background tables and colored text.
- Enticing, clever alt-tags that induce viewers to select “images on”
- Reducing the number of images above the fold
- Not relying on one large image for your email
- For tabbed headers and menu header, using tables and text instead of small images
Example 1: Coit Liquor: Spare but Effective
I know this small wine seller in my neighborhood of North Beach, San Francisco. They have a very loyal base and they’re using Constant Contact to manage their promotions and newsletters. This email is unique because they have totally avoided using images. I showed this to one client as a sample of of a totally safe email that will have no problem communicating to all of its subscribers. A sad reality, but effective.
2. Eddie Bauer: Consistently Good
What I like about this email is its mixed use of HTML text-only design and images. The background table colors and CSS on alt text all work with their overall design. Eddie Bauer has consistently stayed on top of good email design and changes in technology. For clients who think that their business is so dependent on images that they can’t imagine someone viewing an email with images off- Eddie does it quite well. They manage to hint at the style of their clothes in the palette, and use alt text sparingly and effectively. Notice their menu headers are not images, but gray text on white background table.
3. Peets: Great Mixed Use
The moment I got this email, I forwarded it onto a friend who had been talking with me about alt-text and usage. It’s spare, but with the right palette for their design, and it has the enticing alt-text “Web exclusive”. It makes you want to load images to see what the exclusive is. I also really like the yellow box with dark lettering below the main image. My one critique would be to scale the image smaller so that the yellow box is more predominant and above the fold.
7. Red Envelope: On a Journey
I wrote about them a while ago, in reviewing disastrous image-off designs. Well now they have alt-text, but this is a new problem they’ve created- an enticing clever subject line, that opens into amateurish formatting of text that is equally mysterious. This opened email should reveal something concrete. Also, too much reliance on images.
8. Avis: So-So
They do a good job of integrating non-image HTML in the overall design, but the spacer gifs (images used for layout only) seem to clutter up the message, which diminishes the offer and alt-text. This also could be a victim of too many offers in one promotional email.
9. Discovery: Somewhat OK
They got some of the techniques right: mixed use of images, and getting the offer out in large colored text. The problems? Their menu heads are needlessly in image formats. They alt-text irrelevant images. So they could do a good clean-up on their design and have a very effective email. Especially with Discovery photo content that begs to be downloaded, such as “Shark eating a man” or something enticing.
You wouldn’t write an email in all caps, so why would you put the alt text in all caps? Also proscribes to the image-heavy email, with very little in text, which is a flag for spam filters. The header/menu bar could be text and HTML tables.
Other Reading & Resources
“How ALT Text Renders in Popular Email Clients,” by Bill McCLoskey. I’ve been forwarding this around all day as it shows very clearly the rendering of images-off emails in different browsers.
MailChimp, “HTML Email Coding Mistakes” Great overview of design for email.
Vitamin Features: Taming the HTML Beast refers specifically, as I do here, to what emails look like with images-off.
Campaign Monitor Blog: “Testing Your Email With Images Off”- another post on how this is important to test before launching.
Derek Harding on ClickZ, wrote “When Email Images Don’t Load”, Derek talks about the rise of images-off handling and the impact it has on email marketing.