Regular Email Campaigns: Mobile view guidelines

Last Updated: Sep 10 2020 06:56 am UTC

Statistics show that every year even more people open their emails using their mobile devices, so you have to make sure that your story is being told the way you want it to be heard.

As you might know, there are some major differences when viewing campaigns on a web browser and on a mobile device. The reason is simple - not every device handles responsive code the same way. In this support article, we will share the best mobile view practices.

Here are a few tips on how to make sure that your campaigns will look great on a mobile device:

  • Keep the Subject Line short — Keeping your subject line under 40 characters (includes spaces) will ensure that your subscriber will be able to read all of it. 

  • Check on your columns —  Two, three, four-column blocks aren't a good look on mobile, which is why these blocks will be all stacked into one long, scrolling email unless you choose differently. Learn more about the do not split in mobile version feature here.

  • Keep your message short —  Less is always more when it comes to the mobile view. A couple of lines of text, a call-to-action button, and an image should do the work.  

  • Don’t make it too colorful —  We recommend no more than 5 color choices for a mobile view (not including black and white). Also, make sure that the color of your background is not the same as your text. 

  • Make sure that you have a Call-to-Action Button — It’s difficult to click on a hyperlink using a phone and it’s proven that a CTA button is more likely to be clicked, so make sure that you have one of those included in your campaign. 

  • Check on your image size — When uploading an image, it's size shouldn’t exceed 600px in width. This is especially important for mobile view as any campaign that exceeds 600px width might have display issues on mobile devices. Note that 2 columns of 600px images will result in 1200px width if the columns aren't split in the mobile version. The same goes for a 600px image that has any extra spacing (borders, padding) added - this will add extra pixels to the width of your template. Although you can use our image manager to crop any uploaded images, the best practice is to upload images that already have the needed proportions.

Testing your campaign by using the mobile view preview

In our Drag n` Drop editor, there is an option for you to see how your campaign will look on a mobile device or on a tablet. 

Click on the Preview message on mobile button, 

A pop up mobile phone will appear, where you’ll be able to see how your campaign will be displayed on a mobile device. 

This is where you can see the landscape view, tablet view, and desktop view. 

We highly suggest testing your campaign, before sending it to your subscribers.  You can do it by clicking the Send test email button at the top corner:

Extra features

There are a couple of extra features we offer in regards to a mobile view:

Hide in the mobile version — Check this box to hide the frame when the email is rendered on a mobile device.

Full width in mobile — Check this box to have your image stretched to 100% width on the mobile view.

Do not split in the mobile version — This option will keep the columns next to each other in the mobile version. Just so you know, not splitting columns into multiple rows might spread the content wider than the mobile device screen. To make sure email looks ok you can use a mobile preview option.

Was this article helpful?
What can we do to improve articles like this?

© 2010-2020 Mailigen. All rights reserved.