Design for Mobile – Made Easy

Create a great user experience on mobile devices

We're big believers in delivering a fantastic user experience on mobile devices. The reason is simple: about half of all email campaigns are opened on phones or tablets. If email messages contain hard-to-read labels, distorted images, or a wonky layout, the results are predictable. Users won't interact with your CTA.

A clean mobile presentation is vital and expected. That's why we offer a unique design-for-mobile canvas. Quickly configure, preview, and tweak mobile-friendly text, containers, images, and more. Load messages into your campaign queue with confidence, knowing your email is optimized for a mobile audience.  

Designing mobile appearance

To begin, expand the Mobile Formatting tab to display mobile-only design tools. You can set the font size for headers, content, footers, text blocks, and horizontal alignment. To add a dash of polish, tweak content margins for the mobile version of your messages. 

To open the Mobile Formatting tab: 

1. Go to the Design page.
2. Click the Appearance tab. 
3. Scroll down the page and click Mobile Formatting.

Designing mobile content

Which one is more important for long-term email campaign success, subject lines, or great content? 

We say both. 

That's why we've assembled an amazing toolkit to help you optimize every piece of mobile content, from the subject line to the footer and everything in between. Here's a quick overview. 

Elements

Customize your CTA button. Set text size and colors. You can even enable full-width display if you want. 

Use the Hide element tool to create and display mobile-only content or configurations.  

1. Go to the top of the Design page.
2. Click the Content tab.
3. Click the canvas element you want to hide on mobile devices.
4. Go to the Hide element tool.
5. Click the desktop icon.

Block alignment

Customize block alignment for mobile devices. 

1. Select a block on the canvas.
2. Click the Mobile Alignment icon in the settings panel.
3. Click an alignment. 

Padding

The default values for desktop and mobile versions are the same. If you require unique padding for blocks (e.g. text, images, buttons): 

1. Select a block on the canvas.
2. Click the Padding icon in the settings panel. The heading changes to Mobile Padding.
3. Adjust padding.
4. Click the More toggle to customize settings for top-bottom and left-right. (optional)

Responsive structure

Normally, you'd enable the responsive setting for images. That feature automatically adjusts images for different screen sizes.

In some situations, you might want to disable the responsive setting for the structure that holds the images. 

Here's an example. We have two structures. The top structure has one image block. The bottom structure has two image blocks. We enabled the responsive setting for both images and structures.

The below screenshot shows the mobile result. All three images are stacked vertically.

Here's another example. 

We disabled the responsive setting for the structure (but enabled the responsive setting for images). The mobile result is visually more compelling.

Caution

If a container has a larger non-responsive image (or larger font if working with text), the device creates a horizontal scroll and wonky layout.