Developing emails for mobile devices is a different animal than developing emails for computer screens. Learn how to tame the beast!

The industry refers to this as responsive design. I like to call it responsible design. You’ve got to design your emails where they’re being read. According to a recent Email Analytics report by Litmus, more email is read mobile than on a desktop email client or via webmail.

In a previous post, I mentioned email design best practices. We’ll take a closer look at this, but before we do, we’ve got to discuss “media queries”. If you code media queries into your email properly, you can avoid many of the mobile design “don’ts” below.

Media queries can be super specific, beyond just width/height. It’s easy to get carried away. They can guide design for portrait and landscape orientations, pixel ratios (image pixel widths vs. display width). A good rule of thumb (for all those thumb-specific mobile tasks) is to set up a media query applying a percentage – instead of fixed width – of width to elements.

Think beyond Androids and iPhones when setting up your queries. And think of media queries as a css stylesheet within a css stylesheet. Note: You’ll have to develop some workarounds for Gmail, which strips out this information.

OK, now for some examples of mobile email designs that could have benefited from media queries….

Give it up

You’You’ve got to let go of certain features that may not translate well to mobile. In this Bed Bath & Beyond email, the free shipping line scrolled across the email in my inbox… but not in the mobile version.

Size matters

While smartphones and tablet screens are smaller than those on desktops, you need to think big when it comes to mobile design. That is, think bigger elements, bigger fonts (18 pt.), but fewer words.

That’s especially true for subject lines. Case in point:

The subject line is all you see. Turns out this Fab mobile email isn’t so “fab” after all.

I’m all thumbs

Those viewing your emails on smartphones will mostly likely navigate with their thumbs. That means you need larger call-to-action buttons (44 x 44 pixels). Otherwise, your subscribers will get frustrated when they think they’re clicking on one thing, accidentally click on a different link, and end up in the wrong place.

When designing the email, ditch the “click” mentality altogether. Think more about how people use their mobile devices; design for taps and swipes instead.

Give me some space

In addition to making buttons larger, you need to add more space around them. Again, this is to avoid having your subscribers click on links they didn’t intend to.

The need for speed

While mobile devices are convenient, download times can be slower. So it’s important to reduce image file sizes. You don’t have to sacrifice image quality when optimizing images. JPEGmini and Smush.it are two web-based applications that optimize images for you.

To scroll or not to scroll, that is the question

Best practices dictate that you use a vertical, single-column layout (320-480 pixels) for mobile emails. Don’t force your subscriber to scroll way down to get to the “good stuff.” Put your main message and call to action at the top of your email, so you don’t lose click-throughs.

When you fail to adjust for the width using media queries, you risk compromising your design, as seen in the top nav of this Overstock.com email:

After the fact

Best practices don’t stop once the email is designed, developed and deployed. When subscribers click on a link in a mobile email, where are they directed? If they end up on your traditional site, you’ve done them a disservice. Redirect them to a mobile version of your site so their user experience is not diminished.

The key takeaway

You don’t have to design for every single mobile device out there. Design for the devices the majority of your subscribers are using.

Designing mobile-friendly emails isn’t rocket science, but it does take some serious know-how. You can’t ignore mobile, so you might as well learn to adapt – and adapt your email setup in the process.