Письма читают с телефона — и это меняет всё
Большинство людей открывают письма на смартфоне. Доля мобильных открытий в среднем по индустрии превышает половину, а в некоторых нишах значительно больше. Это означает, что письмо, которое вы видите на широком мониторе в редакторе, и письмо, которое получает ваш читатель на экране шириной 390 пикселей: две разных истории.
Первое, что страдает при переходе с десктопа на телефон: многоколоночная вёрстка. Два или три блока рядом хорошо смотрятся на большом экране. На телефоне они либо сжимаются до нечитаемой полоски, либо выходят за край экрана и требуют горизонтальной прокрутки. Горизонтальная прокрутка в письме практически гарантирует, что читатель закроет его.
Стандартная ширина письма в редакторах составляет 600 пикселей. На мобильном экране письмо масштабируется под ширину дисплея, и если вёрстка не отзывчивая, шрифт вместе с ней становится крошечным. Правило одной колонки решает большинство проблем: контент вытягивается в вертикальную ленту и читается на любом экране без горизонтального скролла.
Минимальный кегль основного текста — 14 пикселей. Меньше этого размера большинство читателей будет щуриться или увеличивать масштаб, а значит, потеряет контекст. Оптимально — 16 пикселей: именно такой размер браузер использует по умолчанию, и читатель к нему привык.
Кнопки и ссылки должны быть достаточно большими для нажатия пальцем. По рекомендациям Apple и Google, минимальная высота интерактивного элемента составляет 44 пикселя. Текстовая ссылка в строке текста этому требованию не отвечает: попасть по ней пальцем без промаха сложно.
Меню-шапка с несколькими пунктами, которое занимает одну строку на сайте, в письме либо переносится в несколько строк, либо сжимается до нечитаемых аббревиатур. Практика показывает: от шапки с навигацией в письме лучше отказаться вовсе или свести её к логотипу и одной ссылке.
Структура письма: один экран — одна мысль
Классическая ошибка: пытаться вместить в одно письмо всё — анонс нового продукта, три статьи блога, акцию, напоминание про программу лояльности и новость из жизни компании. Читатель открывает письмо, видит «простыню» и закрывает: непонятно, за что хвататься.
Рабочая структура строится иначе: одно письмо — одна главная мысль. Остальное уходит в следующее письмо или оформляется как вторичный блок, явно обозначенный как дополнение, а не продолжение основного сообщения.
Базовая структура письма выглядит так:
- Шапка. Логотип, иногда с коротким названием рубрики. Занимает минимум пространства, не конкурирует с главным сообщением.
- Герой-блок. Главный визуал или заголовок. Читатель должен понять главную мысль письма ещё до прокрутки. Если этого не происходит, герой-блок не справляется со своей задачей.
- Контентные блоки. Основная часть письма. Один-два блока на письмо, не больше. Каждый блок содержит одну мысль: заголовок, короткий текст и призыв к действию.
- Подвал. Контакты, ссылка на отписку, юридически обязательная информация об отправителе. Шрифт меньше, цвет приглушённее: читатель должен понимать, что это служебная информация.
Отдельный вопрос: сколько призывов к действию ставить в одно письмо. Одна главная кнопка и при необходимости одна вторичная ссылка — рабочий максимум. Пять кнопок в одном письме означают, что читатель не понимает, что от него хотят в первую очередь, и в итоге не нажимает ни одну.
Разбивка текста важна не меньше структуры блоков. Абзацы длиннее трёх-четырёх строк трудно читать в письме, особенно на телефоне: экран узкий, каждая строка короче, чем на мониторе. Короткие абзацы и пустое пространство между ними делают письмо «воздушным», и читатель не ощущает предстоящей долгой работы.
Кнопка призыва к действию: почему текстовая ссылка проигрывает
Призыв к действию, или CTA — это главное, чего вы ждёте от читателя: перейти на сайт, посмотреть товар, записаться, скачать файл. От того, как оформлен этот призыв, зависит, сделает ли читатель шаг или просто закроет письмо.
Текстовая ссылка в строке абзаца — самый незаметный способ попросить о действии. Ссылка сливается с окружающим текстом, особенно если почтовый клиент перекрашивает её в стандартный синий без подчёркивания. На телефоне по ней сложно попасть пальцем. Читатель её просто не замечает.
Кнопка с заливкой работает иначе: она выделяется на фоне письма, воспринимается как самостоятельный элемент и физически удобна для нажатия. Рекомендуемая минимальная высота — 44 пикселя, ширина достаточная, чтобы не промахнуться. Кнопка не должна быть шире контейнера письма: на узком экране она либо обрежется, либо вызовет горизонтальный скролл.
Текст на кнопке — отдельная история. Обобщённые формулировки вроде «Нажмите здесь» или «Подробнее» не дают читателю понять, что произойдёт после клика. Конкретный глагол плюс результат работают лучше: «Записаться на консультацию», «Посмотреть каталог», «Получить скидку». Читатель понимает, куда ведёт кнопка, и принимает решение осознанно.
Несколько правил, которые помогут кнопке работать:
- Цвет кнопки должен контрастировать с фоном блока, в котором она стоит. Бледно-серая кнопка на светло-сером фоне незаметна.
- Одна главная кнопка на письмо. Если добавляете вторую, она должна выглядеть явно второстепенной: другой цвет, меньший акцент.
- Кнопка должна быть видна без прокрутки или находиться в логичном месте сразу после основного сообщения.
- Не делайте кнопку из картинки: если у читателя отключена загрузка изображений, он не увидит призыв к действию вовсе.
Разместите кнопку один раз в конце основного блока, и при необходимости повторите её в самом низу письма — для тех, кто долистал до конца и принял решение только там.
Тема письма и прехедер: их видят раньше самого письма
Пока письмо не открыто, читатель видит только три элемента: имя отправителя, тему письма и прехедер. Именно от них зависит, откроют письмо вообще. Дизайн блоков, кнопки, фотографии — читатель увидит всё это только перешагнув этот первый барьер.
Тема письма обрезается почтовыми клиентами примерно на 60 символах: именно столько умещается в одну строку на большинстве устройств. На мобильных экранах обрезание происходит раньше, около 40 символов. Главная мысль темы должна быть в начале, а не в конце.
Прехедер — это первые слова письма, которые почтовый клиент показывает рядом с темой в списке входящих. Если прехедер не задан отдельно, клиент возьмёт первый текст из тела письма. Это нередко оказывается фраза «Если письмо не отображается, откройте в браузере» или alt-текст картинки. Прехедер нужно заполнять намеренно: он дополняет тему и даёт ещё одну причину открыть письмо.
Что работает в теме письма:
- Конкретика: «Скидка 20% на зимнюю коллекцию до пятницы» понятнее, чем «Специальное предложение для вас».
- Вопрос, который задаёт читатель сам себе: «Почему рассылка перестала приносить заявки?» зацепит того, кто столкнулся с этой проблемой.
- Числа и конкретные сроки: «3 шага к настройке за 15 минут» сообщает объём работы ещё в теме.
Что разрушает тему письма:
- CAPS LOCK: воспринимается как крик и ассоциируется со спамом.
- Восклицательные знаки в избытке. Один может усилить фразу, три подряд сигнализируют о рекламном давлении.
- Слова, которые спам-фильтры встречают слишком часто: «бесплатно», «выиграйте», «только сейчас» в сочетании с другими тревожными сигналами могут отправить письмо в папку со спамом.
- Тема, которая не соответствует содержанию. Читатель, открывший письмо с ощущением обмана, отпишется быстрее, чем если бы тема была скучной, но честной.
Что ломает письма технически
Даже идеально спроектированное письмо может выглядеть сломанным у части получателей из-за технических особенностей разных почтовых клиентов. Понимать эти ограничения нужно до отправки: после исправить нельзя.
Картинки по умолчанию отключены. Многие корпоративные почтовые клиенты и часть настольных программ не загружают изображения автоматически: получатель сам решает, нажать «Показать картинки» или нет. Если смысл письма передаётся только через изображение, а не через текст рядом с ним, читатель, у которого картинки выключены, просто ничего не поймёт.
Решение — атрибут alt для каждого изображения. Если картинка не загрузилась, читатель увидит текстовое описание: «Схема этапов проекта» или «Фото команды». Декоративные картинки без содержания можно оставить с пустым alt, но смысловые — обязательно с описанием.
Слишком тяжёлое письмо. Некоторые почтовые клиенты обрезают письма, размер которых превышает определённый порог. Gmail, например, обрезает письма крупнее 102 килобайт: читатель видит текст «Сообщение обрезано» и ссылку для просмотра полной версии. Большинство нажимает «закрыть», а не «смотреть полностью». Основная причина тяжёлых писем — встроенные картинки в формате base64 или неоптимизированный HTML-код. Используйте внешние ссылки на изображения вместо встраивания, а HTML оставляйте минимально необходимым.
Несколько колонок без адаптивности. Вёрстка в две-три колонки без медиазапросов на мобильных клиентах отображается по-разному: одни клиенты масштабируют всё письмо целиком (и текст становится мелким), другие делают горизонтальную прокрутку, третьи ломают колонки так, что блоки наезжают друг на друга. Если нет уверенности, что письмо будет корректно отображаться во всех клиентах, однострочная вёрстка надёжнее.
Шрифты, которых нет у получателя. Почтовые клиенты не загружают внешние веб-шрифты надёжно: одни поддерживают, другие нет. Если шрифт не загрузился, клиент подставит системный. Это не катастрофа, но если дизайн письма строился на конкретном шрифте, результат может выглядеть иначе, чем задумано. Надёжнее закладывать стек из системных шрифтов: Arial, Helvetica, Georgia, Times New Roman.
| Проблема | Где встречается | Решение |
|---|---|---|
| Картинки не загружаются | Outlook, корпоративные клиенты | Заполнять alt у всех смысловых изображений |
| Письмо обрезается | Gmail (порог 102 КБ) | Не встраивать картинки base64, минимизировать HTML |
| Колонки ломаются на мобильном | Клиенты без поддержки медиазапросов | Одна колонка или адаптивная вёрстка с проверкой |
| Шрифт подменяется системным | Большинство клиентов без поддержки веб-шрифтов | Использовать стек системных шрифтов |
Частая ошибка: копировать дизайн сайта в письмо один в один
Логика кажется разумной: сайт уже есть, стиль разработан, цвета и шрифты определены — возьмём то же самое для письма. На практике это приводит к письмам, которые выглядят сломанными у значительной части получателей.
Браузер и почтовый клиент — разные среды с разными правилами. Браузер поддерживает весь современный CSS: Grid, Flexbox, переменные, анимации. Почтовые клиенты поддерживают подмножество CSS, причём у каждого клиента своё. Outlook использует движок Word для отображения писем, и Word не понимает большинство современной вёрстки. Gmail убирает часть стилей из тега style и оставляет только инлайновые. Apple Mail понимает больше остальных, но его аудитория не вся ваша база.
Что конкретно ломается при переносе сайтовой вёрстки:
- Фоновые изображения через CSS не работают в Outlook.
- Flexbox и Grid не поддерживаются в Outlook: ломают колонки и выравнивание.
- Скруглённые углы у кнопок игнорируются в некоторых версиях Outlook: кнопки становятся прямоугольными.
- Шрифты из Google Fonts загружаются не у всех клиентов.
- CSS-анимации не воспроизводятся в значительной части клиентов.
Правильный подход — использовать специализированный конструктор рассылок вместо переноса HTML с сайта вручную. Конструкторы вроде Unisender, SendPulse и других уже содержат шаблоны, проверенные в основных почтовых клиентах. Вёрстка в них табличная: не самая модная с точки зрения веб-разработки, но надёжная для писем, потому что таблицы понимают все клиенты.
Если нужна кастомная HTML-вёрстка, используйте онлайн-тестировщики: они отправляют письмо в десятки почтовых клиентов одновременно и возвращают скриншоты. Так вы увидите, что именно сломалось и у кого, до массовой отправки — а не после.
Дизайн письма может и должен соответствовать стилю бренда — те же цвета, тот же тон, похожие шрифты. Но реализация будет отличаться от сайта, потому что среда другая. Если рассматриваете альтернативные каналы для общения с аудиторией, посмотрите статью про мессенджер-маркетинг: там другие технические ограничения и другие возможности.