Adaptability of mailings and widgets

Adaptive layout is an approach that involves changing the design depending on the user’s behavior, screen size, platform, and the orientation of the device. In other words, the page should automatically adjust to the best resolution, change the size of images, etc. This will eliminate the need for a new design for each new device appearing on the market.

Mailings

Our mailings are adaptive; they are displayed correctly on most modern smartphones.

However, there are a few exceptions, when in the process of testing you may notice the transfer of columns in emails on some models of smartphones with low-resolution displays. Luckily, we can easily fix this 🙂

The biggest sufferers were the Apple iPhone, whose screen resolution is lower than is widely used now (the 1334 x 750 Apple iPhone vs. the 1920 x 1080 (full HD) display of most modern smartphones), so some models of iPhone (and, rarely, some models of other smartphones) transfer the content, believing that it will not fit correctly on the display.

In fact, the mailing will fit perfectly on the screen, but we need to disable its adaptability.

Consider a block with two columns.

1. Open the HTML code of the columns.

2. Find class= “mail__two-c” and erase the two values (two columns – two values).

3. In the case of a block with three columns, look for class= “mail__three-c” and erase these three values (three columns – three values).

That’s all – adaptive layout is now disabled for the block with columns. You can send a test mailing and verify the result 🙂

Widgets

If you install a widget on your site that will be called by an event in JavaScript, it may not be responsive to mobile browsers, or it may stretch the page, or it may not display correctly.

To avoid this, just create a copy of the necessary widget

Change the size of the widget for mobile browsers, and in “On what”, select only mobile devices.