独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

How to Create a Responsive Email Layout

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 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.

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 the unnecessary horizontal scroll and enormous logotypes. The function adapts an image to the screen’s size, and prevent it from displaying outside.

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.

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”.

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.

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.

Separately, you can set fonts and buttons for the mobile devices.

To do this, you need:

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.

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:

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

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.

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 reach the next result:

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.

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.

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:

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”:

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

You should erase the indent of 30 pixels to the right from the last icon:

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

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:

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:

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:

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:

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:

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.

Add a comment

What is your view?

Send

Related posts:

6 Common Mistakes Developers Make and How to Avoid Them

These might be small and seemingly insignificant in the wider scheme of things, but added together, they compound and create a codebase...

What formulas are used to Calculate the BMR?

AllCalculator.net BMR Calculator helps estimate a person’s BMR value per activity level. However, before the Calculator, some formulas were used to determine the values of BMR. It is the widely used…

Convolutional Neural Network and Regularization Techniques with TensorFlow and Keras

This GIF shows how the neural network “learns” from its input. We don’t want the neural network to pick up unwanted patterns nor do we want the neural network to miss out on the obvious patterns. We…