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.
To make your emails fully legible across any device, you can apply font sizes to headings, to regular copy, to buttons, etc., that differ from the desktop version of your email. You can also work on internal paddings inside containers and hide/disable certain elements on mobile devices.
This possibility allows you to build more mobile-friendly engaging, and high-quality emails of any complexity in no time, with no coding skills.
How to tune the Mobile view?
open an email template you want to tune;
go to the "Appearance" tab;
open the "Mobile Formatting" section.
Important to note: the following settings will only work in the mobile version of the email template in email clients which support media queries.
If the "Mobile Formatting" section is inactive, go to the "Appearance" → "General Settings" menu and toggle the "Responsive design" control.
If you turn this option OFF, your email on mobile devices will look just like it does on desktop devices.
apply font sizes to headings H1, H2, and H3 and to different stripes (header, content, footer, and info area);
customize the "Menu" items font size;
set button text size. 18px or higher is the most optimal size here;
enable the "Full-width buttons" option to fit the button on a user’s mobile screen;
add the "Content margin" to the full email template if you desire, or do it separately for each side;
The result of the "Mobile preview":
Let's talk about advanced mobile settings:
All emails that you build with Stripo are responsive by default. However, you can disable responsive design for some email elements.
The simplest function you can ever use when designing responsive HTML email is "Responsive image".
Turning this option on will protect yourself from unnecessary horizontal scrolling and enormous logos.
Moreover, you can disable the "Responsive structure" option for structures with 2 or more containers. In this case, you will see containers located in one row on mobile devices.
Important to note:
- Enabling this 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.
While building an email template, you will be shown a mobile icon. This means that you can adjust the element for the mobile display by clicking on it.
For example, configure padding for the mobile view:
Or set an alignment for the mobile view:
The default values for the desktop version of email templates are used for mobile view. So if you are not going to use the same padding or text/image/button alignment, click on the "Mobile" icon and set the padding/alignment which you like.
If you want to hide some elements on mobile devices, you don’t have to cope with HTML code anymore as now there is the "Hide element on mobile" option in the Stripo editor.
With this option on, you literally forbid certain elements to display in the mobile version of your email.
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.