Responsive_Email_Layout___Cover_Image
20 December 2021

New Era of Mobile-Friendly Email Design, or How to Create a Responsive Email Layout with Stripo

Create a responsive email layout
Table of contents
  1. 1. ​​Hiding/enabling email elements on desktop and mobile devices
  2. 2. Design styles for email copy
  3. 3. Design styles for CTA buttons
  4. 4. Element alignments
  5. 5. Paddings 
  6. 6. Inversion of email elements for mobile devices
  7. 7. Responsive images
  8. 8. ​​Responsive email design
  9. Final thoughts
1.
1. ​​Hiding/enabling email elements on desktop and mobile devices

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. And we all stick to this golden rule — ensure that your emails are mobile optimized.

But did you know that responsive design goes way beyond the “fit to mobile screen” option? 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. 

How to do that with no coding skills — we will show below.

1. ​​Hiding/enabling email elements on desktop and mobile devices

Stripo allows you to hide some elements on mobile devices, and at the same time hide other elements on desktop devices. This means that you choose which elements will be shown on mobile devices, and which ones will be shown on desktop devices only.

There are a lot of reasons why you might need this option. For example, to hide some menu tabs on mobile devices to avoid horizontal scrolling, which might appear if you apply a large font size to the text. Or to hide a vertical spacer if you used it to visually divide elements that are placed in one row.

How to do it with Stripo:

  • click the element you want to show/hide for mobile devices;

  • in the Settings panel, you find the “Hide element” option;

  • click the “Mobile” or “Desktop” icon.

Responsive Email Layout_Hiding and Enabling Elements on Mobile Devices

Just to show you how it works, we built an email with spacers in between photos on desktop devices and disabled them for mobile devices.

How to Create a Responsive Email Layout_Desktop Version_with Spacers

(Desktop version, with spacers)

How to Create a Responsive Email Layout_Mobile Version_without Spacers

(Mobile version, w/o spacers)

Optimize texts in your emails to make them fully legible across all devices
Get started

2. Design styles for email copy

To make your email texts fully legible on any device, you might want to apply a font size to any piece of your copy that is larger or smaller than the same one on a desktop.

You can do it in the “Mobile Formatting” tab.

Responsive Email Design_Setting Mobile Styles with Stripo_No Code

In the “Mobile Formatting” tab, you can apply font size to:

  • header copy;

  • content copy;

  • footer copy;

  • info area copy;

  • menu tabs;

  • headings 1-3.

For the latter, you can also choose a necessary text alignment: Right, center, or left.

Mobile Optimized Emails_Working on Headings Styles

All these styles will only be applied to the mobile version of your email, and won’t affect the design styles you’ve set in the “General Settings” section, in the “Appearance” tab for the desktop version.

Just to show you how it works, we built a short email with a menu and a heading in it.

Desktop_Menu Font Size Is 12 Pixels

(Desktop, menu 14 px, heading 64 px)

Mobile_Menu Font Size and Headings

(Mobile, menu 18 px, heading 36 px)

3. Design styles for CTA buttons

There’s no need to say that CTA buttons are the key element in all emails as they allow users to take necessary action, direct them to our website, etc. It means we need to make them noticeable and easy-to-click.

In the “Mobile Formatting” tab, you can:

  • set a set a larger font for your buttons — in the Button text size control;

  • enable the “Full-width buttons” option to fit the button to the screen of a user’s mobile.

Mobile Optimized Emails_Button Width

By doing this, you ensure your buttons are noticeable and clickable on mobile devices.

Just to show you how it works, we built a short email with a CTA button.

Responsive Email Design_Buttons on Desktops

(Desktop, button font size 18 px)

Mobile Optimized Emails_Full-Width Button

(Mobile, button font size 22 px)

If you enable the “Full-width buttons” option, you can also set its top and bottom paddings, aka internal space between the border of the button and the text inside it.

Important

Currently, our dev team is working on the New version of the editor. The New Stripo will allow you to work on a design of a necessary version of your email — desktop, or mobile. To do so, you just switch to the necessary mode and perfect your email.

Give a try to the new version of the Stripo email editor now
Try out

4. Element alignments

Some elements might look good on desktop devices when center-aligned, but look bad on mobile devices. So you might want to set different alignments for certain elements on mobile and desktop devices.

How to do it with Stripo:

Please be advised that this option works for email elements like texts, buttons, videos, and images*. And never for entire containers, structures, and stripes.

  • click a necessary email element in your template;

  • in the Settings panel, you will see the “Mobile” icon;

Responsive Email Layout_Setting Alignment for Mobile Devices

  • click it to activate the settings for the chosen element;

  • pick a necessary alignment.

* The alignment option works only for those videos and images when there’s some space in the container left, like internal paddings. If the image or the video takes the entire container, the alignment option will not be active. 

