Adjusting the Responsiveness of Your Email

Details

Being able to adjust the 'responsiveness' of an email means you can change how the email is displayed on ('responds' to) smaller screens. In this guide, we'll walk you through making adjustments to various email components, so you can manually control whether they become responsive when viewed on a mobile.

The following components in our drag & drop email builder have responsive adjustments available...

• View online
• Header
• Paragraph
• Text
• Buttons
• Footer
• Event
• Videos

How-to Guide

Making an Email Full-Width on Mobile

1. Create a new email or open your existing message for editing in our drag & drop email builder.
2. On the Design tab, ensure the Full width on mobile checkbox is enabled.
   
   This will remove the padding on the sides of the email (as shown below)...
   
3. Save your email, then use the email preview function to check how it looks on a mobile.

Making an Image Full-Width on Mobile

1. Create a new email or open your existing message for editing in our drag & drop email builder.
2. Add a Paragraph component to your email and set the image.
   Paragraph and Text components are the same thing. A text component simply doesn't have the image and button turned on by default - but you can toggle these on and off over on the right side (in the settings area).
3. Over on the right settings area, ensure the Full width on mobile checkbox is enabled.
   
   This will make that image full-width when viewed on a mobile (as shown below)...
   If you set the image's width to be around 300px (or larger), you may not visually notice any changes when enabling this setting - because it's already wide enough to be considered 'full width' on a smaller screen.
4. Save your email, then use the email preview function to check how it looks on a mobile.

Making a Button Full-Width on Mobile

1. Create a new email or open your existing message for editing in our drag & drop email builder.
2. Add a Button component to your email (or, if you're using a Paragraph / Text component, enable to Call to action option).
   Paragraph and Text components are the same thing. A text component simply doesn't have the image and button turned on by default - but you can toggle these on and off over on the right side (in the settings area).
3. Over on the right settings area for the button, ensure the Full width on mobile checkbox is enabled.
   
   This will make that button full-width when viewed on a mobile (as shown below)...
   If you set the button's width to be around 300px (or larger), you may not visually notice any changes when enabling this setting - because it's already wide enough to be considered 'full width' on a smaller screen.
4. Save your email, then use the email preview function to check how it looks on a mobile.

Responsive Settings for Tables and Images in Text (And Paragraph) Components

Responsive formatting changes the way an email's code (known as HTML code) is rendered. When an element in an email design is told to be 'responsive', the element gets coded slightly differently when viewed on a smaller screen. One such example is with tables and images. Let's take a look...

Responsive Tables (Inside Text)

Keep in mind that you've got minimal horizontal space to work with on a mobile screen - so wide tables (or tables with lots of columns) won't display very well on a small screen. As such, using tables in emails isn't usually recommended. Bulleted lists can sometimes be a suitable replacement for tables. Read more.

When made responsive, tables will display "one cell per row". The problem with this is that each cell in each row is generated from left to right - resulting in a table that is very difficult to understand (as shown below).

When viewed on a regular screen, the table (below, on the left) appears as intended. However, when set to become ‘responsive’ and viewed on a smaller screen (below, on the right), the table almost becomes unusable. It’s nearly impossible to work out what cell goes with which heading, which can lead to data misinterpretation.

When using tables, it’s generally best to ensure the component is NOT responsive. This will not add responsive code to the component and thus, will ensure the table is displayed as a regular table. Let's take a look how to set this...

1. Create a new email or open your existing message for editing in our drag & drop email builder.
2. Locate the component that contains your table.
3. Over on the right settings area, ensure the Content is mobile responsive checkbox is turned off. This will disable responsive code on the component.
   
4. Save your email, then use the email preview function to check how it looks on a mobile.

Responsive Images (Inside Text)

Similar to the way tables change when made responsive, images inside text (not attached to the component, but rather inside it - as per this guide) are displayed differently too.

When made responsive, images inside text are converted to a "block", meaning nothing can sit beside the image (below, on the left). Disabling responsive display (on the component that contains the images) will ensure they appear correctly (below, on the right).

1. Create a new email or open your existing message for editing in our drag & drop email builder.
2. Locate the component that contains your image(s) inside the text area.
3. Over on the right settings area, ensure the Content is mobile responsive checkbox is turned off. This will disable responsive code on the component.
   
4. Save your email, then use the email preview function to check how it looks on a mobile.