iPhone vs. Android: How to Make Email Look Great On Mobile

[ 0 By

Today, nearly 60% of American adults own a smartphone, so it’s more important than ever to make email look great on mobile. iPhone and Android purchases are nearly even in the US—iPhone represents 47.7% of sales, while Android holds 47.6% of market share. In most of Europe and China, Android has the majority of purchases, followed by iOS. Conversely, in Japan, iOS holds the majority with over 60% of sales. That’s a lot! Mobile email design is more important than ever.

While looking at worldwide purchase data is a great indicator of smartphone adoption, it’s your audience that matters. What smartphones are most popular with email subscribers?

Understand your audience

Beyond sales, email opens are another great indicator of smartphone popularity—in particular, what devices are favored among your audience.

Mobile opens now represent over 50% of total email opens. The majority of these mobile opens occur on the iPhone, which represents 26% of total opens, and Android, which holds 7% of total opens.

Why the discrepancy between sales and email opens? While iOS displays images by default, many Android apps do not. Since determining where an email is opened requires images to load, data for some apps and programs are over- or under-represented due to automatic image blocking.

Like smartphone sales, looking at email open data as a whole is great for identifying trends. What’s more important is understanding where your subscribers are opening your emails. Tracking and analyzing which apps and programs your subscribers are using is one of the best ways to optimize your campaigns for your audience.

EA-analytics

You can use Litmus Email Analytics data to get this information.

Embrace email as an app

With 60% of adults owning smartphones, it’s clear that people like consuming content whenever and wherever they want. Their favorite type of content? Email, of course!

Activity chart

With so many people using smartphones—and email being the most popular activity on those devices—it’s important to assess how your emails display on those small screens.

There’s a lot to consider when it comes to mobile email design. On top of the multitude of smartphones, users have dozens of different email apps to choose from—each with their own set of rendering quirks. An email in the native Android email app can display very differently from the same email in the Gmail app.

AndroidNative-Responsive

Android 4.x Native Email App (Responsive)

AndroidGmailApp-NonResponsive

Android Gmail App (Non-responsive)

Understanding where your audience is opens emails is crucial, especially considering that 71% of people will delete an email if it doesn’t look good on their mobile device—and 16% will unsubscribe!

Know the limits

When it comes to optimizing for your iOS and Android subscribers, it’s important to remember that not all mobile email apps have the same HTML and CSS support. That would make email creation too easy, now wouldn’t it?

Media Queries

Image Blocking

ALT Text

Styled ALT Text

Preview Text

Android 4.x (native email client)

check-green check-green check-green check-green check-green

Android Gmail App

check-X check-green check-X check-X check-green

Android Yahoo! Mail App

check-X check-green check-X check-X check-green

iOS Mail app (native email client)

check-green check-X
check-green
*
check-green
*
check-green

iOS Gmail app

check-X check-X
check-X
*
check-X
*
check-green

iOS Yahoo! Mail app

check-X check-green check-green check-green check-green

*Images are enabled by default in iOS, but were manually disabled for testing purposes. iOS Gmail app does not have an option to disable images.

For example, iOS and Android email apps have mixed support for responsive design, which aims to provide subscribers with the best email experience possible—regardless of whether they’re reading on mobile or desktop.

Responsive email uses a media query, which is a special set of CSS styles that act like conditional statements. They respond to the screen size of a device, applying different sets of rules based on that screen size.

While responsive design allows for an optimal email experience across environments, media queries aren’t supported everywhere (see chart above). To further complicate things, while media queries are supported in the Android native email app, they are not supported on Samsung Android devices—even in the native client. This is a result of Samsung replacing the native Android email app with an email app of their own. You can use a hybrid coding approach to make your emails responsive in this client.

In addition, since media queries aren’t universally supported, consider using these mobile friendly elements as a backup for when media queries aren’t supported:

Simplify content and design

People look at their phone an average of 150 times a day. These brief interactions mean you must get your point across quickly. Focus on relevant information in your campaigns, allowing subscribers to scan your email quickly.

In addition, consider using a one-column design for increased legibility. Two or more columns crowd the small screen of a mobile device, making it difficult for subscribers to read and interact with your email.

Make everything bigger

To further increase legibility and scanability, use large fonts. Subscribers shouldn’t have to zoom in on their mobile devices to read your email—make your fonts big enough so that even the worst eyes can easily read your message.

We recommend using a minimum size of 14px for body copy and 22px for headlines. Keeping text at least 14px will avoid broken navigation bars and other layout elements on iOS, which automatically resizes small copy to a minimum of 13px.

In addition, use buttons that are touch-friendly. We recommend using a 44x44px minimum button size. Be sure to surround it with plenty of white space! You want to ensure that your CTAs are easy for subscribers to tap, so don’t surround them with text or other links.

Design defensively

Many Android and iOS email apps block images by default. As a result, it’s crucial to optimize your emails and plan for this scenario. You’ll still want your subscribers to be able to read and interact with the majority of your message regardless of whether images are on or off.

Use a proper balance of HTML text and imagery (HTML text will still display in an images-off environment) to ensure that pertinent information will still be present even if images are not.

In addition, alternative text (ALT text), which renders in place of an image in most image-blocking scenarios, is one of the best ways to get around apps that block images. You can even used styled ALT text to make your descriptions pop!

ALT text

Optimize for the inbox

Since subscribers first interact with your email in the inbox, it’s crucial to optimize for this view. Always use a trustworthy from name that your subscribers will recognize. In addition, use a subject line that describes what’s in the email and entices your subscribers to open it.

All of the iOS and Android email apps referenced above support preview text. Use this extra few lines of text—paired with the subject line—to further encourage your subscribers to open! Preview text is pulled from the first few lines of text in your HTML, so be sure text like “view as webpage” or “having trouble seeing this?” aren’t showing up.

Inbox view

Test, test, test!

In order to produce the best-performing campaigns—on not only Android and iOS email apps, but in every inbox—you should constantly test your campaigns. Support for email apps is always changing—so testing before every send ensures that your campaigns will look and work as they should.

In addition, use A/B testing to see what resonates with your audience. There are countless things to test, including headlines, preview text, from names, and design elements. It’s one of the most effective (and easy!) ways to make measurable improvements to your campaigns.

DISCOVER + OPTIMIZE FOR YOUR MOBILE AUDIENCE

Are your emails mobile-optimized? Should they be? Looking at sales data only paints a partial picture—it’s important to look at your subscribers’ behavior. After all, they’re the ones you’re sending to, not the general population.

With Litmus’ Email Analytics you can see who is opening on iPhone and Android. Then, use Email Previews to get screenshots of your email in popular apps and programs. Try us free!

Start a free trial →