Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано
Привет! Меня зовут Егор Стеблин, я фронтенд-разработчик отдела спецпроектов в KTS.
В статье расскажу и покажу, как сверстать письмо, чтобы оно наверняка правильно отображалось во всех почтовых клиентах — особенно в Outlook, который до сих пор возглавляет подборки по популярности в РФ.
Что будет в статье
Зачем вообще нужны email-рассылки
У email-рассылки один из лучших ROI среди каналов диджитал-маркетинга — примерно 36:1.
Рассылка по почте даёт возможность наладить с представителями ЦА максимально близкий контакт. Ведь в ней можно обратиться к пользователю по имени и сделать персональное предложение. А вот, что ещё делают рассылки:
удерживают активных клиентов и возвращают тех, кто уже перестал ими быть
стимулируют покупателей на повторные покупки
побуждают клиентов делать импульсивные покупки
А теперь представим: ваш потенциальный или уже активный клиент открывает пришедшее от вас письмо, а в нем: поплывшая верстка, наполовину загрузившиеся шрифты и картинки, а в внизу вообще красуется надпись «открыть в отдельном окне», обрезающая половину письма. Неловко, не так ли?
Сделать письмо без ошибок поможет наша статья.
Зачем верстать письма вручную
Верстать письма руками — задача нестандартная. Последний раз мне это понадобилось для вставки кода письма внутри обёртки, которую разрабатывали другие разработчики.
Но если у вас нет специфических требований, а множество тонкостей пугают, советуем попробовать готовые решения, которые учтут все всё за вас — например, mosaico.io.
Что может пойти не так
Согласно caniemail.com, рейтинг поддержки всех доступных HTML- и CSS-элементов для вёрстки писем выглядит так:
Apple Mail (iOS и MacOS) — 93%
Mail.ru (десктопная версия) — 67%
Outlook (iOS и MacOS) — 63–65%
Google Mail — от 37 до 52% в зависимости от платформы
Остальные версии Outlook — от 19 до 61% в зависимости от платформы
Поддержка доступных HTML- и CSS-элементов в остальных клиентах
Для статьи мы собрали опробованные на собственном опыте способы вёрстки писем, которые точно работают. Расскажем, почему надо использовать табличную вёрстку, в чём проблема Outlook и где проверять письма на поддерживаемость.
Проблема Outlook
Полная версия
Первый Outlook разработали в Microsoft в 1997 году как часть пакета Microsoft Office. Это был персональный информационный менеджер, преимущественно используемый для управления электронной почтой. С годами Outlook развивался и обретал новые функции, такие как календарь, задачи и контакты.
Первоначально Outlook использовал движок Word для генерации сообщений и движок Internet Explorer для отображения входящих. Это приводило к несоответствиям в отображении и сложностям в создании писем. Поэтому в 2007 году в Microsoft решили заменить Internet Explorer на Word для отображения входящих писем.
Так Outlook на 16 лет лишился поддержки большей части возможностей HTML и CSS, в результате чего разработчикам пришлось использовать разные практики для корректной поддержки писем в Outlook, о которых я расскажу ниже.
В сентябре 2023 г. Microsoft выпустили Outlook на новом движке. Теперь поддержка элементов гораздо шире, но проблема остаётся, и вот почему:
Во-первых, на сервисах вроде caniemail.com ещё не прописана поддержка для последней версии Outlook — до сих пор нет достоверных данных о том, что он поддерживает.
Во-вторых, не у всех пользователей стоит новая версия. Она полностью добавлена в Outlook Web, подписку Microsoft Office 365 и в Windows Mail. Но это — при условии автоматического обновления либо предустановленного приложения в Windows 11, начиная с 2024 года. Если на ПК стоит Office 2021-го года и ниже, Outlook будет на старом движке.
Если кратко: Microsoft Outlook поддерживает только от 19 до 65% доступной вёрстки и при этом по-прежнему очень распространён в РФ. Есть новая версия, но пока неизвестно, какие элементы она поддерживает. Поэтому если потенциальные читатели ваших писем пользуются Outlook — для надёжности стоит использовать все правила ниже.
Базовые принципы
Используйте табличную вёрстку. Когда Outlook перешёл на рендеринг через Microsoft Word, многие CSS- и HTML-возможности стали недоступны. Самым стабильным путём разработки стала табличная вёрстка — и остаётся до сих пор.
Новый Outlook практически полностью поддерживает разработку на div, но многие пользователи всё ещё используют старые версии клиента. Возможно, через 2–3 года большинство перейдёт на новый Outlook, и тогда таблицы станут менее актуальными —, но пока так.
Максимальный размер документа с письмом — 100 Кб. Подгружаемые извне картинки и шрифты не считаются. Причин этому несколько:
Спам-фильтры или графические артефакты
Автоматическая обрезка в ряде клиентов, например Gmail. Вместо свёрстанного письма появляется кнопка «Открыть в отдельном окне» — и весь тщательно заготовленный UX коту под хвост:
Максимальная ширина — 800 пикселей. Раньше из-за Outlook и среднего размера экранов использовали стандарт в 600 пикселей. Сегодня максимальная ширина выросла до 800 пикселей. Если делать ещё шире, может возникнуть ряд проблем от появления горизонтального скролла до некорректной отрисовки.
Максимальная ширина письма для мобильных устройств — 400 пикселей. Без прописанных стилей почтовый клиент сам сожмёт письмо под экран, сохраняя пропорции.
Используйте только inline-стили, потому что их поддерживает большая часть клиентов. Тег style поддерживается не везде. Например, почтовый клиент Google воспринимает стили внутри тега style только в письмах с аккаунтов Google. Если вы привяжете к почте Google клиент Яндекса, то в письмах с Яндекс-почты стили в теге style вообще не дойдут до клиента. А ещё style-стили могут просто потеряться при пересылке.
Для ускорения разработки можно использовать css-классы. Но перед выкаткой в прод используйте сервис, который всё завернёт в inline, например templates.mailchimp.
Проверяйте поддержку элементов и свойств. Можно использовать сервис caniemail.com: каждый HTML-элемент, атрибут, CSS-свойство проверены сразу на 20–30 почтовых клиентах, для каждого из которых написана версия, которая поддерживает конкретный элемент. Если поддержка неполная или с багами, caniemail скажет, что именно не работает.
Что касается самого содержимого письма вам, разумеется, доступны базовые элементы:
Текст
Изображения
Ссылки
К сожалению, на данный момент использование видео и аудио не поддерживается в большинстве почтовых клиентов, но для добавления интерактивности вы можете использовать CSS-модификатор :hover , применяющий опредёленные стили при наведении на любой элемент.
.» />
Будьте внимательны! Вы можете добавить этот модификатор только через использование CSS-классов. Соответственно, на него распространяются все потеницальные проблемы, связанные с тегом Become a part of hello world community for just $9.99
Hello world
Hello world but smaller
Join Us