“Thinking about design is hard, but not thinking about it can be disastrous” – Ralph Caplan
Wondering how to get perfect, mobile-responsive email design?
Designing for the small screen comes with specific rules that improve readability while guiding people towards the key calls-to-action. In this article, we’ll cover the most important rules about responsive email design you need to know.
Read on to learn about:
- Mobile-friendly layouts
- Font types and sizes to use
- Design elements that work for email
- How to make it easier for yourself
Okay, let’s dive in.
Using the Inverted Pyramid
When you’re designing for the small screen you need to keep your layout simple, clean… and to the point (pun intended).
A great go-to is the Inverted Pyramid structure. This means that you start with a bold image or header that fills the whole width of the email, followed by a narrower image, header, title or button that draws the eye towards the centre of the email, and finishing with your CTA, usually a button or link, which is even narrower (and also centred).
In other words, the design is like an upside-down triangle pointing straight to the final CTA.
Incorporate Plenty of White Space
Make the email easy to skim even on a dinky screen by including plenty of white space in your mobile layout.
Stick to One Column
For mobile devices, it’s best to stick to single column layouts of no more than 500 – 600 pixels wide. Your emails will a) fit properly in the screen without scrolling sideways and b) they’ll be much easier to read that way.
Keep things as concise as possible. Put your key design elements high enough up in the email so that people can see them quickly, including (most importantly) your CTA. You don’t want your recipient to have to go looking for the point of the email – they should see the main CTA or key deal without scrolling.
Make sure you use a font size of at least 13 or 14 pixels. This is the absolute minimum that iPhones, for example, can cope with, so if you go smaller they’ll autoscale up your font which can interfere with your layout.
No matter what size of screen you’re using, it’s best to stick to Sans Serif fonts. These are clearer to read on screens, while Serif fonts are better for print. This is particularly important when you’re expecting people to be squinting at a small phone screen.
Other Design Elements
Links and Buttons
In responsive email design, all your links and buttons should have a minimum target area of 44 x 44 pixels to fit with Apple’s guidelines. It’s really important that you don’t ‘stack’ links, as in squishing lots of links next to each other, as people will find it tricky to click them on touchscreen devices.
Keep it Simple
Don’t stuff mobile emails with too many details, buttons, links and so on. It’s easy to include things like social sharing buttons in desktop displays on an email, but on a small screen the clutter makes it hard to navigate.
Use Small Image Sizes
Keep load times to a minimum by using small size images. If people are on 3G or don’t happen to have great signal this can seriously slow down your email load time, causing people to give up quickly and click back out of them. If you’re worried about what this will do the quality of the images, you may be able to use responsive coding so that images automatically load smaller on mobile devices while the full-size ones show up on desktops.
Keep Preheader Content Short and Compelling
Preheaders add important detail to your email subject line that tells recipients what to expect from the email and (done right) encourage them to open it. Think carefully about how to make this copy enticing – and make sure it displays right on mobile by keeping these between 40 and 70 characters.
Final Thoughts: Making it Easy
Unless you’re a confident coder, setting up mobile-responsive email design can be very tricky to get right. Look out for an email marketing platform that offers easy to use templates or wireframes, while automating the process of adapting the design to different-sized screens.
Ready to get started?