Ошибки адаптивной верстки

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

В этой статье мы расскажем что именно «ломается» чаще всего, и как это исправить, чтобы итоговая рассылка выглядела идеально на всех устройствах и в любом почтовом клиенте.

Чтобы помочь вам создавать безупречные адаптивные рассылки, наш редактор автоматически проверяет код на соответствие требованиям мобильных устройств.

Если в вашем письме возникнут проблемы с адаптивностью, например, контент будет выходить за пределы экрана или некорректно масштабироваться, редактор немедленно предупредит вас об этом. Вы увидите специальное уведомление:

1. Изображения

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

Решение: Устанавливайте ширину в процентах, в этом случае изображение займет всю ширину контейнера и обеспечит масштабирование изображения в зависимости от ширины устройства.

2. Кнопки

Проблема: Кнопка может не помещаться на экраны мобильных устройств по нескольким причинам: Ширина кнопки выставлена в пикселях, текст слишком длинный и не помещается в строке.

Решение: В мобильных версиях используйте относительную ширину (в %).

Следите за длиной текста. Если он очень длинный, он может поломать отображение кнопки. Лучше использовать короткие призывы к действию и избегать длинных фраз.

3. Текст

Проблема: Слишком большой шрифт, длинные слова и неразрывные пробелы между слов, могут не давать адаптироваться письму.

Решение:

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

4. Блоки с несколькими колонками

Проблема: Колонки в письмах реализуются с помощью таблиц. Если их неправильно настроить, они могут некорректно отображаться на мобильных устройствах — «разъезжаться», «сжиматься», либо вообще исчезать.

Решение: Используйте специальную настройку в редакторе, чтобы переносить колонки в мобильной версии.

Для этого кликните на блок с несколькими колонками (в мобильной версии письма), а затем на боковой панели перейдите в раздел «Колонки», там необходимо включить функцию «Переносить колонки друг под друга».

💡 ㅤЕсли дизайн не предполагает перенос колонок в мобильной версии письма, функцию можно отключить. Но для контента внутри колонки возможно потребуются корректировки ширины.

Используйте простую структуру таблиц и инлайновые стили	Многие почтовые клиенты, особенно устаревшие или менее стандартизированные, лучше работают с таблицами и инлайновыми стилями, чем с современными CSS-системами или сложной вёрсткой.
Следите за размерами изображений и текста на мобильных устройствах	При просмотре на маленьких экранах изображения и шрифты могут стать слишком большими или маленькими, что ухудшает читаемость и восприятие.
Тестируйте письма во всех популярных почтовых клиентах	Разные почтовые клиенты (Gmail, Outlook, Apple Mail, Yahoo и др.) отображают HTML-верстку по-разному. Что выглядит хорошо в одном — может искажаться в другом.
В случае необходимости используйте условные комментарии для обхода специфических ошибок	Перед отправкой — оптимизируйте HTML, чтобы размер файла был минимальным. Маленький размер письма ускоряет его загрузку и повышает вероятность успешной доставки.