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 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.

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.

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.

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.

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.

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.

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.

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.