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.
Important to note: the following settings will only work in the mobile version of the email template in email clients that support media queries and if you activated the "Responsive design" control in the "General Styles" → "Global Styles and Layout" menu.
Mobile customization in the "General Styles" menu :
In the "Global Styles and Layout" 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.
Additionally, you can see Default Styles control:
This control defines whether system-generated CSS from the Appearance settings is applied to an email or template in the editor.
By default, the control is set to ON, and system styles are automatically applied when no custom HTML/CSS is present. In this case, all Settings panel controls are visible and fully functional, and users can navigate between Message Settings tabs.
If custom HTML/CSS is inserted into the email, the editor will switch to a custom code mode. The Default Styles control is automatically set to OFF, and no system CSS should be injected into the code editor. The editor will display only the exact HTML/CSS provided by the user.
If you manually switch the Default Styles control back to ON, the system will insert a dedicated “Default CSS” section into the code editor and inject the default styles generated from Appearance. Standard styling behavior is then restored.
If no custom code is inserted but the you manually turn Default Styles OFF, all system-generated CSS will be completely removed from the template.
For emails migrated from the old editor that already contain custom HTML/CSS, the new editor preserves the custom code, keeps Default Styles set to OFF, avoiding injecting system styles.
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.
Stripe settings for the mobile display:
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.
Structure settings for the mobile display:
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.
Important to note:
- Enabling the "Responsive Structure" option may help to improve the mobile view display. However, notice that results may vary on different devices;
- Please be careful with this option; if one of the containers contains a non-responsive image with a large size or font size for the text, this can cause a horizontal scroll.
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.
Please be informed, you can apply the "Containers Inversion" function if you have only two containers in a structure.
Moreover, there is a possibility to tune Padding on Mobile.
And hide a structure using the "Hide element on Mobile" option.
Container settings for the mobile display:
Here in the "Settings" menu, you can tune Padding on Mobile and hide the container for the mobile view.
Block settings for the mobile display:
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.