iPhone vs Android: How to make the letter look good on each platform

Around the world, more and more people are starting to use smartphones, the number of owners of such devices is also growing in Russia - more than half of all mobile subscribers use devices in Moscow. In this case, the leaders in sales in our country are Samsung and Apple. In the US, the two main mobile platforms are almost equal - 47.7% for the iPhone, 47.6% for Android, in Europe Android is ahead, and in Japan, on the contrary, iOS accounts for more than 60% of sales.

This global trend also leads to the fact that more than half of all emails now open from mobile devices. So, designers who are engaged in the preparation of mailing lists , you must make sure that the messages look good on Android devices and on the iPhone.
')

Some statistics

Of all 50% of the discoveries of letters on mobile devices, most (26%) are on the iPhone, and only 7% are on Android devices.

In many ways, this difference is explained by the fact that iOS displays images by default, and many mail clients on Android do not show them on the contrary. To determine whether a letter has been opened, you can use special “tracking pixels” - small images loaded from a third-party server. If the image loading is blocked, then the information about whether the letter was opened does not go to the company that sent it, which means that there is a bias in the general statistics.

The study of such general data well allows you to determine the current trends, but it is really important to analyze when and where the subscribers of a particular company open letters (we published a detailed post on Habré with statistics on the Internet ).

According to various sources, one of the most popular types of content among smartphone owners is ... e-mail !



Since so many people use smartphones and working with email is their favorite activity, the importance of displaying letters on mobile devices is difficult to overestimate.

The design of letters for “mobile” is a complex process, since there are a large number of devices and email clients, each of which has its own peculiarities in the display of messages. In the native Android client, the letter may not look the same as in the Gmail application.



Native Android 4.x application (adaptive) vs Gmail Android application (non-adaptive)

It is very important to understand which device users will view the letter on, especially if one takes into account the fact that 71% of them will delete the message if it looks bad on their device, and 16% will then unsubscribe from the mailing.

Many e-mail services provide various analytic capabilities - Pechkina, for example, has a special reporting service , which displays various useful information for each e-mail distribution.

Existing restrictions

When writing letters for iOS and Android, it is important to remember that not all mobile email clients have the same support for HTML and CSS.

	Media queries	Image blocking	ALT text	Stylized ALT Text	Text preview
Android 4.x (native email client)
Gmail Android Application
Android application Yahoo! Mail
iOS Mail (native email client)			*	*
Gmail iOS application			*	*
Yahoo! iOS application Mail

* Images are enabled by default in iOS, but were manually disabled during testing. The Gmail app for iOS does not have an image disable feature.

For example, in iOS and Android, applications in varying degrees support responsive design. To create adaptive templates, media queries technology is used, which is completely differently supported.

For example, in the native Android mail client, media queries are supported, but on Samsung devices with the same OS — no (even in the native client). This happens because Samsung replaced the "default" email application with a client of its own design. To make letters adaptive, this application uses a hybrid programming technique.

Since media queries are not supported by all applications, mailing list designers have to resort to various tricks that help create letters that look better on mobile devices.

Simplify content and design

People look at their phones, on average, 150 times a day . Such short interactions imply the need to quickly give a person what he is looking for. To do this, you need to focus on the most important information so that the recipient of the letter can quickly understand its essence, running through his eyes.

To make the letter even clearer, you can use a one-column layout, since two or more columns with content clog the smartphone screen, which complicates reading and interaction with the message.

Everything should be big

To further improve the readability of the letter, you can increase the font of the text (some techniques for working with typography are presented in this material ). Readers should not zoom in on a letter in order to make out what is written in it, so the font should be large enough so that even those who have not the strongest vision can understand what is being said.

A good option would be to use a minimum font size of 14px for body text and 22px for headers. Using a size of 14 pixels will avoid the "polo" of the navigation elements in iOS, which automatically increases the font to at least 13 pixels.

In addition, it is worth using buttons that are convenient to click on the touch interfaces. Do not make buttons less than 44x44px, it is also important that the button be surrounded by a sufficient amount of free space. Calls to action, which are placed on the buttons, should be easy to understand and implement the desired, so that you do not need to surround their texts or other design elements.

Protective design

Many mobile mail clients by default block the display of pictures in letters. Accordingly, you should have a plan B, which will take effect, in this case. Users should be able to read and understand the letter, even without pictures.

It is necessary to maintain a balance between the use of images and HTML-text (the text will be shown even in applications with disabled images), so that you can interact with the message without graphic design elements.

Also, do not forget to work with the text ALT, which is displayed on the site of the blocked image in most such “aggressive scenarios”. You can even apply styles to this text so that it will effectively pop up.

Optimize display in inbox

The first contact with the message takes place in the Inbox, so it is extremely important to optimize how the letter looks at this moment. You should always use an adequate name in the From field, which will be immediately understood by the recipient. The subject of the letter should clearly give an idea of ​​what it will be about.

All iOS and Android applications mentioned above support preview text. This is an extra couple of lines of text that you can use to convince the reader to open the letter. The text of the preview is “catching up” from the first few lines of the main message in the HTML template, so you need to make sure that there are no service phrases like “view as a web page” or “do not display a letter?”

Everything needs to be tested, and then tested again

In order to create effective email campaigns (not only on smartphones, but even on smart watches), they should be constantly tested. Support for various functions by different email clients is constantly changing, so you need to test messages before each dispatch.

In addition, you should use A / B testing to understand which variants of the messages the target audience likes more. You can test a lot of elements - from headers, text previews and design elements to the name of the sender of the letter.