Responsive design in emails

Responsive design is an approach to web design that adapts to device type (i.e., desktop or mobile) and window size. For example, a responsive design might use a smaller text size on mobile devices than on desktop.

In the email editor, you can modify properties of the following content blocks differently for desktop and mobile devices:

• Images
• Icons
• Lists
• Menus
• Buttons
• Paragraphs
• Titles

Content block properties that you can modify for mobile are indicated by the Mobile label while viewing the email in mobile layout.

Adjust properties for mobile devices

To better control how your content appears on mobile devices, we recommend adjusting the Padding, Alignment, and Font Size for both mobile and desktop views:

1. Click the Mobile Preview icon in the upper left corner of the editor.
2. Click the content block in the row you'd like to optimize for mobile. The Mobile label appears next to content properties that you can change for mobile devices.
3. Make adjustments in the panel on the right. The options that appear vary depending on the element you're optimizing:
   • Font size: Make text appear larger or smaller on mobile devices.
   • Padding: Adjust padding. Click More options to adjust the amount of padding on each side.
   • Align: Adjust alignment for mobile.

After you apply changes for mobile only, the Mobile tag turns black to let you know that property is different for mobile devices. 

Create responsive layouts

If you want your emails to appear differently on mobile devices, we recommend creating two versions of your email rows. You can design one row for mobile and hide it from desktop, then design the other row for desktop and hide it from mobile.

For example, let's say you want a four-column row of images on desktop to appear as a 2x2 grid on mobile:

1. Create a four-column row for desktop and style it accordingly. In the Layout section of the CONTENT tab, click the mobile device icon next to Hide on to hide this row on mobile devices.
   
2. Below your four-column panel, create a new two-column row.
3. In the Layout section of the CONTENT tab, click the desktop icon next to Hide on to only hide this row on desktop devices.

Desktop view

Mobile view

Keep in mind that the more rows you add, the larger your email's size, which can cause clipping. Generally speaking, the simpler the email’s layout, the smaller its size. The size of an email with five rows will be larger than an email with two rows even if everything else (content, fonts, colors, etc.) is the same.

Our email builder also allows you to stack rows on mobile and make an image a percentage width of the screen size or set it to full width on mobile.