Skip to Content

6 tips for designing great responsive emails

With 90% of us regularly switching between their laptop, phone and other devices throughout the day, it’s more important than ever to make sure emails you’re sending not only work well on mobile, but across different devices, platforms and email clients too.

“Your emails are going to be far longer and need at least twice the amount of scrolling on mobile – so keep them short, and to the point.”

At Exemplify we design, code and test emails across all major platforms to ensure this, and here’s a short guide based on what we’ve learned along the way.

Grab your customers’ attention quickly

With customers checking their phones up to 150 times a day, and most emails being opened on mobiles, these brief interactions don’t give you long to get your message across. Keep your comms concise, think about mobile first (rather than as an afterthought once the desktop design is complete) and consider using responsive code to hide less relevant content when displayed on mobile.

Design layout in columns

This will allow your email to scale down effectively, from two columns down to one, when viewed on a narrower screen size. If you have an image on the left and text to the right of it, it’ll mean the text will be above or below the image, rather than beside it on mobile.

Font sizes

Think about users viewing your emails on smaller screens, and the font sizes needed to ensure they’re easily readable. Aim for a minimum point size of 13 and keep the amount of text to a minimum, using imagery, infographics and illustrations to help get your point across. It’s also worth thinking about scaling up (not down!) the point size for mobile, to improve readability on a smaller screen.

Email length

Your emails are going to be far longer and need at least twice the amount of scrolling on mobile – so keep them short, and to the point. Short introductory text to news articles giving the user a chance to tap and read more is far better than an email that goes on forever!

Make CTAs easy to use

Think about the size of your buttons on mobile, compared to the user’s thumb. Make as much clickable as you can (including images and headers) to make it as easy as possible to interact. If your email has a single call to action, don’t be afraid of repeating it, to save them scrolling to find the button.

Test, tweak, and test again

Use a device emulator such as Litmus or Email on Acid to test across different devices – what works on an iPhone with Apple Mail might not look right on Gmail, or vice versa. These tools will help you test and then adjust your design or code to make sure your emails look beautiful across different devices and platforms.