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:

adjust_image_size.png

To resize it, simply adjust it under the options tab, or re-size the actual image file and re-upload the image back in its place.

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:

alt_text_2.png

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.

example_link.png

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).

spacer_widget.png

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 cog:

click_cog.png

Click “Hide on mobile devices.”

hide_on_mobile.png

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

hide_message.png

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.

Have more questions? Submit a request