Mobile friendly emails

Research shows that around 70% of people read their emails in a mobile app. And yet, when it comes to branding and email design, everything is created on a desktop.

Here, we'll look at some best practices for designing email campaigns for mobile. But before we get to that, you need to know how to get a mobile preview of your emails in Copilot.cx

How to see a mobile preview of your emails

In the Copilot.cx Email Editor, you can toggle between desktop and mobile previews in the bottom-left corner.

This lets you play around with elements like images and text, with a live look at how it's going to appear on different devices.

Responsive email design and how it works

Responsive email design is all about adjusting the way your content appears depending on the size of the screen.

In Copilot.cx, most of this happens automatically, including:

• Shrinking column widths for text boxes
• Adding line breaks to headings
• Resizing logos and images

But when you click on an email element and switch to the Mobile tab in the side panel, there are a couple of extra settings you can play with manually:

• Container padding – choose how big you want the border to be around your content
• Hide on mobile/desktop – hide elements altogether to make your mobile design cleaner and easier to read

Two tips to help with your mobile email designs

We've covered the basics of responsive email design. Now it's time for a couple of top tips to take your email campaigns to the next level.

1. Avoid images with too much detail

We've already covered the fact that Copilot.cx resizes your images for mobile. But if your image is super detailed or contains small text, there's a risk that people won't see it.

As a general rule, it's always best to avoid busy images with lots going on. Instead, go for something bold and emotive that communicates one clear message. That way, you can be confident it'll work, whatever the size.

2. Remember that every mobile screen is different

When previewing your emails on mobile, it can be easy to get sucked into perfecting every detail.

For example, you may have an awkward line break in your heading like this:

Rate our app. It only takes a
second.

In these cases, it can be tempting to rewrite the copy until the break looks more natural. But by adding an extra word, you only create another awkward line break for wider screens.