Mobile email design (part 3 / pixel art)
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.
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.
This space invaders email didn't have room for copy
/ 
/ 
3 original .bmp images I used to create the space invaders email.
iPod email
Pixel art iPhone email, view
Santa email
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.
“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
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