Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

Adapt an Email for Mobile Devices

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

According to Global Digital 2020 report, published by Hootsuite, 50.1% of Internet traffic comes from mobile devices. This means that mobile versions of websites and emails are a prerequisite for high conversion rates.

UniSender service enables you not just to adapt emails to mobile devices, but also to create a separate   mobile  version of the email. Here we explain to you how to configure different email building blocks to create mobile-friendly layouts.

Optimizing images for mobile

The width and placement of images in the mobile and desktop versions vary.

Images  in the mobile version should be displayed responsively, depending on the screen width or height. So, they need to be adjusted in size.

To resize images for mobile version, click on the image block.

There are 3 parameters in the block settings that affect the image view.

Adjusting image width. Move the slider to change the picture size. The screen resolution on your mobile device will also change.

The slider shows the size in percentage and in pixels

The slider shows the size in percentage and in pixels

Auto width. Click this option and the picture will take up the maximum width property. It is used both for the desktop and mobile versions.

The picture takes up 65% of the full width of the email, but if you select "Auto width", it will always take up 100% of the email space

The picture takes up 65% of the full width of the email, but if you select "Auto width", it will always take up 100% of the email space

Full width on mobile. Select this option if you want the picture not to be fully displayed on the PC, but to take up full width on mobile devices.

Picture on the PC takes up 45% of the full width, while on mobile devices it is 100%. This is only possible if you select "Full width on mobile"

Picture on the PC takes up 45% of the full width, while on mobile devices it is 100%. This is only possible if you select "Full width on mobile"

Collapse menu

There is a Menu block in UniSender service. It is used to duplicate a website menu in the email. If you don't switch the menu to mobile version, it will look like this on your smartphone:

Menu is broken, the Free Books item is moved to the second line

Menu is broken, the Free Books item is moved to the second line

To fix this, go to the Menu block settings and turn on the Collapsible Menu. Here's what it looks like:

On the PC, the menu looks the same as before — as a list of items. But on the mobile device, it is displayed as a collapsible sidebar that opens with a click.

On the PC, the menu looks the same as before — as a list of items. But on the mobile device, it is displayed as a collapsible sidebar that opens with a click.

In the Collapsible Menu section, there are 5 block design  settings:.

  1. You can adjust the icon size by selecting size options from the drop-down menu.
  2. The icon can be rounded or normal.
  3. The color of the stripes in the collapsible menu is set using the palette or HEX code in the Foreground Color parameter.
  4. The color of the collapsible menu block itself is set in the Background Color parameter.
  5.   A preview of the collapsible menu block is always available in the settings block. You can see what this block will look like.
Click on the Collapsible Menu and change its settings

Click on the Collapsible Menu and change its settings

Align Fly Pages

You can also customize  mobile device layout for  a block of several images  in a row. By default, these rows are adaptive: each new block on mobile will automatically be placed under the previous one.

Three fly pages in a row. This is how they are displayed on desktop PC

Three fly pages in a row. This is how they are displayed on desktop PC

Images, texts, and buttons are placed under each other

Images, texts, and buttons are placed under each other

Adaptivity can be disabled. Then, blocks on a mobile device will be not under each other, but in a row. You can do this by using the parameter  setting  Disable Adaptivity for Mobile Device in the Row Properties.

Adaptivity is disabled, so the buttons slightly "jump".

In some cases, this is useful: for example, when you need to compare several products with each other. But it is usually the default adaptivity that is more suitable for emails.

Adaptivity is disabled, so the buttons slightly "jump".

Adaptivity is disabled, so the buttons slightly "jump".

Hide blocks in the mobile version

Some blocks in the mobile version are displayed poorly and take up too much space. Other blocks, such as the Call button, are useless in the desktop version.

For this purpose, each block in UniSender new service has a Hide option. It is available in the Block Properties at the very bottom.

In the editor, create 2 buttons and mark for each one where to hide it — the first one on mobile device, and the second one on PC

In the editor, create 2 buttons and mark for each one where to hide it — the first one on mobile device, and the second one on PC

You can choose which blocks to hide on your PC or on a mobile device.  In one line, you can put 2 blocks: one can be displayed only on desktop PC, and the other — only on mobile device.

In the example, we demonstrated it  with the order button. In the preview mode, you can see that each version has different buttons.

Please note that each version has its own button. And the editor has two buttons

Please note that each version has its own button. And the editor has two buttons

Configure the Call Button

Each link when clicked can work in several ways: to  lead the user to the website, to bring the user to the email creation form, to trigger a phone call  or send SMS.

In the mobile version, you can set up a callback, rather than a click-through to a website. This works well if the website is not adjusted for mobile view and there is someone to answer the phone call.

To set up the Call Button, select Call Link Type from the  drop-down menu. If you want a person clicking on the button to go to the website, set the Open Link.

The Go to Store button will lead to the store website. In the mobile version, you can add the Call Button to contact customer service directly

The Go to Store button will lead to the store website. In the mobile version, you can add the Call Button to contact customer service directly

Switching the order of blocks on mobile

When adapting an email to smartphones and tablets, blocks are read from left to right by default.

adapting an email

This means that if you have two blocks in your email: on the left - with an image, on the right - with text and a button, then on its mobile device, the user will first see the image, then the text, and finally the button.

When flypages or other content are staggered in the email, the standard website adaptation for mobile devices will disrupt the logic of content submission.

The standard way to adapt an email to mobile devices. The text and Buy-button on the second product happened to be above its photo

The standard way to adapt an email to mobile devices. The text and Buy-button on the second product happened to be above its photo

To switch  the order of blocks when adapting an email to mobile devices, use the reverse order function for the blocks. You can enable it for each line separately. This will help to correct the sequence of blocks in our example.

To select reverse order, click on the desired line and turn on the mode "Reverse order of blocks on mobile device" in the properties.

Reverse order of blocks on mobile device

Now blocks in the selected line of the email will be displayed on a mobile device in the reverse order, that is, from right to left.

Using the reverse order of blocks for the second line, we have restored the common logic of content submission

Using the reverse order of blocks for the second line, we have restored the common logic of content submission

 

 

Оцените, на сколько вам показалась полезной статья «Adapt an Email for Mobile Devices»
(0)

Did we answer to your question?

0
0