Just to show you how it works, we center-aligned images for desktop and left-aligned them for mobiles.

Center Aligned Images on Desktop Devices_How to Build a Responsive Email

(Desktop, center-aligned images)

Left Aligned Images on Mobile Devices

(Mobile, left-aligned images)

5. Paddings 

Sometimes you want to make your email design “clean” with lots of white space. Sometimes you use paddings for containers and structures/rows to fill them in with a color background. This all looks good on desktop devices, but on mobile devices it just makes those elements look smaller, or may just a little bit worsen the way your email looks. 

So you may want to get rid of them for mobile devices.

Please be advised that paddings work for containers and structures.

How to do it with Stripo:

  • click a necessary element in your email template;

  • in the Settings panel, find the “Mobile” icon;

  • click on it to activate the settings for mobiles;

Setting Paddings for Mobile Devices

  • set the necessary value for your paddings.

Important

If you need equal paddings for all 4 sides around the element inside the structure, just set it once here:

Paddings for Mobiles_One Value for All Sides

And this value will be applied to all four sides of the element.

If you need to set different values for each side, please click the “More” button.

Setting Different Padding Values for Mobile Devices

Just to show you how it works, we set paddings for the desktop version of our email and set none for the mobile one.

Paddings Between Elements on Mobile Devices

(Desktop, paddings between two images in a row and in between rows)

Setting Paddings for Mobile Devices_Zero Value

(Mobile, zero paddings)

6. Inversion of email elements for mobile devices

Quite often you may see the following order of product cards in emails. 

Responsive Email Design_Email Elements Order on Desktop

Normally, email marketers use it to diversify their promo emails.

On desktop devices, these product cards look just amazing. But on mobile screens, they will not look good and can be even somewhat confusing as the element that is located on the left on desktop devices, on mobile screens will go above the element that is located on the right on desktops. This way recipients may see two product descriptions in a row, instead of a more logical order — product snippet, description, CTA button, product snippet, etc.

Here, you need to inverse the container order for every second row.

How to do it with Stripo:

  • click the “Structure” icon of a necessary row;

The Structure Icon

  • in the Settings panel, toggle the "containers inversion on mobile” button.

The Containers Inversion Button

That’s it.

Just to show you how it works, we enabled the “Inversion” option for one email and disabled it for the other.

The Containers Inversion Option OFF

(Mobile, the Inversion option off)

The Inversion Option On_Mobile Friendly Email Design

(Mobile, the Inversion option on)

This image illustrates that the description goes after the product snippet for all cards — the order we intended to see.

7. Responsive images

When designing responsive HTML email, the simplest function you can ever use is “Responsive image”

Having turned this option on, you will protect yourself from unnecessary horizontal scrolling and enormous logos. 

How to do it with Stripo:

Please be advised that this option is always ON by default. So, if you just want your image to fit to the mobile screen width, you do not do anything. Or you might want to just check if it’s really on. Of course, it is ;) 

Responsive Image_Option is ON

If you need your image, like logo or icon, to stay small on mobile screens, you might want to disable this option.

Disabling the Responsive Image Option for Mobile Devices

Just to show you how it works, we enabled and disabled the “Responsive image” option for the same email logo.

Responsive Image Option OFF_Mobile Design

(The “Responsive image” option ON)

Responsive Image Option ON_Mobile Friendly Design

(The “Responsive image” option OFF)

8. ​​Responsive email design

All the email templates that Stripo offers are fully responsive by default.

But you can disable this property for a certain email template of yours. We actually released this option upon users' requests. 

If you turn this option off, your email on mobile devices will look just like it does on desktop devices. There might or might not be horizontal scrolling, and for sure if there are three containers per row in a desktop version of your email, users will see the same quantity of them on mobile devices.

How to do it with Stripo:

Please be advised that by default this property is always ON.

  • in the Settings panel, go to the “General Settings” tab;

  • toggle the “Responsive design” button to disable this property.

The Responsive Design Option

Just to show you how it works, we enabled and disabled the “Responsive design” option for the same email.

The Responsive Design Option OFF_Creating Mobile Optimized Email

(Mobile, the “Responsive design” option OFF)

Responsive Design_Option ON_Stripo

(Mobile, the “Responsive image” option ON)

Final thoughts

As you can see, it does not require any coding skills to build a completely responsive HTML email. Experience yourselves and let your clients experience the new era of mobile email design.

Build mobile-optimized emails for your future campaigns 
Was this article helpful?
Tell us your thoughts
Thanks for your feedback!
0 comments
Type
Industry
Seasons
Integrations
Stripo editor
Simplify email production process.
Stripo plugin
Integrate Stripo drag-n-drop editor to your web application.
Order a Custom Template
Our team can design and code it for you. Just fill in the brief and we'll get back to you shortly.