How to Create a Responsive Email Layout

Kyrylo Kholopkin
How to Create a Responsive Email Layout
4.4 (88%) 5 votes
How to Create a Responsive Email Layout
December 1, 2017 | 1,813 views

Adaptation of messages for mobile devices, also known as Responsive Web Design, is no longer a unique feature, but a part of necessary functional. 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 as it often happens, you need to solve an untypical problem connected with a display on a mobile device. 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! 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.

One more thing to remember! In case, the size of your picture is pretty small, then “Responsive image” option should be off, otherwise, the small picture will be widened to the size of the message.

2. Hiding blocks

If you need to hide an element on mobile devices — you do not have to work on the HTML code for 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 the image to be displayed on a mobile version of the message.

In the right screenshot, it is shown how, in order to speed up the opening of a message at a low speed of internet, the animation, which you can see in the left screenshot, was hidden.

Stripo-Hide-Animation

Also, you are able to hide not only complete blocks but separate elements of the menu as well.
For this reason, the “Hide on Mobile Devices” option was implemented for every tab of the menu. Thus, you can decide what to show on small screens, and what to hide.

Stripo-Hide-on-Mob-Devices

 3. Setting fonts and buttons

Separately, you can set fonts and buttons for the mobile devices.
To do this, you need:
1. go to the “Appearance” tab
2. open the “Adaptability” block

Stripo-Customizing-Fonts

In order to create the most comfortable appearance of your letter, you are able to edit the size of the text and headings — you can set different sizes for the text itself and the headings H1, H2, H3.

The situation with the buttons is a little more interesting: here, besides the size of the text, you are able to choose the display of the button which would fit the width of the screen and choose the necessary aligns.

Stripo-Full-Width-Button

4. Adaptation for Gmail App

One of the most popular mail clients for smartphones is Gmail App.
Google developers try to make its usage as convenient as possible, but paradoxically, it causes some difficulties with composing a message out of the app or its web version.

On Stripo, you can use the function “Adapt for Gmail App”, in order to prevent any possible difficulties which may occur with the display of your message.

You need:
1. go to the “Appearance” tab
2. turn on the “Adapt for Gmail App” option

Important! The use of old versions of Gmail App may cause an incorrect display of your newsletters.

Stripo-Adapt-for-Gmail

5. Custom Setting of Fonts

Standard settings for adaptability are not always enough. This leads to the necessity of working with code of the message. But do not let these trifles scare you.

Firstly, you need to understand where exactly in the code the adaptability is located. This is simple — open the editor of the message and go to the CSS lab. 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.

Stripo-CSS-Tab

Important! If you want a beautiful message for a mobile device — you should not erase anything from this code.
Here in the example, you must get the next result:

Stripo-Results-You-can-Achieve

The problem was in the text, which on the promo-code and the button next to it inherited the size of the general text. This feature, when displayed on mobile devices, ruined the design of the message.

Stripo-Customizing-Fonts

The decision can be written in just two lines of the code. In the beginning, you should add class “text-m-small” to the tag which contains the whole text. Thus, you will let us know that it should be applied to the text, making is small on mobile devices.

Stripo-Decreasing-Text-for-Mobile

And in the CSS tab, right after the line “@media only screen and (max-width: 600px) {“  add the following code:
“ .text-m-small {
font-size: 10pt !important;
}”.

This code sets the 10 points size, which allows turning the broken and unbeautiful block into a correct one:

Stripo-Results-You-Achieved

 6. Regulating Indents

When adding links to the social nets, a problem may occur: all the links may move to the right or to the left. This happens due to the option “Indents between icons”:

Stripo-Indents-Between-Icons

Apply indent to all the icons, and in order to create a proper display of social icons:

Stripo-Indents-Between-Icons

Stripo-how-to-Achieve-Correct-Display-of-Icons

You should remove the indent of 30 pixels to the right after the last icon:

Stripo-Erasing-Indent

This way, all the icons will be displayed right in the center of the screen:

Stripo-Achieve-Correct-Display-of-Icons

 7. Replacing the image for mobile devices

As it was written above, in order to achieve a correct display of the image on mobile devices, it would be enough to turn on “Responsive Image” option. But what should you do if the text on the banner looks really small?

The only possible way out of this situation is to draw one more banner precisely for the mobile devices. Of course, you can crop the existing bigger banner, if its size allows you to. But the quality of your newsletters and customers’ interest will be higher if you add some efforts to draw another banner.

So now you have two banners, which perfectly fit both the desktop and mobile versions of your newsletter. Now let us decide what to do with them.

There are two ways of uploading a separate banner for the mobile devices:
1. use the instruction below
2. wait a little, and upcoming Stripo’s updates will let you do it within two clicks.

Let us take a look at the way 1. Firstly, as usual, you need to add a new stripe and place two blocks with images in a row in it. Into the block 1 you upload the image for the desktop version, and into block 2 – add the image for mobile devices.

This will make your message look a bit weird:

Stripo-Working-on-Replacing-Images

Following manipulations will take place just inside the stripe with the images.

We need to create two classes: the first one will describe the behavior of the image for mobile phones, and the second one — for computers. Let us name “mobile-view” and “desktop-view”.

We need to find tag, which contains each image, it will look like this:
“<td class=”esd-block-image es-p20b” align=”center”>”

Inside the class part, we write down necessary tags and receive this code:

Stripo-Making-Chamges-inCSS-Code-

Then, it becomes pretty easy- we move to the CSS tab, and do like we did in abstract where we changed the text size, we have to find line “@media only screen and (max-width: 600px) {“ .

Right above it, we add the following code:
“.mobile-view {
display: none;
}“

This way we prohibit to display the elements with class “mobile-view” on computers and make the message look normally:

Stripo-Proper-Display-on-Computers

Now we need the proper banner to be displayed on the phone. Go the bottom of the CSS code and add code:
“    .mobile-view {
display: table-cell !important;
}
.desktop-view {
display: none;
}”

Due to this code, miracles happen: elements with “mobile-view” class will be displayed on mobile devices in normal mode, and elements with “desktop-view” class will not be displayed on mobile devices at all.

Now we receive the message, in which different images are used for computers and smartphones. And readability is kept on all devices:

Stripo-Correct-Display-both-on-Computer-and-Mobile-Devices

Conclusion

In 7 simple practices, a completely responsive HTML email is ready. Stripo does an ongoing work on improving and simplifying this process. And in the nearest future, you will have an opportunity to make a responsive email template from scratch without even opening the Code Tab, and the quantity of the necessary steps for creating responsive untypical elements will significantly decrease.

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