Mobile email design (part 3 / pixel art)

 

PacMan pixel art email

14K pixel art Pacman email, view

 

 

Why I luv pixel art emails

 

Lite

The PacMan email above is only 14KB.

No images

Pixel art emails are viewable with images blocked, 67% of users block images by default (MarketingSherpa 2010).

Fun

They add visual interest without resorting to images.

Easy to mock up

The examples in this post were created using our image-HTML app (zip download PC only), which converts each pixel of an image into an HTML cell, read more about it here.

 

Quick demo showing how the image-HTML converter works

 

 

Two considerations

Gmail only supports ~100K of HTML, that’s why the pixel art footer below needs to be simplified, its too large.

 

Footer pixel art email

This footer exceeded Gmails~100K limit

 

Make sure your pixel art containers leave enough room for your text. One #Pixelartfail was my space invaders email which didn’t leave room for copy.

 

Space Invaders pixel art email

This space invaders email didn’t have room for copy

 

Space Invaders pixel art   / Space Invaders pixel art / Space Invaders pixel art

3 original .bmp images I used to create the space invaders email.

 

 

iPod email

 

iPod

Pixel art iPhone email, view

 

 

Santa email

 

Style Campaign holiday card

This was our first pixel art email sent back in Dec 09., view

 

The Santa email was sent out at 5.40pm (PST) Christmas Eve, 2009. The open rate was 38.5% and click through rate 37.9%. The number of people who read it on an iPhone was more than twice what our traditional template received the previous month.

Prior to the Santa email, I’d tested a Mobile Version link. Only a handful of people used it, so I assumed we had a tiny mobile audience, turns out we just hadn’t been sending them the right kind of template.

 

 

I’m not alone…

Dean Silvestri, of Atlas Projects, just wrote a post on the Lyris blog called, “No-Image Email Design Experiment”. Dean used a grid and worked manually, but you can use our app to take the pain out of the process.

 

imageless email

 

 “Since tables are the primary tool for HTML email layout, I decided to work with a grid of squares that could be combined and colored to break up the space and create visual interest.” - Dean Silvestri

 

I’m not trying to persuade you that pixel art is for every brand, but I hope some of you will try it out. Its lack of reliance on images and light file size makes it ideal for the iPhone and PC alike.

 

 

Converting logos into HTML

Most people are using our image-HTML app to convert their logos. Furniture and home accessories retailer, Lombok, ran an a/b test on their logo:

 

“I just got the return path renders back and it’s working in all clients for me as well (aside from Lotus Notes as stated)…The click through rate was stronger with the table being used (27% when using traditional image) and 40% using the table.” - Nick Raymond of Lombok

 

Lombok converted logo email

 

The increase in click-through when converting the logo image into HTML, could be due to increased brand awareness with images disabled. We don’t have enough data to tell if these stats are typical. We’d love to hear from anyone who has carried out a/b testing with our app.

 

 

Next up

Part 4 looks at fluid layouts, which are well suited to all mobile devices, not just the iPhone.

If you missed them, here’s Part1 (horizontal) or Part2 (skinny).

Also see Bypass image blocking by converting images to HTML