Pixel art applied to email marketing

Category: Email Marketing Trends

When a user has blocked images in their email client, their experience is likely to be affected because the design does not always account for this option. It is the user who decides, but when creating the campaign, there are a couple of tricks to encourage them to unblock images. Thanks to the increasing attention to accessibility in email marketing, the most common approach is to include a notice in the ALT tag so they can see what they are missing.

Another possibility, and quite an experience in itself, is to use pixel art.

What is pixel art?

If a pixel is the smallest unit of an image, when used to create designs, it is called pixel art. Yes, all photographs are created by pixels, and their resolution, like that of the screen, is measured in this way, but this artistic expression uses images with basic lines and generally few colors.

We can find it in classic 8-bit video games, but it is also a style used by some creators to create what could be called a mosaic formed by small pieces. All are the same size, square, and only vary in color, but the sum of all those pixels is what allows perceiving the overall image.

 

Source: Email Uplers

 

Why use pixel art in email marketing?

The most obvious reason is that it is a way to bypass image blocking. This is important to ensure that all recipients can understand the message. If this fails because the design is disrupted, all metrics can be affected. Conversion will decrease, but also the unsubscribe rate: why would they want to continue receiving something they can't see properly?

Pixel art ensures a good user experience because it allows viewing the message differently for those with blocked images. Turning the email into something they want to receive is positive for both opens and clicks because they will have a better impression of the brand.

 

Source: Email Uplers

 

How to apply pixel art to email?

Bringing this type of artistic design to email is not about creating images in 8 bits and attaching them; it is a technique related to the programming of the campaign that takes advantage of the background color of an HTML table to create the pixels. Thus, it is necessary to slice the original photo or illustration into small pieces to insert them into that table.

• If the user does not have images blocked, they will see it complete like any other email (make sure neither the table nor its cells have borders).
• If not, they will see the background table with the cell colors defined to create pixel art.

 

Soruce: Litmus

 

The easiest way is to start with a campaign and look for alternatives for images that are adapted copies to pixel-based design. There are tools like Image to Table Converter to do this easily. This way, the experience will be fairly consistent between those who block images and those who don't, for example, in the header.

 

Soruce: Litmus

 

Another option is to think of a campaign explicitly for those people, with slightly different messages. In this case, think of them not as a copy but as an alternative to make them appealing. Each communication will be an opportunity to grab their attention and stand out from other brands that do not offer this type of experience.

 

Soruce: Litmus

 

Additionally, you can combine pixel art with ALT tags to create an alternative design when images are blocked. Just choose what you want to show, element by element; for example, instead of the buy button, display the text "Buy" underlined as an active link or, if product thumbnails are not visible, write the name or a clearer description.

 

Soruce: Litmus

 

One last technical note: make sure to preview and send test emails because pixel art can increase the message's weight, and it may be clipped in Gmail. Furthermore, although it works in all email clients, the result may fail on some mobile devices.

Do not miss anything from our blog and join our Telegram https://t.me/acrelianews

---

Related posts