Stripo provides flexibility for creating a mobile version of your email. There is a set of tools that allow you customizing the appearance of text, buttons and other elements on smartphones. This is especially true for creating a more attractive and accessible layout of the email content.

Let us look at common use cases of creating the mobile design, and see what techniques can be applied to make the mobile version more attractive and accessible.

In Stripo, we can enhance the mobile view by changing the position of containers or hiding content.

We can often see a design with two containers when there is an image and a text block beside it in one row. It can be an excerpt from a blog or a news report.

If the text is too long, it will not have enough width on the mobile view and will stretch in height:

For such cases, you should enable Responsiveness for the structure. The text will be placed below the image, where there will be more space for it:

Result:

But what if the text block is placed to the left of the image? In the responsive view, the right container is placed below the left one, causing the text description to appear above the image.

For this purpose, we have the "Containers Inversion on mobile" control, which changes the order of containers in a structure:

Result:

Stripo editor allows you to hide some content for either the desktop or the mobile view. This is especially useful if we have several containers on one row and we don't want them all stacked vertically one after the other.

For example, you might have 4 product cards in a row. On the responsive view, each card will take its own row:

But how to make it so that two cards are in each row?

First, we ought to turn off responsiveness for the structure. Then we hide the last two containers with cards, using the control "Hide element". We will create a separate non-responsive structure for these two cards and then hide it for the desktop view. It should look like this:

As a result, we will get 4 cards in one row on the desktop, while on the mobile view, we will have two rows of two cards each:

Hiding containers can be useful if you want to leave some areas empty.

To leave any space unfilled, you can add the block Spacer and enable the dynamic option.

For example, I can add a structure with three containers, and then add the dynamic spacer to the left container:

This empty area will be visible on the mobile view. Hence, I should hide the whole container with the spacer by using the control Hide element:

Result:

When a row of containers has images and text of different sizes, it could happen that the containers will have different widths on mobile if the Responsiveness for the structure is disabled:

This issue is explained by the way browsers and mobile clients adapt content to mobile screens. They use an algorithm by which the width of a mobile screen is allocated among the content, to make sure each of the content cell has enough space to fit the screen. This leads to the result when images have different sizes on mobile, especially when the text below them is different too.

The current solution to this problem involves manual editing of the code.

Note: We strongly recommend that you use this solution only if you have basic knowledge of HTML and CSS.

To make containers look the same on mobile, we ought to set their width in percentage.

First, let's create a CSS rule for the width:

As you can see, I've set the width to 49% of the total screen width (for each container). This leaves us 2% of the width for a gap between the two containers.

This style must be added inside the rule @media (inside its curly brackets), as in the screenshot:

The next step is to add the newly created class custom to both table cells that have the class esdev-mso-td, as shown in the screenshots:

As a result, our containers will have the equal width on mobile:

This way, you can, for example, align three containers by adding a width of 32-33%.

If you need to set different widths for two containers, for example, so that one container is twice as big as the other one, then you ought to create two CSS classes, e.g.:

.custom1 { width: 32% !important; }

.custom2 { width: 66% !important; }

Add these classes to different cells beside the class esdev-mso-td.

Images make emails more vibrant and eye-catching. To make images look good on the mobile view, you can adjust their appearance using the Stripo tools. Let's look at a few examples.

A large, full-width banner looks great on desktop devices. However, such a banner will shrink on mobile, making its small details barely visible.

The solution is to use a separate, shortened banner. To do this, you ought to add a second banner and hide it for the desktop view. The main banner must be hidden for the mobile view:

Now both versions have a more appropriate banner:

A similar problem can occur with background images. Since a background image does not adapt to the mobile view, then it will be truncated there. Hence, you should use a neutral image that would look good even when cut down.

The tool Position can be applied to align the background image to one of the sides. We use words left, center, and right as well as top, center, and bottom for that purpose.

In my example, I’ve added the words center and top to the following fields:

As a result, the background image will look attractive on mobile as well:

I would like to note that using a picture as a background is not always a good option. For example, the Outlook email client has some problems displaying background images.

I would like to advise you to read our article for more details.

If we use a responsive image and text in a non-responsive structure, the image might be too small when viewed on smartphones:

It can be fixed in the same way as in the case of two banners. We should use two non-responsive images, one for the desktop and the other one for mobile:

Result:

It is important not to make the mobile image too big so that all the content can fit in the width of the mobile screen.

The same solution can be applied if we want to do the opposite and make some images smaller. We can just make a smaller copy of it for the mobile version.

Sometimes we have to change the relative position of elements on the mobile view. For this purpose, we can add individual paddings and alignment just on mobile.

If you have a structure with several containers and need some gap between them on mobile, you can toggle on the control Padding between containers:

It automatically adds a 20-pixel padding below each container except the last one. However, if your content also has its padding, then there will be too much space between the containers:

In this case, it is better to remove the extra paddings. Click on the smartphone icon while setting the paddings and then add different values there:

Result:

If a text contains line breaking, then the distribution of words among text lines may not look good on the mobile view. In my example, the word trends stays on a separate line:

There are two ways to fix it.

I can move the word Webinars down to the next line by adding more text block padding. I ought to click on the smartphone icon while setting the padding:

Result:

Or I can select the first text line with the mouse and use the tool Line wraps to prevent words from being wrapped on a new line:

Result:

Please, be careful with the tool Line wraps. If we apply it to a long text line, the text will not fit on the mobile screen.

Sometimes it happens so that left-aligned elements do not look good enough on a mobile screen:

Therefore, they can be separately centered on mobile. In the case of headings, we can go to the Mobile formatting tab:

Otherwise, we ought to select an individual content block and click on the smartphone icon in the alignment menu:

Result:

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.