Консультация
RU

Верстка email

verstka

Верстка email

При верстке email используется тот же язык разметки html, что и при верстке сайтов. Но существуют определенные нюансы, которые необходимо учитывать в работе. Возникают они потому, что страницы открываются через браузеры, а письма — через множество различных почтовых клиентов, которые работают на разных движках: от программы Microsoft Outlook до мобильных приложений почтового сервиса под IOS либо Android. И если в браузерах современные стандарты работают более или менее одинаково, то в почтовиках эта универсальность отсутствует.

Особенности верстки писем:

  • табличная верстка;
  • ограничения по использованию css (только инлайновые стили, без сокращенных форм);
  • ограничения по распознаванию html-тегов и атрибутов (напр., <button>, <header> и <footer>);
  • не используется JavaScript;
  • шрифты нужно выбирать из стандартных;
  • спецсимволы (параграф, эмодзи и т.п.) лучше заменять картинками;
  • объем кода — не более 100 Кб;
  • текст максимально отделять от изображений (не всегда изображения загружаются сразу при открытии письма);
  • ссылки должны быть не сокращенными, и предпочтительно httрs;
  • цвета задаются только в формате HEX;
  • медиа-запросы воспринимают не все почтовые сервисы, потому лучше обходиться без них.

Важно обращать внимание на то, как верстка email отображается на экранах разного размера. Более 50% всех писем просматриваются с мобильных устройств, потому подготовленная рассылка должна быть адаптивной. Иногда для этих целей используют специальные фреймворки, например MJML или Foundation for Emails. По завершении работы обязательно протестируйте готовое письмо с помощью реальных рассылок на почтовые ящики либо воспользовавшись сервисами для проверки.