Адаптивность рассылок и виджетов

Адаптивная верстка — подход, предполагающий изменение дизайна в зависимости от поведения пользователя, размера экрана, платформы и ориентации девайса. Другими словами, страница должна автоматически подстраиваться под разрешение, изменять размер картинок и т.д. Это позволит устранить нужду в разработке дизайна для каждого нового устройства, появляющегося в продаже.

Рассылки

Наши рассылки адаптивны, они корректно отображаются на большинстве современных смартфонов.

И всё же бывают исключения, когда в процессе тестирования вы можете столкнуться с переносом колонок в рассылках, на некоторых моделях смартфонов с низким разрешением дисплея, но мы это легко сейчас поправим)

Самыми большими страдальцами оказались Apple iPhone, разрешение экрана у которых ниже, чем сейчас широко используется (1334×750 у Apple iPhone против 1920×1080 (Full HD) в большинстве современных смартфонов), поэтому некоторые модели iPhone, и (редко) модели других смартфонов, переносят контент, считая, что он некорректно поместится на дисплее.

На самом же деле рассылка прекрасно поместится на экране, но нам требуется отключить у них адаптивность.

Рассмотрим блок с двумя колонками.

1. Открываем у колонок HTML код.

2. Находим class=»mail__two-c» и стираем два значения (две колонки — два значения).

3. В случае блока с тремя колонками ищем class=»mail__three-c» и стираем три значения (три колонки — три значения).

Всё — адаптивная верстка отключена для блока с колонками, можно отправить тестовую рассылку и убедиться в результате 🙂

Виджеты

Если вы устанавливаете на сайт виджет, который будет вызываться событием в JavaScript, он может быть не адаптивен под мобильные браузеры, растягивать страницу или некорректно отображаться.

Чтобы этого избежать — достаточно создать копию нужного виджета.

Изменить размеры виджета под мобильные браузеры и в пункте «На чем» выбрать только мобильные устройства.