8 Tips to Help You Design a Perfect Mobile-Friendly Email
With the advent of the mobile revolution, it has become important for email marketers to rethink their email marketing strategy to engage maximum users. As subscribers use multiple devices to access their emails, creating emails that run effortlessly in all environments is indispensable.
And because 54% emails were opened on mobile devices in 2016, every marketer must now take a mobile-first approach. When it comes to building emails for mobiles, you need to take care of certain design elements. Uplers, in this blog, take you through the essentials in a mobile email design composition.
Before that, here are a couple of examples of how a traditional email is designed differently for mobile devices:
This is an email from John Medeiros. The traditional email has a hero image accompanied by the company’s logo and followed by the copy and offer.
Here, the main part of the email is the text and offer. Hence, to make the email simple, the hero image is skipped in the mobile view. Instead, the font size is kept bigger for users to read and skim through it easily.
In this email from Photobox, the desktop view of the email shows a header with the ‘view in browser’ link, pre-header text, and a navigation menu.
In the mobile view of the email, the header has been compressed and hidden inside a hamburger menu. Here, the key message i.e. the offer and CTA are highlighted in larger fonts. This email hides excess information and focuses on the main elements of the email.
Ideally, you must start with the mobile design and later develop it for other platforms.
Let’s dig deeper now! Here are the key factors to consider while designing emails for mobile.
1. Subject Line: Keep it short
The subject line is the driving factor for email opens. It is, therefore, necessary to optimize your email subject lines for mobile devices. According to a survey report by ReturnPath, a typical desktop subject line displays around 60 characters, while mobile devices show only 25-30 characters. Make the subject line short, crisp and compelling in order to convince the users to open.
2. Fonts: Enlarge them
Small text that can be easily read on a desktop may not be readable on small mobile screens. Hence, while designing for mobiles, set the fonts slightly larger than for traditional emails. The headline font should be of minimum 22px and the body font of 14px. Highlighting the key message with larger fonts will help you in capturing the users’ attention.
3. CTA: Make them prominent
The CTA is the most crucial element of your email. Make them prominent in the mobile design by using large, thumb-tappable buttons. It should have a minimum size of 44x44px and must be clearly visible and easily clickable.
4. Images: Use images carefully
All mobile OS except iOS block images by default and prompt the user to turn the images on. Therefore, use images carefully in your mobile emails. Avoid using them to save space and balance them with plenty of body text by keeping the image size smaller and text size larger.
5. Content: Be short, concise and relevant
Trim your content for mobile emails. Include only relevant and valid information in the form of text, links, and images. Include the main message above the fold because when it comes to viewing the email on a mobile device, the top portion is critically important. Highlight the key elements using different font styles; this will help you draw readers’ attention to the important part of the email.
6. Layout: Single column template
Keep the layout of the email template simple. Avoid complicated structures that will fail to render on small screens. A linear and single column template layout will deliver the best results in most cases. Also, scale your emails to between 320-550px width to fit the width of the mobile screen.
7. Links and Buttons: Highlight clickable links
Make the links and buttons in your email copy easily visible and clickable. Highlight them using borders, outlines, big buttons and other effects and keep them well spaced. Use bold typefaces and different font colors to make the links stand out from the text in your email.
8. Spacing: Increase line spacing and white space
Make your email readable and easy to scan by providing proper line spacing. Increase padding around the main text content to avoid clutter and illegibility.
So, are you ready to send your next mobile-friendly email? Great! But here’s a little advice- before you send it, make sure to test it across multiple email clients and devices. Do you want to get responsive email templates and newsletters designed and coded for your business?