Responsive email design comes as no surprise today, as we all know that mobile-friendliness, aka mobile optimization, is no longer just nice to have, it’s a must.

We're happy to introduce the long-awaited feature of Mobile view directly in the editor. Since then, you have had an opportunity to manage the mobile view directly in the template, and switching to a separate page for the mobile preview is unnecessary.

This possibility allows you to build more mobile-friendly, engaging, and high-quality emails of any complexity in no time, with no coding skills.

To switch between desktop and mobile versions, use the "device" toggle on the top toolbar:

Furthermore, you can set parameters for the whole email template, Stripe, Structure, Container, and Block, which will apply to the mobile view of your email template.

In the "General Settings" menu, we can set up Default Structure padding, which will be used by default for all new structures added to email from the Content tab placed on the left side of your working space or while adding new Stripes (rows);

And set up margins around the Message.

In the "Headings" menu, you can apply the font size, text alignment, and line height for different headings by choosing a necessary one, text style, and font color.

In the "Buttons" menu, you can set the font size inside the buttons.

And adjust buttons to the container width, as well as apply the necessary padding.

In the "General Styles" → "Stripes" menu, you can set default font sizes for Header, Content, Footer, and Info area types except for headings. And configure the line-height:

Furthermore, you can customize each stripe separately in case you have multiple content stripes but want to have different configurations for them.

To do that, select the needed stripe, and the corresponding stripe settings menu will open on the left, where you can tune "Padding on Mobile" to add more space around the stripe.

And hide a stripe only for mobile view using the "Hide element on Mobile" option.

Please remember that you can hide any element of your email template.

Regarding the Structure settings, you can control "Containers Gap on Mobile" to add extra space between containers.

All emails that you build with Stripo are responsive by default. However, you can disable responsive design for some email elements.

The "Responsive Structure" option helps to locate containers within a structure one below the other for mobile view.

The desktop version of the structure with 2 containers:

The mobile version of the structure with 2 containers:

The mobile version of the structure with 2 containers with disabled "Responsive Structure":

In this case, we see two containers on the mobile device in one row.

If you set the "Containers Inversion" for the responsive structure, then the mobile device will display containers in reverse order.

Mobile view with activated "Container Inversion":

Now we see that the picture with a boy in a yellow sweater has moved to the bottom.

Moreover, there is a possibility to tune Padding on Mobile.

And hide a structure using the "Hide element on Mobile" option.

Here in the "Settings" menu, you can tune Padding on Mobile and hide the container for the mobile view.

For the "Image" block, you can apply the "Responsive image" option, which allows the image to adjust to the width of the mobile device's screen. Adaptivity only works on devices that support it.

Turning this option on will protect you from unnecessary horizontal scrolling and enormous logos.

You can apply alignment, paddings, margins, and font sizes for all other blocks.

Remember, you can hide any element on your mobile devices by enabling the "Hide element on mobile" option.

Thank you for taking the time to read our articles. We hope you will find this information helpful.

​If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.