Почему письма и сайты выглядят похоже, но делаются по-разному
Современные email-рассылки визуально не отличить от лендингов: плашки с брендингом, многоколоночные сетки, анимированные элементы, кнопки с CTA. Но за этой схожестью скрыта принципиальная разница в подходах к дизайну и верстке.
Веб-дизайнер работает в стандартизированной среде. Браузеры Chrome, Firefox, Safari и Edge по-разному интерпретируют CSS, но их различия минимальны и хорошо задокументированы. Email-дизайнер работает в условиях, где каждый почтовый клиент устанавливает собственные правила. Gmail, Outlook, Apple Mail, Яндекс.Почта, Mail.ru — у каждого сервиса свои ограничения, и все они разные.
Главная причина этих ограничений — безопасность. Почтовые сервисы блокируют скрипты, форматы и стили, которые потенциально могут использоваться для фишинга, вирусов и мошенничества. Дизайнер на каждом шагу слышит «да, но».
Табличная верстка вместо блочной
Современные сайты строятся на блочной верстке с использованием Flexbox и CSS Grid. Это гибкие, мощные методы, которые позволяют создавать сложные адаптивные макеты с минимальным количеством кода.
В письмах используется табличная верстка — та самая, от которой веб-разработчики ушли полтора десятилетия назад. Почтовые клиенты плохо поддерживают современные CSS-свойства, поэтому таблицы остаются единственным надёжным способом выстроить многоколоночный макет.
Макет письма строится на модульной сетке от 1 до 4 колонок. Больше — уже нечитабельно: текст становится слишком мелким даже на десктопе.
Ширина контентной части: 600 px вместо 1400 px
Стандартная ширина контентной части сайта для десктопной версии — 1200–1400 px. Для письма стандарт другой: 600 px. Это не произвольное число, а требование среды.
Окно просмотра в большинстве почтовых клиентов чуть шире 600 пикселей. Если сделать более широкое письмо, на десктопе с высокой вероятностью отобразится мобильная версия. При плохой адаптации макет не влезет в окно и появятся полосы прокрутки — что полностью разрушает пользовательский опыт.
Шрифты: только системные гарнитуры
Веб-дизайнер может использовать любой шрифт. Если его нет у пользователя, браузер подгрузит его с сервера через Google Fonts или другой CDN. Почтовые клиенты ничего со стороны не загружают.
Если в макете письма указан нестандартный шрифт, в большинстве почтовых клиентов он автоматически заменится на системный — как правило, Arial или Times New Roman. Поэтому для email-рассылок используют только проверенные системные гарнитуры:
- Arial
- Georgia
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
- Courier New
- Impact
Если по условиям задачи необходимо использовать фирменный шрифт бренда, есть один обходной путь: сверстать текст картинкой. Но это работает только для крупных заголовков — короткие надписи остаются читаемыми при масштабировании на мобильных устройствах. Для основного текста рассылки этот способ не подходит.
Анимация и интерактивность: только GIF
На сайтах анимация реализуется через JavaScript и CSS-анимации. В письмах JavaScript неприменим из соображений безопасности — почтовые клиенты блокируют его полностью. CSS-анимации тоже не работают: большинство почтовых сервисов не поддерживают нужные свойства.
Единственный надёжный способ анимации в письмах — GIF. Но и здесь есть ограничение: версии Outlook 2019 года и старше вместо анимированного GIF показывают только первый кадр. Это нужно учитывать при создании анимаций — первый кадр должен нести смысловую нагрузку и быть понятным без движения.
Анимированные кнопки в рассылках показывают хорошие результаты: по данным практики email-маркетологов, грамотно анимированный CTA способен поднять CTOR с 3,1% до 3,9%.
Некоторые почтовые сервисы поддерживают AMP-технологию, которая позволяет добавить интерактивные элементы: подборку товаров с прокруткой, форму внутри письма, аккордеон. Но AMP требует создания двух версий письма — интерактивной для поддерживающих её клиентов и стандартной HTML-версии для остальных.
Форматы изображений: jpg, png, gif и ничего лишнего
Веб-дизайнер работает с широким арсеналом форматов: помимо традиционных JPEG и PNG, сегодня активно используются WebP и AVIF — современные форматы с отличным сжатием и качеством.
Для писем список значительно короче: jpg, png, gif. SVG и WebP почтовые клиенты не поддерживают надёжно. Чтобы изображения хорошо выглядели на Retina-дисплеях, картинки берут в два раза больше конечного отображаемого размера.
Тёмная тема и цвет фона
Тёмная тема — один из самых распространённых запросов в email-дизайне. Многие пользователи переключают почтовые клиенты в тёмный режим, и письмо должно выглядеть корректно в обоих вариантах.
Фон под письмом технически почти не ограничен: можно использовать любой цвет, размер или паттерн. Но Outlook обрабатывает фоновые изображения по-своему, что требует дополнительной проверки макета в этом клиенте.
При разработке цветовой схемы письма нужно проверять контрастность текста на обоих фонах — светлом и тёмном. Цвета, которые хорошо читаются на белом, могут стать нечитаемыми при инверсии.
Текст в письме обязателен
Возникает логичный вопрос: если с элементами столько сложностей, не проще ли сделать письмо одной большой картинкой?
Нет. Письма без текста — или с минимальным количеством текста — почтовые клиенты часто воспринимают как потенциально опасные и отправляют в спам. Outlook и ряд других сервисов по умолчанию блокируют показ изображений. Пользователь откроет такое письмо и увидит пустой экран.
Текст в письме должен быть всегда — это не только содержательная, но и техническая необходимость.
Нельзя поворачивать текстовые блоки
В веб-дизайне текстовые блоки можно наклонять под любыми углами с помощью CSS-трансформаций. В письмах это реализуется только через картинку с текстом.
Проблема в том, что текст на картинке недоступен для копирования. Это критично, когда речь идёт о промокодах или кодах подтверждения — пользователю придётся вводить их вручную, что создаёт лишнее трение и снижает конверсию.
Адаптивность работает иначе
На сайтах адаптивность реализуется через медиазапросы CSS, которые меняют компоновку в зависимости от ширины экрана. В письмах этот механизм тоже доступен, но работает ненадёжно: не все почтовые клиенты корректно обрабатывают медиазапросы.
Альтернативный подход — резиновая верстка, при которой таблицы и блоки задаются в процентах, а не в пикселях. Элементы, которые не помещаются по ширине экрана, автоматически перестраиваются один под другим. Менее гибко, но значительно надёжнее в условиях разнородных почтовых клиентов.
Пять главных отличий
- Верстка. Таблицы вместо Flexbox и CSS Grid.
- Ширина. 600 px вместо 1200–1400 px.
- Шрифты. Только системные гарнитуры — нестандартные заменяются автоматически.
- Анимация. Только GIF — JavaScript и CSS-анимации недоступны.
- Форматы изображений. Только jpg, png, gif — без SVG и WebP.
Письмо с красивым макетом — это не упрощённая копия сайта. Это отдельный дизайн-артефакт с собственными правилами и ограничениями. Понимание этих правил до начала работы над макетом — условие того, что письмо дойдёт до получателя в задуманном виде и сработает.
