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.

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.

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

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

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

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.

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.

How to Make Email Pixel Art

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:

Sketch out a minimum viable email pixel art image on graph paper or in your design software of choice.

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.

Using a series of tables nested inside a table, create the blocks in the positions that you need to accommodate your design.

To ensure that your sliced images fit together seamlessly, specify that cellpadding=“0”, cellspacing=“0”, and border=“0” are set for your tables.

Apply the needed bgcolor to each of your table cells.

Preview your email with images disabled to make sure it’s rendering as intended.

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 Litmus’ 2017 State of Email Creative report, which is based on a 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.

Tags:

Chad S. White is the Research Director at Litmus and the author of “Email Marketing Rules.” He has written thousands of posts and articles about email marketing trends and best practices, and his research and commentary have appeared in more than 100 publications, including The New York Times, The Wall Street Journal, and USA Today.