Мобильная оптимизация email: что ломается и как это починить

Семь из десяти email открывают на телефоне. Но большинство писем по-прежнему проектируют на десктопе, тестируют на десктопе и утверждают, глядя на монитор. Потом удивляются, что подписчик удалил письмо через полторы секунды. В этом руководстве - конкретные приёмы, которые делают email читаемым на экране 6 дюймов.

Почему мобильная оптимизация уже не опция

По данным Litmus за первый квартал 2026 года, 71% email открывают на мобильных устройствах. В B2C-сегменте эта цифра доходит до 78%. Оставшиеся 22-29% приходятся на десктоп, причём доля веб-клиентов (Gmail, Yahoo Mail) продолжает расти за счёт нативных приложений вроде Outlook для Windows.

Это не новость. Мобильный трафик обогнал десктопный ещё в 2017-м. Новость в другом: разрыв продолжает расти. Каждый год доля мобильных открытий увеличивается на 2-3 процентных пункта. К концу 2026-го в отдельных нишах - ecommerce, фитнес, доставка еды - мобильные открытия перевалят за 85%.

При этом средний маркетолог верстает письмо, глядя на 27-дюймовый монитор. Тестирует, отправив себе на рабочий Gmail в Chrome. Утверждает у руководителя, который тоже сидит за десктопом. Письмо выходит на аудиторию, и 78% получателей видят совсем не то, что утверждали.

Проблема не в незнании. Все понимают, что мобильная оптимизация важна. Проблема в последовательности: дизайн начинают с десктопа и надеются, что «адаптируется». Не адаптируется. По крайней мере, не так, как вы ожидаете.

Одна колонка - не ограничение, а фундамент

Двухколоночная вёрстка на экране шириной 375 пикселей превращается в кашу. Колонки сжимаются до 180 пикселей каждая, текст становится нечитаемым, изображения обрезаются. Если в CSS прописана перестройка колонок в стопку через media query - лучше, но не все email-клиенты их поддерживают. Gmail для Android, например, поддерживает media queries с 2020 года. Outlook для Android - нет.

Одноколоночный макет решает эту проблему в корне. Контент располагается линейно: заголовок, текст, картинка, CTA. Никаких боковых панелей, сайдбаров, плавающих блоков. На десктопе одноколоночное письмо шириной 600 пикселей выглядит собранно и чисто. На телефоне - остаётся таким же.

Если бизнес требует многоколоночный блок - допустим, сетку товаров - используйте гибридную вёрстку. Это подход, при котором колонки задаются через inline-block и max-width, а не через таблицы или float. На широком экране блоки стоят рядом, на узком - перестраиваются в стопку автоматически, без media queries. MJML и Maizzle генерируют такой код из коробки.

Кнопки и ссылки: палец - не курсор

Площадь контакта подушечки пальца - примерно 10×10 мм. На экране iPhone 15 это около 56×56 CSS-пикселей. Кнопка размером 30×30 - это промахи, случайные нажатия на соседние элементы и раздражение. Apple Human Interface Guidelines рекомендуют минимум 44×44 пикселей для touch target. Google Material Design - 48×48. Берите 44 как абсолютный минимум.

Это касается не только CTA-кнопок. Текстовые ссылки в теле письма тоже являются touch target. Если две ссылки расположены в одном абзаце с расстоянием в четыре слова, на телефоне нажать на нужную будет трудно. Решение: давайте ссылкам достаточно пространства. Выносите их на отдельные строки, если возможно. Увеличивайте padding вокруг кликабельных элементов.

Отдельный вопрос - кнопка отписки. По требованиям Google и Yahoo с февраля 2024 года она и так должна быть заметной. Но на мобильном ещё важнее: если подписчик не может попасть в кнопку отписки, он нажмёт «Спам». А жалоба на спам бьёт по репутации домена в десятки раз сильнее, чем отписка.

Типографика на маленьком экране

iOS автоматически увеличивает текст мельче 13 пикселей. Это называется text size adjustment, и маркетологи сталкиваются с ним постоянно: мелкий текст в футере или дисклеймер внезапно раздувается и ломает макет. Способ борьбы - -webkit-text-size-adjust: 100%. Но правильнее просто не использовать текст мельче 14 пикселей. Для основного контента - 16px и выше.

Заголовки на десктопе выглядят эффектно в 36 пикселях. На экране шириной 375 пикселей такой заголовок из пяти слов растягивается на четыре строки и занимает половину первого экрана. Подписчик скроллит, скроллит - и понимает, что под заголовком ничего интересного. Для мобильных достаточно 22-26 пикселей. Используйте media query или задавайте размер в em, чтобы заголовок масштабировался.

Межстрочный интервал - 1.5 минимум. На мобильном глаз быстрее устаёт, и плотный текст сливается в серое пятно после первых двух абзацев. Если ваша рассылка содержит больше трёх абзацев, увеличивайте межабзацный отступ до 20-24 пикселей. Это не расточительство пространства - это воздух, который позволяет читать.

Изображения: вес, формат, fallback

