Skip to main content
All CollectionsEmail BuilderEmail Builder Articles
Responsive Design with Email Builder
Responsive Design with Email Builder

Unlock the power of our Email Builder's features for stunning mobile email designs

Keith Gentile avatar
Written by Keith Gentile
Updated over a week ago

In this help article, we'll dive into the essential principles of responsive design, focusing on how emails adapt across various devices. With our Email Builder, users gain control over their email layouts, from column stacking to column reordering for optimal display on mobile screens. We'll also explore the functionality of "Hide on" toggle buttons for selectively hiding content on desktop or mobile. Lastly, we'll emphasize the significance of utilizing the preview function to ensure your design is ready for both desktop and mobile devices.

Stacking of Columns Within a Structure

Stacking columns within a structure refers to the arrangement of content columns in a vertical stack rather than side by side. This adjustment is crucial for optimizing the readability and usability of email layouts on smaller screens, such as mobile devices. With our Email Builder, users can easily define the stacking order of columns within their email templates, ensuring the content remains visually appealing across all screens.

Under the master Content tab and when a Structure is selected, you will get a series of settings to control the style of your email. Scroll down towards the bottom until you see Responsive Structure. By default (if you haven't changed your global settings), it should be toggled on. Having this setting on, our builder will automatically adjust mobile views, forcing the stacking of columns. Otherwise, your columns will remain side by side, forcing users to pinch their mobile screen with their fingers to view or read the content within your email.

Preview of Desktop vs Mobile

In the mobile view, the columns stack on top of one another. This re-formats content to it is more suitable to the device's width.

Containers Inversion on Mobile

As mobile devices continue to dominate email consumption, it's important to ensure that your email designs are not only responsive but also optimized for user engagement. Whether it's prioritizing visuals over text or rearranging content for better readability. Our builder's feature of Containers Inversion on Mobile allows you to tailor your email layouts for maximum impact on smaller screens. In the example below, it's shown that on desktop, it makes sense to have the copy on the right of the image, but for mobile, it probably makes more sense to lead with the copy. Where Responsive Structure controls the stacking of columns within a structure, Containers Inversion on Mobile allows you to control how the columns stack on smaller screens.

Under the master Content tab when a Structure is selected, scroll down towards the bottom until you see Containers Inversion on Mobile. By default, it should be toggled off unless you edited your global settings beforehand. If you want to invert the columns within your structure, toggle the setting on.

Preview of Desktop vs Mobile

In the mobile view, the columns will not only stack on top of one another. When this setting is toggled on, the columns within the structure will be inverted. In this example, users will now see and can read the content first, which will lead them to the visual they are about to view.

Hiding Content on Either Desktop and Mobile

In today's digital landscape, catering to the specific needs of different devices is key to delivering an impactful email experience. In the screens below, we'll show our builder's "Hide on" toggle buttons, which grant users granular control over content visibility on desktop and mobile devices. Whether you're implementing sophisticated design strategies or simply tailoring content for optimal viewing, our builder's intuitive interface empowers you to seamlessly manage which elements appear on larger screens, smaller screens, or both.

Under the master Content tab, when a Structure is selected, scroll down towards the bottom until you see Hide Element. It will be set to "No" by default. If you only want to show this structure on the desktop, then select the desktop icon. If you only want the structure shown on mobile, then select the mobile icon. Depending on what you select, you will see a small orange icon in the corner of the structure or container if you are focusing on a section within the structure. One represents desktop, and the other represents mobile.

Preview of Desktop vs Mobile

In the mobile view below, you can see I selected to hide the structure completely. When you preview your design, you will be able to see the differences between the two views.

The Importance of Using Preview

In our app, we've integrated a powerful preview feature that allows members to visualize their email designs seamlessly on desktop and mobile platforms. This feature is essential for ensuring that your email looks polished and professional before hitting the send button. By previewing your email in both desktop and mobile formats, you can catch any potential formatting issues or layout discrepancies early on.

It's also important to test your email before sending it. It's recommended that you test your email on desktop and mobile. If you want to take it further, try sending your test to different email platforms and phones, i.e., view the email in Gmail and MacMail and review it on an iPhone and Android phone.

Preview of Desktop vs Mobile

Making sure your email looks good on desktop and mobile is important, considering how many viewers these days are viewing your email on smaller devices. Our Email Builder allows you to view both desktop and mobile previews.

Did this answer your question?