Как сверстать письмо, чтобы оно дошло до получателя таким, как задумано11.03.2024 10:30

Привет! Меня зовут Егор Стеблин, я фронтенд-разработчик отдела спецпроектов в 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

Полная версия

Если кратко:  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 , применяющий опредёленные стили при наведении на любой элемент.

Вёрстка в HTML

Прехедер. Это подзаголовок письма, который находится рядом с заголовком:

Текст, выделенный жирным — это заголовок, а после него серым текстом идёт прехедер. Видите, как часто он обрезается? Поэтому чем короче — тем надёжнее.

Пользователь видит прехедер до открытия. Он может повторять текст в письме, а может кратко его резюмировать. В целом, рекомендуемая длина для прехедера —  в пределах 30–80 символов. Но не забывайте, что клиенты бывают разные и всё надо предварительно тестировать.

Поскольку прехедер может показывать вплоть до 150 первых non-code символов, после него может внезапно показаться основная часть письма. Чтобы этого не было, нужно заполнить пустое пространство последовательностью спецсимволов, заканчивающейся пробелом (одна такая последовательность равняется одному пробелу на клиенте) » ͏ »

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

Для скрытия прехедера мы используем такие настройки:

    Текст прехедера

Для всех таблиц (

border="0" 
cellspacing="0"
cellpadding="0" 
role="presentation"

• border="0" устанавливает толщину границы ячеек таблицы в 0 пикселей, таким образом, убирает границы и линии между ячейками

• cellspacing="0" устанавливает расстояние между ячейками таблицы в 0 пикселей и убирает промежутки между ячейками

• cellpadding="0" устанавливает внутренние отступы в ячейках таблицы в 0 пикселей. Как и cellspacing, помогает убрать отступы

• role="presentation" позволяет программам для чтения с экрана воспроизводить только содержимое таблицы без указания, в какой по счёту клетке оно находится

Для всех изображений прописывайте alt и border=»0».

• alt предназначен для предоставления альтернативного текста для изображения. Используется, если пользователь отключил загрузку изображений или у него есть ограничения в зрительных возможностях

• border — обязательный атрибут для идентичного воспроизведения на всех клиентах, потому что некоторые почтовые клиенты могут автоматически добавлять границы к изображениям

Для всех ссылок требуется прописывать title. В первую очередь нужно по той же причине, что и атрибут alt из предыдущего раздела: если получатель письма пользуется скринридером, title даст информацию о ссылке.

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

Для выравнивания используйте valign и align. Они предназначены для управления вертикальным и горизонтальным выравниванием содержимого ячеек таблицы соответственно. Они применяются к тегам

Пример

Вёрстка в CSS

В качестве единиц измерения используйте пиксели и проценты, так как среди единиц измерения у них наибольшая поддержка, причём:

• Проценты можно применять только для высоты и ширины

• Для всего остального, например стилей шрифтов, отступов — только пиксели

Если брать в расчёт только новые клиенты с высоким уровнем поддержки функционала CSS, то относительные единицы тоже можно использовать. Но мы действуем наверняка, поэтому рассчитываем сделать письмо, которое отрисует даже старая версия Outlook, поэтому этот вариант не берём.

Сразу верстайте резиново. Для всех ключевых элементов письма, которые должны занимать 100% ширины, нужно прописывать максимальную ширину через свойство max-width. Это может помочь избежать проблем при отображении на устройствах с очень широкими экранами.

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

Откажитесь от таких стилей, как position: absolute. Есть ряд свойств, которые поддерживаются только в самых продвинутых клиентах, например Apple Mail. Абсолютное позиционирование элементов — одно из них.

Для позиционирования можно использовать только свойства таблиц valign и align — и экспериментировать с отступами, используя padding и margin.

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

Используйте padding у родительских компонентов вместо margin у дочерних. Padding имеет большую поддержку, поэтому так вы снизите количество возможных багов.

Background-image можно использовать только в крайнем случае. Он поддерживается в современных клиентах, но версии Outlook до 2023-го года не поймут, что это. Если использование background-image критически важно, лучше вообще пересмотреть всё решение и реализовать какую-то альтернативу, например попробовать background-color.

Шрифты

Используйте email-safe-шрифты. Они есть на абсолютном большинстве устройств, а значит, и в установленных на них почтовых клиентах, поэтому их использование безопасно. Вероятность того, что клиент будет полноценно поддерживать другой шрифт — 24%.

Ещё одна причина использовать email-safe-шрифты: пока кастомные шрифты загружаются, текст в письме не отображается.

Код интеграции email-safe-шрифта может отличаться от кода интеграции кастомного шрифта в электронном письме. Подключение может выглядеть примерно так:

body {
    font-family: Arial, sans-serif;
  }

В случае кастомных шрифтов в веб-разработке часто используется правило @font-face для загрузки шрифтов. Оно определяет кастомный шрифт и его источники — пути к файлам шрифтов, форматы и другие параметры. Например:

@font-face {
    font-family: "CustomFont";
    src: url("path/to/custom-font.woff2") format("woff2");
  }

  body {
    font-family: "CustomFont", Arial, sans-serif;
  }

Но не все почтовые клиенты поддерживают загрузку шрифтов с помощью @font-face. Поэтому, если кастомный шрифт критически важен, всё равно обязательно пропишите полный фоллбэк на email-safe-шрифт:

body {
    font-family: "CustomFont", "FallbackFont", Arial, sans-serif;
  }

Здесь "FallbackFont” — email-safe-шрифт. Если "CustomFont” недоступен, браузер или почтовый клиент будет искать следующий шрифт в списке.

Фантомные таблицы

Если есть какой-то блок с заданной в процентах шириной и ограничением в виде max-width, в 100% случаев Outlook пропустит ограничение, так как попросту не знает свойства max-width. В результате могут появиться дефекты в верстке.

Пример подобных дефектов:

Желаемая структура письма

Результат ошибочного рендеринга в Outlook

Но если обернуть элементы таблицы в комментарий, он будет восприниматься только в десктопном Outlook версий 2007–2019 за счёт движка. Остальные просто не увидят эти закомментированные таблицы, отсюда и название.

Поэтому все дивы и таблицы с варьируемой шириной специально для Outlook надо оборачивать в фантомную табличку со статической шириной:

•  — это комментарии, которые будут восприниматься только старыми версиями Outlook. Внутри этих комментариев создается таблица с фиксированной шириной

• После закрытия комментариев для Outlook добавляется любой блок, который использует относительные единицы измерения

Пример письма от начала до конца

Как вы видите, помимо изложенного ранее здесь мы используем определенные мета-теги. Не будем детально описывать каждый из них, остановимся лишь на одном из самых важных — viewport. Этот тег отвечает за масштабирование вашего документа на мобильных устройствах. Стандартными значениями для него являются:  width=device-width и initial-scale=1 . Тогда содержимое документа масштабируется под ширину устройства и ставит параметр зума в исходную позицию.

Пример письма от начала до конца

  
    
    
    
    
  

  
    

    
      

        

          Example
          Preheader‌ ‌ ‌ ‌ ‌ ‌ ‌ 
          ‌ ‌ ‌ ‌ ‌ ‌ ‌ 
          ‌ ‌ ‌ ‌ ‌ ‌ ‌ 
          ‌ ‌ ‌ ‌ ‌ ‌ ‌ 
          ‌ ‌ ‌ ‌ ‌ ‌ ‌ 
          ‌ ‌ ‌ ‌ ‌ ‌ ‌ 
          ‌ ‌ ‌ ‌ ‌ ‌ ‌ 
          ‌ ‌ ‌ ‌ ‌ ‌ ‌ 
          ‌ ‌ ‌ ‌ ‌ ‌ ‌ 
          ‌ ‌ ‌ ‌ ‌ ‌ ‌ 
          ‌ ‌ ‌ ‌ ‌ ‌ ‌ 
        

        
        

Hello world

Hello world but smaller Become a part of hello world community for just $9.99

Join Us