Optimizing Emails for Mobile

Emails designed within the Ascent360 editor are mobile-friendly and responsive to various device sizes. To ensure that your email renders exactly how you expect on all devices, use the features and best practices below when designing emails.

Desktop and Mobile Preview

desktop_mobile.png

Use the toggle in the upper left corner of the designer to switch between Desktop and Mobile views of the email while in the designer. This is a quick way to sanity check the spacing, margins, and display of content on large and small screens.

Mobile Stacking

By default, rows with multiple columns will stack vertically on mobile devices, working from left to right. See the below screenshots for examples for how a multi-column row will render on desktop and mobile. 

Desktop
Mobile



Stacking occurs row by row. If you intend for content elements to be visually grouped together on mobile, ensure that the content elements are contained within the same row.


Buttons, text, and images on the same row
Buttons on a different row than the text and images


Do not stack on mobile

The Do not stack on mobile row setting allows you to decide when to override the default stacking behavior. 

The option is available in the right panel as a row property, toggled off by default.

donotstackonmobile_new.png

Email design best practices suggest a careful use of this display setting. A user-friendly vertical layout on mobile makes sense in most cases. As always, it is up to you and your creativity when and how to use this option.

Default Mobile Stacking Behavior
Do not stack on mobile toggled on

Reverse stack on mobile

In some cases, the columns stacked on mobile can work better in a reversed order.

reverse_sidebar_on.png

 

66a0a3df-8978-4479-9f43-94f879dbbef2.png

2b358297-7c98-4235-91ec-03b01cd63eef.png

This is how these two sections render on mobile by default.

Here is how the email layout renders when columns are stacked in reverse order.

Hide Content on desktop/mobile

All content blocks in the editor include a Hide on setting in the property panel. To use it, scroll down until you see the Block options section.

You can check the result by going into the Preview and selecting the Mobile view. You will see that the content blocks for which Hide on has been turned on will not be visible.

hide_mobile_on.png