5 golden rules for designing mobile emails

Email design on mobile devices involves more than just a list of content-filled items.

Designing for mobile devices is never easy. People use the web in different ways and we need to consider a comprehensive approach, especially when using email on a small screen.

Let’s explore some of the things to consider when designing for mobile emails. This discussion isn’t meant to answer every question you may have about mobile email design, but it’s a good starting point.

1. Keep it simple

Complexity is forbidden - especially in email. Always avoid using complex structures, otherwise they will fail when rendered on small screens. Remember that many devices do not support media queries (e.g. Google Mail), so we can't expect sophisticated content reflow techniques.

A linear, simple layout works well in most cases.

The overall size of the email is also very important, if it exceeds a preset size (about 100KB), your email will not load completely. I did not have this problem on all clients I tested, but it occurred with Google Mail and IOS devices.

In the screenshot below, you can see how a user can view the entire message by clicking on a link: This saves the user from having to read the entire email.

2. Focus on email goals and folding

While I’m not a fan of the “Above the fold” problem, reading email on a mobile device means we should give top priority to the top half.

Allow users to easily see the summary table of contents, which can quickly browse the content in most cases, thereby guiding readers to read more deeply.

A small paragraph at the top of the email can do just that.

This makes working with some important clients (like Google Mail, or Mail on iOS and OSX) much more convenient.

3. Adjust fonts and images

This topic only applies to devices that support media queries. Unfortunately, there is nothing we can do for devices that don't, and they will adjust text and images on their own.

Currently, media queries are supported by all iOS devices, the Android native Mail app (but there are some issues and Lollipop dropped the feature in favor of Google Mail), most BlackBerry phones, and a few other phones.

There are two main issues with font and image sizes on iOS devices:

• Small fonts are enlarged by default
• The width of the message is based on the unit of ***

Enlarging fonts isn't usually a serious problem, but in many cases it can cause text to extend beyond your layout and get clipped.

This can be easily fixed by adding this line to your CSS code.

In the screenshots below you can clearly see how the text size in the red area has changed by adding -webkit-text-size-adjus, with the left side after adding it and the right side without.

Font size also affects the user experience on mobile devices. Small fonts may be easy to read on a desktop, but have a completely different impact on a small screen.

Look at the example below. The text on the right is enlarged to make it easier to read and attract the user's attention.

Generally speaking, it’s a good idea to enlarge text fonts on mobile devices, especially for emails, because reading time is limited and you need to grab the user’s attention quickly.

4. Custom links and buttons

Email design for mobile devices requires a little finesse when it comes to links.

First, consider that they will be clicked by fingers, so keep them well spaced and strictly limit the number.

Make sure they are easily clickable and visible. Also, always remember to add rules for anchors in your inline CSS stylesheet: Gmail app links are styled blue and emphasized by default.

One potential hiccup 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 a meta tag to your code.

Gmail's solution is a little sneaky: it works by adding some invisible characters to ensure that the string isn't recognized as a potential link.

I did a bunch of tests with HTML entities and with "neutral" span tags. Only when I broke each part of the link with a span tag did I get the expected results.

5. Add Spacing

One of the best tips I have for email design is to consider increasing the padding around the text content, which can significantly improve the readability of the email.

【Workplace experience: Read and transfer series! 】

Want to become a director? Check this out!
《Youshe’s Big Launch! Let’s Talk About the Promotion Path from Designer to Director》

Bull Demon King's blockbuster work! Everything from interviews to resumes is done!
"Youshe's first release! Fully revealing the secrets of resumes and interview techniques"

11 essential skills to become a workplace expert!
"Advanced Designer Tutorial! 11 Essential Workplace Skills to Become an Excellent Designer"

Translation address: blog.enqoo