If you, like most people, read your emails on a mobile device, you’ll know that your reading experience can go one of two ways. It will be absolutely fine or you will close it down in frustration because it’s unreadable. Something that looks fine in your inbox can be impossible to read on a smaller screen, especially on a smartphone.
Maybe text is too small and maybe response buttons don’t work. As a business sending out emails, this is not the effect you were going for. You need to create mobile responsive emails.
Mobile responsive emails are emails that work well when accessed on mobile devices. Due to the number of people who open emails on mobile devices (47%, with some brands reporting over 70% of their emails on mobile devices) this type of email design has been growing in popularity with businesses.
The brands that report the highest figures have used mobile responsive design to great effect, enlarging their engagement figures and reporting higher profits.
Here are some tips for making your company emails more effective.
1 - One Eye, One Thumb, One Arm
Studies have shown that following the idea of ‘one eyeball, one thumb, one arm’s length’ is very effective. On a small screen, text should be easily readable with one eye, any response buttons or links usable with one thumb, and all content should be readable at an arm’s length away. This ensures that emails are not overloaded with content, and have easily readable messages.
2 - Single Column
Single column layouts that are 500-600 pixels wide work best on mobile devices. They’re easier to read, and the layout is easy to change by the designer.
3 - 44X44 or Bust
Any response buttons and links should have a minimum target area of 44x44 pixels based on Apple guidelines. Nothing is more frustrating to a user than having tiny response buttons or lots of links that you can’t access because they’re too small to press cleanly.
4 - Font Size
Apple recommends 17-22 pixels, while Google prefers 18-22. Because there is not a lot of difference, it’s safe to say the aim should be around 20 pixels. Make sure the style and font you use can be clearly seen at this size, and be aware that font sizes change on different displays.
5 - Above the Fold
Keep your message concise and place the most important information in the upper part of the email. Scrolling can be harder on a touchscreen than with a mouse, especially with one thumb.
6 - Get Responsive with Media Queries
Use media queries (A technique first seen in CSS3) to help you change the width of the email dependent on the size of the display you expect it to be viewed on. That way, the message adapts to whichever screen size is used.
7 - Simplify!
Whenever possible, hide non relevant details in the layout for mobile devices. Different elements of your email such as image-based buttons instead of links may not always be visible or accessible, so keeping them for other platforms is easier. That way, an email can be opened on a desktop and the extraneous details shown there that weren’t seen on the mobile device.
