Designing Emails for Mobiles


Nearly 70% of your subscribers will delete your email if it does not show properly on their mobile device. This is according to a survey (by Blue Hornet) gathering feedback from over 10,000 subscribers. And considering that mobile opens have overtaken desktop opens (Litmus – Jan 2014), you need to take email design for mobiles very seriously.

Thumb Rules for Mobile-Email Design
Before I talk about the design methods of mobile emails, there are some simple design tips or guidelines that are relevant to mobile emails, no matter which approach you choose for email design.

  • Try to keep images to the minimum and place them lower in the email body.
  • Use large font in email body 14px text, 22px headings.
  • Use large call-to-actions, buttons 45 x 45px finger tap.
  • I also found Nathan Matuska’s 20/40/80 Rule valuable for sender, subject and email headlines.

There are 2 major approaches you could take while designing your emails for mobile devices. The fluidic approach or you could go Responsive.

Fluidic Email Design
The fluidic design approach asks you to design your emails primarily for the mobile. You can assume that the same email will render reasonably well in desktops and tablets too. You’ve got to think small screen, 300 pixels wide, 500 pixels long. You have got to get your word across or atleast get interesting within this real-estate. And you have about 10 seconds to do this. webinar-1

This is a webinar invitation email that was designed with a fluidic approach. The left image shows the mobile version of the desktop email. Notice, it starts with a line of text which has a Register link in the first line. The link is spaced well so if you tap on it, you’re not accidently tapping on any other links.

The call to action is shown up-top and visibly on the screen without scrolling. Even the Register Now button in orange is very tap-friendly. The text is large enough on the mobile to be legible.

There is enough information of what this email is about right on the first screen so that you are intrigued to read further or simply go ahead and register for the webinar. This email simply scales up for the desktop.

Responsive Email Design
It simply means you can adapt your design depending on the screen size of the device. An email can show itself differently on your mobile and on your desktop. And you have full control on what can be shown in these versions. So you could actually show different content on different devices.

But you need a specialized skillset to create and implement this design. Your HTML designers should know how to use media queries with CSS3.

This is a great example of a Responsive design. The fluidic approach would be horrible for executing this product-grid design.

email

Although, they look similar there are quite a few differences. With the responsive approach, you can choose the elements you want to show or hide or even change. Based on the screen size, this MegaDeals email shows fewer items in a 2-column format for a mobile screen (right image). Their navigation options are fewer for the mobile. In fact, if you notice the main MegaDeals banner image is also different for the mobile, else it would’ve appeared shrunk on the mobile.

This responsive design email shows you the control you can have on every element in your email. But… but there is a caveat. Despite all the power and promise that Responsive design holds, it does not work everywhere. Media-queries, which is the basis of identifying screen-size, is not supported by several mobile operating systems and apps.

media-query
Courtesy: Litmus

The native email app on Android and iOS have support for responsive design. But the Gmail app on both iOS and Android does not support responsive design yet. Windows Phone has hardly any support for responsive design. Turns out, its not so rosy on the responsive side of the field.

Design Vs. Design
In fact, in a design approach comparo like the one below, fluidic design does have more merit in execution.

Fluidic design Responsive design
Works everywhere Limited compatibility
Barebone design Design in full glory
Easy to create and implement Needs special HTML skills
51% mobile opens and rising Desktop opens reducing
30% mobile-only users Desktop-only users don’t exist

Responsive design can really let you stretch your design canvas capitalizing on different devices.

Fluidic is bare-bones and has its constraints. But it works everywhere. And you cannot beat the ease and simplicity of the fluidic approach. No special CSS3 skills. Also the mobile opens (currently at 51%) are growing and eating away into the desktop share. In a couple of years, I see this close to 70%, questioning the need to create emails for different devices.

Also did you know that 30% smartphone owners in the world are exclusively mobile. They rarely use the desktop. The result is in folks and my money is on fluidic design.

But isn’t there something midway. An approach which could be as easy as a fluidic approach and that would extend to larger screens without compromising on design capabilities. Like a hybrid design? I’m going to hold the bubbly for fluidic design and show you this.

Hybrid Email Design

mobile_version_1

email-2
On your right is the 2-column newsletter email from CNET. It features content and an advertisement.

The same thing on the mobile on your right appears as a single-column, the way it should. The content is stacked. Moreover the content from the second column shows neatly stacked below the first.

This is not responsive. There are no media queries here. Its simple HTML tables that are coded intelligently.

This approach does double duty for fluidic design. It looks great and does not need the complexity that would otherwise require a responsive design. It serves as a great example of a hybrid-approach.

Which approach is right for me?
Look into your email analytics, specifically the Operating Systems are most used on the mobile for viewing your emails. For example, if you see a dominance of iOS opens (like in US and UK), responsive design will work well for you. If you see a dominance of Andriod opens, you may want to work with hybrid or fluidic designs mainly.

Your subscriber base holds the key for you to choose the right approach to mobile email design.

About the Author
Naresh Bhagtani heads the company Niche Software which has created the email marketing product Juvlon. Naresh Bhagtani is also the chief product architect of Juvlon. He consults on various aspects of email marketing including campaign return of investment, email delivery, metrics, infrastructure, list acquisition and management.