Средняя скорость мобильного интернета в России - около 25 Мбит/с. Звучит достаточно. На практике в метро, на парковке, в лифте скорость падает до 1-3 Мбит/с. Письмо с тремя баннерами по 500 КБ каждый загружается пять секунд. Подписчик не ждёт пять секунд. Подписчик закрывает письмо и переходит к следующему.

Целевой вес письма с изображениями - до 800 КБ суммарно. Для промо-рассылки с одним hero-баннером - до 300 КБ на картинку. Сжимайте через TinyPNG или Squoosh. Используйте JPEG для фотографий, PNG для графики с прозрачностью. WebP поддерживается в Apple Mail и Gmail, но Outlook его не отображает - нужен fallback через background-image или <picture>, который, впрочем, тоже работает не везде.

Указывайте width и height для каждого изображения в HTML-атрибутах. Это предотвращает layout shift - дёргание макета при загрузке картинок. И обязательно style="max-width:100%; height:auto;", чтобы картинка не вылезала за границы экрана на узких устройствах.

Письмо без картинок должно быть понятным. Если вы убрали все изображения и смысл потерялся - вы построили рассылку на песке.

Preheader: вторая тема письма

На мобильном preheader виден всегда. На десктопном Gmail он занимает одну строку справа от темы. На iPhone - целую строку под темой. Это удваивает текстовое пространство для привлечения внимания, и большинство маркетологов его тратят впустую.

Если preheader не задан, почтовый клиент подтянет первые символы из тела письма. Обычно это «Откройте в браузере», alt-текст логотипа или навигация типа «Главная | Каталог | Контакты». Такой preheader говорит подписчику одну вещь: вам не было важно, что он увидит.

Оптимальная длина preheader - 40-130 символов. Короче - и клиент дополнит его текстом из тела. Длиннее - обрежется. Preheader должен дополнять тему, а не дублировать её. Тема: «Скидка 30% на весеннюю коллекцию». Preheader: «Только до воскресенья. Бесплатная доставка от 3000 р.» - конкретика, которая подталкивает к открытию.

Скорость загрузки: невидимый убийца конверсий

Gmail обрезает HTML тяжелее 102 КБ. Ниже тела письма появляется ссылка «Показать полностью», и большинство подписчиков на мобильном её не нажимают. Ваш CTA в конце письма? Его не увидят.

Вес HTML раздувают встроенные стили. Email-верстальщики вынуждены инлайнить CSS, потому что Gmail вырезает тег <style> из head. Каждый элемент получает полный набор стилей, и для письма с двадцатью блоками HTML легко раздувается до 120-150 КБ. Выход - минификация и удаление дублирующихся стилей. Инструменты вроде email-comb или встроенные оптимизаторы в MJML справляются с этим автоматически.

Ещё один источник лишнего веса - трекинговые пиксели и UTM-параметры. Каждая ссылка с развёрнутым UTM занимает 100-200 символов. Двадцать ссылок - это 2-4 КБ только на URL. Используйте сокращение через редирект или конфигурируйте UTM на стороне ESP.

Тестирование на реальных устройствах

Эмулятор - не замена телефону. Litmus и Email on Acid показывают рендер в десятках клиентов, и это полезно для массовой проверки. Но они не покажут, как письмо ведёт себя при скролле, насколько удобно нажимать кнопку большим пальцем и как выглядит текст при ярком солнце на экране с минимальной яркостью.

Минимальный набор для тестирования: iPhone (Safari Mail), Android с Gmail, Android с Samsung Mail. Эти три покрывают 70-80% мобильной аудитории. Если бюджет позволяет, добавьте Outlook для iOS и Yahoo Mail для Android - они рендерят HTML иначе, и баги всплывают именно там.

Проверяйте тёмную тему отдельно. На мобильных устройствах тёмный режим включён у более 60% пользователей. Белый логотип на прозрачном фоне в светлой теме - нормально. В тёмной теме он исчезает. Белый текст на светлом фоне, который клиент инвертировал, - тоже классическая поломка. Тестируйте оба режима.

Пять ошибок, которые ломают письмо на мобильном

Оптимизация бесполезна, если письмо не дошло

Можно сделать идеальное мобильное письмо: одна колонка, крупные кнопки, лёгкие картинки, продуманный preheader. Если 15% базы - невалидные адреса, письмо всё равно не сработает. Высокий bounce rate снижает репутацию домена. Низкая репутация означает попадание в спам. Письмо в спаме - это письмо, которого не существует, каким бы адаптивным оно ни было.

Мобильная оптимизация работает на уровне контента и дизайна. Валидация базы работает на уровне инфраструктуры. Одно без другого теряет смысл. Адаптивное письмо, отправленное на чистую базу, - это максимум доставляемости и читаемости одновременно.

Мобильная оптимизация отвечает за то, чтобы письмо было удобно читать. Валидация базы отвечает за то, чтобы его было кому читать.

Регулярная проверка базы - раз в месяц для активных списков, раз в квартал для сегментов с низкой активностью - снижает bounce rate до уровня ниже 2%. Это порог, который Gmail и Yahoo считают приемлемым. Выше - начинаются проблемы с доставляемостью, и никакая мобильная оптимизация их не компенсирует.