The Rarest and Coolest Defensive Design Tactic: Email Pixel Art

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. Adding a background color to a table cell creates banners, content blocks, and is essential to making bulletproof buttons.

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 a mosaic out of a series of nested tables with background colors applied to the table cells. You then slice up the image so that each slice fits perfectly into the table cells of your mosaic. That way, when the overlaying image is blocked and disappears, the underlying mosaic of colored table cells appears.

>> Read the full post on the Litmus blog