5 Big Gold Guidelines to help you design mobile-end mail

With the increasing number of people who use mobile terminals to receive mail, how to make the message clear and readable is also a design difficulty. Share the design guidelines that are summarized in 5 real-world experiences today to help you deal with email design on a small screen >>>

The message design on a mobile device is more than just a list of content fills, it involves many design elements.

The design of mobile devices is never a simple thing. People use the network in different ways, we need to consider a comprehensive solution, especially on the small screen to use mail.

Let's look at some of the issues that need to be considered about mail design on mobile devices, and these discussions don't mean that you can answer all the questions about the design of your mobile mail, but that's a good starting point.

　　First, keep it simple

Complex is strictly prohibited-especially in the mail. Always avoid complex structures, or you will fail when rendering on a small screen. Remember that many devices do not support media queries (such as Google Mail), so we cannot expect mature content rearrangement techniques.

A linear, simple layout can perform well in most cases.

The overall size of the message is also important, and if it exceeds the preset size (about 100KB), your message will not be fully loaded. I haven't tested the problem on all the clients, but Google Mail and iOS devices are having this problem.

In the screenshot below, you can see how users view the entire message by clicking a link: This allows the user to not read all the messages.

　　Second, pay attention to mail target and folding

While I'm not a fan of the "Above The Fold" problem, reading emails on mobile devices means we need to put the top half in a very important position.

Allows users to easily see the summary directory, in most cases can quickly browse content, so as to guide the reader in-depth reading.

The small paragraphs at the top of the message can do this.

This makes it easier for some important clients, such as Google Mail, or Mail on iOS and OS X to work.

　　Third, adjust the font and picture

This topic only applies to devices that support media queries. Unfortunately, there is nothing we can do about the devices that are not supported, and they will adjust the text and pictures themselves.

Currently, media inquiries can be supported by all iOS devices, and Android native mail applications (but with a bit of a problem and lollipop abandoned this feature to support Google Mail), as well as the latest BlackBerry and a handful of other phone support.

iOS devices have two main problems in font and picture size:

Small fonts are magnified by default

Message width is based on the largest unit

The font magnification is usually not a serious problem, but in many cases it can cause text to be cut beyond your layout.

Adding this line to your CSS code can easily solve the problem.

The screenshot below you can clearly see how the text size of the red area changes by adding-webkit-text-size-adjus, the left side is added, and the right is not added.

Font sizing also affects the user experience on mobile devices. Small fonts can be easily read on a desktop device, but have a completely different effect on a small screen.

Look at the example below, the text on the right is magnified to make it easy to read and attract the attention of the user.

In general, it is a good practice to enlarge text fonts on mobile devices, especially for mail. Because reading time is very tense you need to quickly grasp the user's attention.

　　Four, custom links and buttons

Mail design on mobile devices requires a little skill with links.

First take into account the fingers will be clicked, so keep good intervals and strictly limit the number.

Make sure they are easy to click and visible. Also, always remember to add rules to the anchor in an inline CSS style sheet: Gmail application links are styled blue, and they are highlighted by default.

A potential small problem is that Gmail and iOS automatically add links to phone numbers, URLs and email strings (just Gmail).

To prevent iOS from automatically generating phone links, you can add meta tags to your code.

Gmail's solution has some cunning: it adds some invisible characters to ensure that the string is not recognized as a potential link.

I did a series of tests with HTML entities and a "neutral" span tag. You can only get the expected results by breaking each part of the link with a span tag.

　　Five, add spacing

One of my newest suggestions for the design of a message is to consider increasing the inner margin of the text content, which can significantly improve the readability of the message.