Select Page

Image blocking is common, with some email clients disabling images by default and some subscribers turning off images to save mobile data or for other reasons. Because of that, email marketers need to use defensive design techniques to ensure that their message is conveyed when images are disabled.

Defensive design consists of three key tactics:

  1. Using HTML or live text as much as feasibly possible, instead of embedding all of your text into your images
  2. Adding ALT text to your images—or better yet, styled ALT text
  3. Using background colors on table cells

Let’s focus on that last tactic.

One of the big things that happens when images are blocked is that your email loses its structure. The email flattens out and everything starts blurring together. Using HTML text and styling the size and color of your ALT text can help create structure and hierarchy, but background colors are even more powerful.

Adding a background color to a table cell creates banners, content blocks, and is essential to making bulletproof buttons. This Twitter email demonstrates how background colors on table cells can maintain the integrity of an email design when images are blocked.

Defensive design in Twitter email

That’s great, but background-colored table cells can do more—much more. In addition to being used along with HTML text to create email content that is unaffected by having images blocked, table cell background colors can be used as a fallback for images.

You do this by creating an email mosaic out of table cells and placing it behind an image. When the overlaying image is blocked and disappears, then the underlying mosaic appears.

Examples of Email Pixel Art

To demonstrate the power of email mosaics, here are a few examples, each showing the email with images enabled on the left and images disabled on the right:

Mothercare creates pixel art of their stroller in this email, which also makes liberal use of styled ALT text throughout.

email pixel art in Mothercare email

Pizza Express uses pixel art in this triggered birthday email, which also includes a personalized image and corresponding personalized styled ALT text.

email pixel art in Pizza Express email

PlayStation New Zealand uses an email mosaic to create the symbol of the Autobots, cleverly playing off of Transformers’ “robots in disguise” slogan.

email pixel art in Sony PlayStation New Zealand email

Benton Lingerie captures the sentiment of the message of Mother’s Day email, using email pixel art to create a large pink heart.

email pixel art in Bendon Lingerie email

Design & Strategic Considerations

Before creating an email mosaic, consider the following design and strategy issues:

1. Email pixel art can get heavy, which can result in your email being clipped in Gmail if the email exceeds 102kb. So keep your things simple, focusing on a minimum viable pixel art image.

For instance, Benton Lingerie’s pixelated heart could have been way more contoured with the doubling or tripling of the number of table cells. But their execution is very clearly a heart and so is plenty effective as is.

2. Email pixel art can be a lot of extra work, so it’s generally best to reserve them for high-volume or high-impact emails. That means perhaps using them for key broadcast emails for new product announcements, Cyber Monday campaigns, and similar big events. But it also means considering them for high-volume triggered emails, such as the Pizza Express birthday email above.

Similarly, you might consider them for high-volume email elements, such as your logo or a footer element. Whichever approach you choose, you want to be sure to get reap the impact of your extra design effort.

3. Email pixel art isn’t always compatible with responsive design. Depending on how you code your responsive email, email mosaics may not translate from desktop version to mobile version. Hiding and stacking email content in your mobile version may break your email pixel art. Be sure to consider this when designing your email mosaic.

4. Email pixel art doesn’t have to try to replace the blocked images. As we saw in the PlayStation and Benton Lingerie examples, the email pixel art can be totally different from the images in the email. Don’t feel like you always have to create the 8-bit version of your hero image. Sometimes conveying the spirit of an image is just as effective—and may be easier to code and lighter.

5. Some emails are more likely to have images blocked. The possibility of having the images in an email blocked is not uniform. The chance of image blocking is higher at both the very beginning of an email relationship and toward the very end.

For the very first emails you send a subscriber, they may have images blocked for unfamiliar senders. That means that you may want to devote more effort to defensive design for your welcome email(s) and for your transactional emails.

For emails that come late in a relationship—that is, after a considerable period of inactivity—images may be blocked because they’re in the subscriber’s spam folder. That means that you may want to put extra defensive design effort into your reengagement emails and re-permission emails.

In both cases, that extra effort may include email pixel art, in addition to the liberal use of HTML text and styled ALT text.

How to Make Email Pixel Art

With those considerations in mind, what’s the best way to create email pixel art?

To get started, we recommend:

However, you may not find those helpful in all instances. More often than not, we expect that you’ll want to build your email pixel art manually.

If that’s the route you go, here are the main steps you’ll need to take:

  1. Sketch out a minimum viable email pixel art image on graph paper or in your design software of choice.
  2. Use the slice tool in Photoshop or other design software to divide your image into the necessary block sizes to create your email mosaic and save those out as separate images. Use a file naming convention that makes it easy to puzzle your overall image back together.
  3. Using a series of tables nested inside a table, create the blocks in the positions that you need to accommodate your design.
  4. To ensure that your sliced images fit together seamlessly, specify that cellpadding=“0”, cellspacing=“0”, and border=“0” are set for your tables.
  5. Apply the needed bgcolor to each of your table cells.
  6. Preview your email with images disabled to make sure it’s rendering as intended.

Here’s a great example of email pixel art from Action Rocket’s EmailWeekly newsletter. Select “Toggle Images” in the Litmus Builder interface to view the email with images off.

A Rare and Unexpected Tactic

Email marketers understand the need to design for images off. We know that because more than 83% of brands use ALT text for their email images always or often, according to our 2017 State of Email Survey of more than 3,500 marketers.

However, while adding ALT text is pretty simple, creating email pixel art is anything but. As a result, nearly 82% of brands never use email mosaics.

For intrepid brands, that’s an opportunity. The rarity of this tactic means that it’s an effective way to surprise and delight subscribers by delivering the unexpected.

css-inlining.png

Optimize for Image Blocking

Litmus Builder allows you to easily code emails and preview them in 70+ email apps and devices. Toggle images on and off with a single click to perfect your email pixel art.

Build great emails →

 

The post Email Pixel Art: The Rarest and Coolest Defensive Design Tactic appeared first on Litmus Software, Inc..