Mobile email design (part 3 / pixel art)


PacMan pixel art email



Why I luv pixel art emails {view PacMan email}

1. Lite:

The PacMan email above is only 14K ( view full email here » ). The W3C advises mobile emails be under 20K.

2. No images:

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

3. Fun:

They add visual interest without resorting to images.

4. Fast:

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. It works in all email clients, except for Lotus Notes 6.5 & 7. Below is a demo video so you can see how easy it is.

(Update: this toy was created in 2009 and hasn’t been maintained since. Pixel art fallbacks have since evolved out of this, and are a great use case.)






Two things to consider: {view pixel footer}

1. Gmail only supports 100K of HTML. That’s why the pixel art footer below needs to be simplified, its too large. View full-sized »


Footer pixel art email


2.  Make sure your pixel art containers leave enough room for your text. One #Pixelartfail was my space invaders iPhone email, with no room for copy. View the full email » 


Space Invaders pixel art email


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

Above are the 3 original .bmp images, I used to create the space invaders email. Feel free to have a play with them, using the scale function in our app.

The drop shadows on the text is CSS3, I couldn’t resist trying it out after reading Ros Hodgekiss’s post on the Campaign Monitor blog.



The image below shows the PacMan email, with and without CSS3 drop shadows:

CSS3 shadows



The code is: text-shadow: 0px 1px 1px #0D5995; Its viewable under Apple Mail and on the iPhone, for me that’s 35% of my subscribers.


iPod email {view}






Santa email {view}

We sent out our first pixel art email back in Dec 09, it spurred the last 6 months of mobile email research.


Style Campaign holiday card


The Santa email was sent out at 5.40pm (PST) Christmas Eve, 09. 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 for six months. 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, recently 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


One Response to “Mobile email design (part 3 / pixel art)”