Tips for Developing Mobile-friendly Emails

November 14, 2013: Kristin Williams, Digital Publishing Assistant Team Lead

Mobile devices have changed the way we access the internet and our email accounts. People check their email on a wide range of screen sizes, including tablets, smart phones and desktop computers. With so many different devices and applications, things can appear very different. Your email may look great on a desktop computer, but how does it perform on a smartphone?

Email usage on mobile devices is growing rapidly. As of October 2013, 48% of e-mails are viewed on mobile devices, a much higher percentage when compared to desktops. That number will most likely approach half of emails very soon (the iPhone alone accounts for 24% of email opens and, 82% of all mobile messages are opened on an iOS device).

If you’re not mobile-optimizing your emails, mobile readers will get a sub-optimal experience, which can impact your response rates and effectiveness of your messages. In fact, they may not see your email at all. A recent Litmus report showed 80% of consumers delete an email that doesn’t look good on their mobile device. So what can you do to make sure your email works well on mobile devices?

What makes an email more mobile-friendly?

It’s important to remember that there is a big difference between how a desktop user and a mobile user will experience your email. Readers could be viewing your email in situations that are full of distractions, limiting the time you have to grab their attention. Use meaningful images to enhance your message and keep your content clear and to-the-point.

There’s more than just one benefit to making your content concise. Mobile devices have less space for email display, meaning users often need to scroll to see more if the email is larger than the screen. Consider placing your most important information or call-to-action near the top of your email so readers don’t miss it. Also be aware that users may not see long subject lines—the iPhone email app only shows about 30 characters. The most important part of your subject line should be in those first 30 characters!

Finally, mobile users have limited data and sometimes slower internet connections than desktop users. If your email contains large or too many images, it can mean waiting time for your email to slowly load. Many users might give up before they see any part of the email.

Developing a mobile-friendly email

There are many mobile-friendly development techniques, but most have a few principles in common:
  • The text needs to be large enough to read without zooming
  • Content should fit the device horizontally (while vertical scrolling is necessary and usually accepted by readers, your email should not make them scroll up and down to see all of the email)
  • Any links or buttons in your email should be large enough so a reader can touch to click (Apple recommends a minimum size of 44px by 44px, but some studies suggest the area should be larger)
Some more specific mobile-friendly development techniques are included below.

Scalable design
Sometimes referred to as fluid design, this allows the design to resize according to the size of the device it is viewed on. The text in the email breaks differently based on the size of the screen and can be scaled up to a larger size. This works well for emails with a lot of content, but can be difficult to read if the screen is too wide.

Skinny design
This design creates an email with smaller width so it looks good on mobile devices, all the while keeping the same layout. As a result, it’s simpler to create than the other techniques and offers more control over the design. The catch? It may not look as good on a desktop computer as a full-width email.

Mobile-aware design
Mobile-aware design focuses on a layout that works well for all environments and resizes or hides content to increase readability on smaller screens. The font size can be increased, buttons can be modified to make them easier to click and images can be resized to fit the screen or hidden to simplify the layout. Although mobile-aware emails can be designed in many ways, generally they are a single-column design.

Responsive design
A responsive design changes the layout of an email depending on which device it is viewed on. Two column layouts can become one column, images may change size or disappear and fonts and buttons will become larger. Most mobile email clients now support responsive design, but there are still a few that do not. In responsive design, the email is first developed for the desktop but then adapts to mobile devices. A related design method, mobile-first design, does the opposite—the layer is developed first for mobile but then adapts to larger screens. These designs are generally more complex but are more reader-friendly.

You may want to use more than one of these techniques to ensure the best possible experience for your readers. Progressive enhancement practices should be utilized to ensure any email clients or apps that do not fully support features will have a readable layout to “fall back” to.  Before your email is sent, test it on multiple devices to check that is acceptable on all of them.

Is mobile-optimization right for you?

Consider what you know about your readers. Many of them are likely to have mobile devices. If you have a large mobile audience, it might be time to consider optimizing your email.

Looking for more mobile email tips? Check out this how-to guide and infographic on responsive email design from Litmus.

Source: The How to Guide to Responsive Email Design
Current rating: 0 (0 ratings)

Blog post currently doesn't have any comments.

Speak up!
 Security code
Share this post