Responsive design for mobile devices

With more and more users viewing content on mobile devices, it is important to offer a good experience for mobile users. While designing your email template using the Visual Studio, you can use various component and row properties to view and control how the template renders on a mobile device.

Design using the Mobile View

When designing your template on the Content tab, use the toggle layouts option to view the template for desktops and mobile devices.

Using row properties

When you select a row on the Content tab, the properties for the row are displayed. When you use the Mobile View option to view the content, mobile specific properties for the selected row are displayed.

• Set the Do not stack on mobile option so that the columns in a row are not stacked on mobile devices.
• Set the Reverse stack on mobile option to control how the components of a row are stacked.
• Set Padding for the row.
• Set if the component is hidden on desktop or mobile devices.

The following example shows how a row with columns renders on desktop and mobile devices.

Using component properties

When you select a particular component on the Content tab, the properties for the component are displayed. When you use the Mobile View option to view the content, mobile specific properties for the selected component are displayed.

• For images, set the Full width on mobile option to set the image to take the whole width on a mobile device while setting a limited width on a desktop device.
• You can also set the Alignment and Padding for images.
• For text, select the Font size, Alignment, and Padding.
• Set if the component is hidden on desktop or mobile devices.

Preview for mobile devices

When you preview the template on the Data tab, select the Mobile option to preview the content for mobile browsers.