Mobile Email Design: Of Unpardonable Sins and Runway Fashion

If you send emails to your consumers, brace yourself for the following statistic.

“45% of consumers have unsubscribed from a brand’s promotional emails because the brand’s emails or website didn’t display or work well on their smartphone.” -Litmus, 2016

Survived that one? Don’t relax yet - it gets worse.

“34% of consumers have marked a brand’s promotional emails as spam because they didn’t display or work well on their smartphone.” -Litmus, 2016

Ow.

Yep - your readers and customers might have signed up for your emails. But if your emails don’t look pretty in their inbox, that’s so unforgivable that they won’t just unsubscribe. They’ll mark it as spam. That’s a mark against you and your sender reputation, making it that much harder to get your emails into the boxes of your subscribers.

Ow.

Like it or not, fair or not: sending mobile-unfriendly emails is now an unpardonable offense.

The problem is, even if you’re trying to create mobile-friendly emails, some mobile email clients can make your job very hard.

Here’s why:

When it comes to mobile-friendly emails, there are two very general main categories of design.

Scalable design will make your emails look decent on desktop and decent on mobile.

Responsive design will make your emails look great on desktop and great on mobile. Picking which one to use sounds like a no-brainer, no?

EXCEPT: Responsive design is a whole lot tricker than scalable design.

What’s the difference?

Scalable Design

Scalable design is creating an email with a design that will look decent wherever it is.

That usually means:

- one column
- text large enough to read comfortably on any device
- large call-to-action buttons
- leaving enough space between links (including navigation bars) so they can be tapped easily
- lots of white space
- not too long
- not using graphical text (use HTML and/or styled ALT text instead)

It should look decent anywhere… but it probably won’t look amazing anywhere. (Kind of like how “one size fits all” clothing doesn’t usually look drop-dead gorgeous on anyone.)

If you want runway-quality clothing, it has to be designed with the model in mind. That’s called...

Responsive Design

Responsive design is creating an email that will mold itself to the attributes of the application displaying it.

If it will be read by multiple applications with different capabilities, your email code will include individualized display instructions for the different applications. (Kind of like one basic evening gown that comes with instructions on how to alter it to perfectly flatter different heights, sizes, complexions, etc.)

Needless to say, designing that gown is a tad more complicated that designing a one-size-fits-all sweatshirt. So if you’re not a professional seamstress, you should probably stick with your sweatshirt than chance a gown that you’re tripping on and yet can’t zip up the back without restricting your lung capacity. Ack!

Responsive design works because of code called “media queries.”

The media query is basically a piece of code saying to the application: “Hey! If you’re this type of media, please follow the following directions in how you display the page. If you’re not, just ignore whatever’s in these curly brackets and display it the default way. Got it? Ciao.”

Here’s what they look like: @media screen and (max-width: 500 px)

In the above example, “this type of media” would mean a device which will display the email on a screen (e.g. not a printer) and whose viewport has a width of 500px or less.

The instructions you give afterward can involve changing everything from font size to colors to columns. You can change the navigation or the order in which elements are shown on the page. You can scale images. You can even change or hide blocks of content or other elements.

In short, you can tell your short, sleeveless, turquoise sequined dress to turn into a floor-length, bell-sleeved, midnight blue gown - all depending on who puts it on. Got it? Great. The only problem is that some mobile email clients DON’T get it.

They totally ignore media queries.

You’ve designed an email that looks great on a smartphone, but your reader’s email client ignores your smartphone instructions and displays the default: which turns into a squished three-column layout with tiny links that you can’t tap.

Ugh.

True, marking it spam might be an overreaction… but you do get where they’re coming from, right?

If this post leaves you nervous if your emails are going to be tossed by their recipients, stay tuned for next post. We’ll tell you which media-query-clueless email clients to watch out for, and how to avoid ticking off readers who use them.