Connor BrookeIf you’re like me, you begin each morning by checking your phone, then again during your morning commute while waiting for the bus, a couple dozen more times throughout the day and of course, one last time before falling asleep.
And if you’re not like me, perhaps these 3 mobile email facts will convince you the importance of responsive, device-friendly email design:
- 51% of email opens are on mobile devices (Litmus)
- People look at their phones an average of 150 times a day. (Internet Trends, Kleiner Perkins Caufield Byers)
- 80% of people delete an email if it doesn’t look good on their mobile device. (Litmus)
Okay, okay, so optimizing email for mobile is important, but how do you achieve responsive email design? Here are 5 quick guidelines for making sure your emails look great across all devices.
1. Respect the Preheader
The preheader of an email is the first few characters of text immediately following the subject line, that a user sees in the inbox. The text may be pulled from the body of the email, or can be edited for an entirely different message (choose an ESP that enables preheader customization). The preheader is an often overlooked piece of email real estate, that should be optimized in order to quickly capture the attention of mobile email readers doing a cursory scroll through their inbox.
Do not waste this precious space on asking your subscribers to follow you on social or to “view this email in a browser.” The preheader should serve as an extension of your subject, convey a sense of urgency, and convince your customer to open the email.
2. Watch Your Width & Columns
Multi-column email layouts may look great when viewed on a big screen, but they will appear mighty cramped when opened on a mobile device. Therefore, best practice is to use one column email layouts. If you still wish to use multi-column layouts to display extra information, consider using CSS3 media queries when coding your templates to make them more mobile-friendly. Media queries are rules that come into play when certain conditions, such as a specific device width, are met.
For example, say if you have a two column 600px email layout, with columns measuring 300px each. Using media queries, you can set styling rules that will display the email in a single column layout if the device screen size is 480px (the size of an iPhone screen turned horizontally) or less.
Media queries can do more than just adjust layouts for certain screens. They can also enlarge fonts and buttons or be used to add or remove sections based on screen size.
3. Use a Legible Font Size
4. No Link Stacking
Not everyone is blessed with long, slim piano fingers. Therefore, when you stack links on top of each other in an email, it makes it very hard for us folks with larger hands to select the right link. When we touch the wrong link, it’s highly unlikely that we’ll return to our mail app to reselect the right link.
5. Consider the Call to Action
Finally, it’s important to think about what happens after a user taps a link or call-to-action button on mobile. Does a “Buy Now” button logically take the user to the product page, only to be interrupted by a “Download Our App!” popup that leads the customer astray on the conversion journey? If so, this could be a major revenue setback. Of course you want users to download your mobile app, but certainly not at the expense of making a purchase.
Therefore, consider making the “Download Our App” popup visible only to people who are not following a link, via email or other, to visit your website. The “Download Our App” workflow should only appear for people who are inputting your website’s link into the mobile browser and visiting your site directly.
This blog post was originally published on the Iterable blog. You can read the original post here.
This article was written for Business 2 Community by Connor Brooke.
Learn how to publish your content on B2C
Join our Telegram channel to stay up to date on breaking news coverage
Add B2C to your Google News Feed
Comments on this article are closed.