Mobile email usage in the past 5 years has skyrocketed, challenging desktop email usage and emphasizing the importance of a mobile-first approach to designing your email campaigns.
This may seem simple enough, but there are several easy traps you can fall into during development which you won’t realize you’ve made until its too late. Some extremely common mistakes when going from desktop to mobile include illegible content, images resizing and creating hard-to-reach buttons or links.
If mobile use isn’t explicitly the focus from the start of your design process, the experience isn’t going to be anywhere near perfect for mobile users. But, if designed with the mobile first approach, your emails will be readable and accessible no matter what size device they appear on.
There are two schools of thought for optimising your email for mobile: mobile friendly or mobile responsive. Mobile friendly is a simplified design that works well across both desktop and mobile; it’s easy to code, but is essentially the same email on both. Mobile responsive allows you to create an email which renders differently on both, i.e. it is optimised for whichever device it’s viewed on.
For easy to achieve mobile friendly emails keep your design simple and stick to one column. This technique will create a single, mobile-friendly framework that works across all email clients without requiring too much time, resources and skills. As well as focusing on the one column design other elements include large images, headlines and buttons.
See the example of a simple event email below:
All information is kept to one, skinny column ensuring that on mobile the width can change without affecting the appearance. The font appears legible and the buttons have enough spacing to ensure mobile users can easily tap the link. Information is kept short and concise with the main details clearly displayed, as well as images kept to a minimum. The social icons also allow enough space in between for easy tapping.
If you need to fit more information in then your design may involve two columns, if so making it mobile responsive is the way to go. However make sure you have thought about how you want it to look on mobile first, rather than leaving it as an afterthought.
An email containing two columns will need to stack on top of one another to work in mobile view and to avoid the user having to scroll side to side. The below example shows how responsive elements work with a more complex event email which includes additional buttons and information.
As you can see the buttons and fonts are still clear and the middle columns neatly stack to allow the email to flow easily on mobile. Responsive design can also replace desktop views with specific mobile options; the example above displays a banner image as the header for desktop, however in the mobile version this disappears and is replaced with a mobile friendly banner header.
The issue surrounding mobile responsive emails is that they are not always compatible with every email client. Fully test your design to ensure that the responsive elements are working, you may have to compromise with some elements.
Which to choose?
Consider which email design suits your message; mobile friendly emails will prove useful for information you want to get to your audience simply but effectively; for example brief fund, company or news updates, competitions or event confirmation emails. Two column layouts are useful if you need to communicate multiple pieces of information for example newsletters, event invitations or roadshow information.
While responsive design requires more time, resources and skills, it is the best option to choose as it allows you to do more with your design. But if you want a simple, easy to create email that requires little time and resource, then mobile friendly is for you. Either way you will need to thoroughly test your email and make sure the message is clear for your audience to engage in the way you envisage.
Putting mobile first
Here are a few pointers when creating good looking and functional mobile first designs.
- Increase font size: minimum size of 14px for body content will be legible on mobile without zooming.
- Evaluate your content: do you really need all your links, images and text? Make your email concise and to the point; don’t squeeze too much information into one space.
- Get noticed: call to actions and links should be easily tappable, strong and get noticed. Increase font sizes and line spacing to allow for fingers to tap. Be inventive with your call to action phrases, avoid using ‘click here’ as mobile users tap rather than click.
- Convey necessary info within 3 seconds: Chances are most of the recipients who click into your email aren’t going to stick around for a very long time. When you are designing your emails you should do so assuming that your recipients are busy and are clicking around their inbox when coming across your email so make sure you make those few seconds count. Put everything you need them to know about your email up front and center with a prominent CTA right below it so as they’re flicking around they can process what you’re asking them to do and possibly respond accordingly.
- Make your subject and preheader text work together: Whether you use an Android or iPhone, you know how your emails are laid out in the email app and how much real estate each takes up. Don’t rely solely on your email header to catch your recipient’s eye since the preheader text takes up considerably more room. Put your most valuable piece of information in this space to coax them into your email, which is really half the battle. Whatever you do, don’t waste that precious space on a “can’t read this email?” link, that’s what you’re email’s header/footer are for.