mobile-friendly email design

How to create perfect mobile-friendly emails?

5 min read

There are no two ways about it. Today’s digital consumer is accessing more mobile content than ever. In fact, studies show that emails opened on mobiles have shot up by 100% since 2011 – today, 61% of us open our emails on a mobile.

So what does this mean for mobile designers? Think of it from a user point of view. How many times have you had to awkwardly shift your finger around a screen trying to read all the content, or simply not been able to click?

The answer to this lies in a mobile-friendly layout. It’s not rocket science – just a few simple best practices to improve your user experience. Next time you launch an email campaign, keep these top tips in mind.

Use a single-column template

Remember: your user will be scrolling through content on a skinny, portrait screen. Make sure all elements are stacked neatly beneath one another, with a scaling of around 320 to 55px. Bear in mind also that clickable content should not be too close together. Add padding between elements so that thumbs don’t go awry.

Slide to the left

Nine in 10 mobile users are right-handed, so design your emails accordingly. This means all prominent content should be on the left-hand side, leaving the user a blank space to scroll with his/her thumb along the right-hand side. The industry term for this is “left-flushing”.

Use appropriate font sizes

Your text needs to be bold and engaging – we don’t want readers zooming in with their fingers and thumbs. Aim for no smaller than 22pt for all headings, and 14pt for text. Likewise, this is no time to write War and Peace. Use no more than five lines per paragraph, and ensure they’re appropriately spaced for easy scrolling.

Optimise your images

You should always use high-quality images to improve your user experience, but be wary of their limits. You can compress these files using a third-party tool or a built-in tool with your chosen mail client.

Likewise, you need to define the maximum width of the image. Leave this untouched and you leave yourself open to cropping issues – not a good look.

Don’t go crazy with the features

While a million GIFs, images and multiple columns sound like fun on paper, they’re a nightmare for mobile experience. For starters, they may slow down the loading time or simply not render altogether. For a mobile-friendly layout, keep it restricted to a few appropriate images and evenly spaced text/headers.

Give those CTAs the spotlight they deserve

These are your conversion triggers, so highlight them! Use borders, underlining or highlights to bring your users’ attention to any clickable links. For buttons, use bright colours, readable fonts and adequate padding.

Your calls to action need to be easy for users to tap. Make sure they stand out from the rest of the content, and position them in relevant places. Always highlight the benefits of clicking, such as “buy now for free delivery”!

Follow these tips and your next campaign will be a mobile-friendly one.

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email