Blog

How to Increase Email Conversion Rates Before Images Load

BFM-Blog-Images-2012_sept_14

The other day I sat down to my computer, pulled up my Gmail inbox, and opened my most recent message - a sale notification from an online retailer I recently purchased from. This is what I saw:

problems viewing email

Do you see that? Exactly! There is nothing to see here folks. I quickly moved along to the next message, not wanting to waste any more time than necessary going through my email.

The extremely limited attention span of email recipients requires email marketers to take extra measures when it comes to grabbing user focus. In the example above, Gmail disabled the email’s images by default, rendering them completely blank until I manually enable the images. Considering the fast paced nature of email browsing and the previously mentioned limited attention span of email recipients, it isn’t likely that many users are going to stick around to manually enabling images.

However, I was not the only recipient who saw a blank screen upon opening the email. The following chart from Campaign Monitor shows the vast majority of primary email services like Gmail, Yahoo, Outlook, and Hotmail all disable images by default when first opened:

email client chart

 

So what’s an email marketer to do?

When it comes to quickly grabbing the attention of recipients, one of the most effective measures email marketers can take is to optimize the email’s pre-image display. By improving messaging and appearance prior to image rendering, marketers can greatly increase click and conversion rates.  Some steps email marketers can take to optimize for pre-image display include:

Avoid single image designs

In this email from a local NYC concert venue, we see an email that consists of a single image. Without images rendered and any HTML text provided, this leaves us with a large, blank space with very little to see.

 

unresponsive images

However, by including HTML text as well as images in an email, marketers can improve how the email is initially displayed. Here is an example of a Blue Fountain Media email that balances text and images well.

This email, which highlights some recent portfolio work, incorporates a good proportion of HTML text that conveys the vast majority of the email’s message without images being displayed.

html text images

Create distinct calls to action with background text

One pre-image optimization technique I frequently come across is the idea of creating a call to action button by simply applying alt text and a background color to an image of a button. An email I recently received from the music streaming service Spotify illustrates this technique to create a "Follow the Tour" button:

spotify prerender email

By providing a strong substitute for your button images, you can increase clicks on your calls to action prior to image rendering.

 Create helpful table structure

While it is unfortunate that email must be reduced to being developed in table structure, email marketers can make the most of this scenario by creating clear, helpful tables without the use of images.  One example of effective table usage is a calendar of events I received recently via email. This calendar clearly outlines a month’s worth of events in an intuitive manner before any images were displayed.

knitting factory calendar

 Create over-the-top table structure

While certainly time consuming, a recent example from a Gamestop email shows how slicing your large images into carefully assembled <TD>’s with background colors applied can paint a similar portrayal of the actual image. As you can see in this example, the image slices with red background colors convey the 50% off offer before the images are rendered.

gamestop table structure

These are just a few optimization techniques marketers should keep in mind when preparing their email marketing campaigns. Email marketers should always remember to:

  • Balance text and image use
  • Always provide descriptive and helpful alt text
  • Create well structured tables
  • Provide click-enticing substitutes for your calls to action

What do you think? Do you have some tips for email marketers to help improve click and conversion rates? Let us know below or send me a message @tsprewett

How to Reach the Inbox Whitepaper

Categories:

Share this post

Comments on this post

  1. Anyone know if the email aggregators like iContact work for an average guy like myself. I am trying to find a way to keep in touch with my customers

Comment on this post

*
*

Ready to discuss your project? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052