Structure Templates How-to
~ 7 min read
23490 views
rate it
03 June

How to Create a Responsive Email Layout

Stripo / Blog / How to Create a Responsive Email Layout

Adaptation of emails for mobile devices, also known as Responsive Web Design, is no longer a unique feature, but part of necessary functions. That is why when building a responsive email template with Stripo, you can use our library of ready-to-use responsive templates. And all the messages, based on them, will be correctly displayed on every device.

But it often happens that you need to solve an untypical problem to enable your email to render in a specific way on mobile devices. So, we want to talk precisely about the possibilities of adaptation.

Stripo-Responsive-Email-Design

1. Responsive image

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

Stripo-Responsive-Image-Option

Having turned this option on, you will protect yourself from the unnecessary horizontal scroll and enormous logotypes. The function adapts an image to the screen’s size, and prevent it from displaying outside.

Stripo-Display-of-Correct-and-Incorrect-Image

Important to note:

If you want your picture to be displayed in the same size both on the desktop and the mobile device, then you do not turn on the “Responsive image” option. But then your recipients might need to scroll horizontally to see the full image.

2. Hiding elements and modules on mobile devices

If you need to hide an element on mobile devices — you do not have to work on the HTML code to build responsive emails anymore — as now there is a simple function “Hide on Mobile Devices”..

Stripo-Hide-on-Mobile-Devices

Having turned this function on for one of the blocks, you literally forbid this element to be displayed on a mobile version of the email.

The right part of the screenshot shows that in order to speed up the loading of an email we hid a GIF-animation for mobile devices, though we did not hide it for desktop devices which you can see in the left part of the screenshot.

Stripo-Hide-AnimationAlso, you are able to hide not only complete rows and modules, but also separate elements of the menu, as well.
Stripo-Hide-on-Mob-Devices

The “Hide on Mobile Devices” option was implemented to only one tab of the menu. The other 4 perfectly well fitted in the mobile screen width.

Stripo_Make Responsive Email Template_Building Menu

3. Hiding modules on desktop devices

Not only can you hide elements on mobile devices, but you can also 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.

For example, once you hide a GIF-animation for mobiles (as shown on the example above, as uploading this element could take some time, and as we know, making recipients wait for an email to upload has a negative impact on conversion), you add a static image to show to your mobile users. In this simple way, you provide all recipients with important information on the image, but it will not affect the loading speed for mobiles.

In fact, you can implement this combination for vairous reasons. Small fonts for copy over images for desktop and large fonts for copy for mobile devices for better legibility:

Stripo_Make Responsive Email Template_Hiding Elements on Desktop Devices

Another reason is  embedded interactive elements like image carousel work on desktop devices only, and when such email gets opened on mobiles, recipients can see the primary (the first) image only. This means, that the rest 3-5 images will go unseen on mobile devices. So, here's what you should do:

  • you "hide" your image carousel on mobile devices;

Stripo_Designing Responsive HTML Email on Mobile Devices

  • you build a new module with all the images that you included in the image carousel element, and hide this module on desktop devices;

Stripo_Designing Responsive HTML email_Hiding Elements on Desktop Devices

  • that's it.

Try Stripo Out

4. Setting fonts and buttons

To make your emails legible across all devices, you can set fonts for copy and buttons for mobiles individually.
To do it, you need to:

  1. go to the “Appearance” tab;
  2. open the “Mobile View” section.

Stripo_How to Build Mobile Responsive Emails with Stripo_Mobile View Settings

When building responsive emails with Stripo, you are also able to set the size for the headings — this means you can set different sizes for copy itself and the headings H1, H2, H3, as well.

Set the text size for buttons, where the preferable one is 18 or bigger, never less.

To make CTA buttons noticeable on mobile devices, we need to work on their width, as well. Toggle the "Full-width buttons" option to let your buttons fit the screen size on mobile devices.

Stripo_Building Resposnive Emails_Full-width Buttons

Important to note:

The font size, the headings size, and the button text size that you set in the "General Settings" when you only start building your emails are applied to all these elements when the email is opened on desktop devices. The parameters you just set here are applied to emails on mobile devices only. 

Try Stripo Out

5. Custom Setting of Fonts

Sometimes, standard settings for designing responsive HTML email are not enough. For instance, your brand book says that only "Arial, 15px" should be applied to the menu and header modules on mobile devices, but editors offer only standard 14px and then 16px. This leads to the necessity of working with the HTML code for responsive emails. But do not let these trifles scare you.

You just need to understand where exactly in the code the adaptability is located. This is simple — open the email code editor and go to the CSS tab.

Here, you can see the whole table of styles, but the most interesting things start after the line “@media only screen and (max-width: 600px) {“ – this is the very beginning of adaptability.

Find the necessary section — "Menu" and "Header" in our case — and replace "14px" with "15px".

Stripo_How to Create a Responsive Email Template_Working with HTML Code

Do the same to other email elements if necessary.

Important!

Do not erase anything from this code.

6. Email elements inversion for mobile devices

When building products content modules, we may inverse some elements of those modules. We normally do it to diversify emails. 

Stripo_Buidling Responsive Email Template_Inversion for Mobile Screens

But on mobile screens, it will not look good and can be somewhat confusing as the element that is located in the left on desktop devices, on mobile screens will go above the element that is located to the right on desktops. Which is why many marketers just prefer sticking to regular elements order: product snippet, description, price, CTA button.

To make responsive email template and to diversify your email design with Stripo, you need to:

  • drag a two-column structure in your email template;
  • build your product content module;
  • toggle the "containers inversion button".

Stripo_Responsive HTML email_Toggling the Inversion Button

Important to note:

Conversion can be enabled for 2-column structures only.

Conclusion

In these 6 simple steps, a completely responsive HTML email is ready. 

If you have any further questions or concerns, please, feel free to email us at: contact@stripo.email.

Try Stripo Out

Be always wide awake in recent email marketing news, guides, articles and how-to’s