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.
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.
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.
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.
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:
To fix this, go to the Menu block settings and turn on the Collapsible Menu. Here's what it looks like:
In the Collapsible Menu section, there are 5 block design settings:.
- You can adjust the icon size by selecting size options from the drop-down menu.
- The icon can be rounded or normal.
- The color of the stripes in the collapsible menu is set using the palette or HEX code in the Foreground Color parameter.
- The color of the collapsible menu block itself is set in the Background Color parameter.
- A preview of the collapsible menu block is always available in the settings block. You can see what this block will look like.
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.
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.
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.
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.
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.
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.
When adapting an email to smartphones and tablets, blocks are read from left to right by default.
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.
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.
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.