Designing mobile-friendly emails

With more and more people on mobile devices, it’s more critical than ever to keep mobile in mind as you create your emails. Below are some tips and tricks you can use when creating your own templates so you can stay ahead in the mobile inbox game and keep your subscribers interested.

Note: It’s not possible to edit an email just for mobile or just for desktop. Instead, you are creating one email that will be rendered differently in both apps.

Email clients read messages from left to right

HTML items will always stack from left to right. This means your content blocks will stack from left to right. If you create an email with an image on the left and then add a text block to the right of that image, then the image will appear above that text in mobile. In addition, it’s always best to keep your design simple and clean, keeping the smaller screen in mind.

Keep your email width to no more than 650 pixel

This is the width that works for most email clients and mobile devices. If an email is wider than 650 pixel, then a horizontal scroll bar may need to be used in order to view your message. This not only makes your message hard to read, but it may cost you an unsubscribe due to a less than stellar experience.

Image width should be from 400 to 650 pixel

An image at 400 pixel wide is the minimum needed in order for it to display full width on a mobile device. To see how large your image is, click the image in the designer and view the size in the Options tab:


Images on mobile devices will show as the actual file size, even if you tried resizing the image in the email designer. To resize the image on mobile, you need to resize the image file and then re-add it to your campaign. 

Remember, it's always better to scale a larger image down than it is to scale a smaller image up.

Use Alt Text

ALT text is a great tool to use as this text will be visible in case a subscriber has images blocked. To add ALT text to your image, click on the image in your campaign and add 1-2 words into the “Info” field under the options tab:


Use image blocks instead of inserting an image into a text block

Text content blocks containing an image and any links inline with that image will not be clickable in Outlook 2007 or Outlook 2013 (see image below). In addition, text may not wrap correctly around your image when viewed in mobile.


Use the spacer widget to create white space around content and images

The use of padding around an image or content to create whitespace will force your content to become narrow when viewed on some mobile devices. Instead, use the spacer widget in the drag-and-drop designer and set it to hide on mobile if desired (more info below).


Leverage the “hide on mobile” feature

This feature will hide non-essential elements (aka clutter) in your email when they are viewed on a mobile device. This will improve the experience for your subscribers and keep them opening.

To hide an item from mobile, simply click on that block and click the gear:


Click “Hide on mobile devices.”


When you hover your mouse over that element in the designer, you will see this:


Experiment with preheader text

Set yourself apart from the rest of the emails in your subscriber’s inbox and entice them to open your email. Learn more about adding a preheader text to your email here

Test your email

Use the Desktop preview and send yourself and your colleagues a test email to view on different mobile devices. You can also use our compatibility preview feature to test your email in various email clients.

Was this article helpful?
9 out of 26 found this helpful

Have more questions? Submit a request

Start free trial