Отличия вёрстки емейлов от вёрстки веб-страниц
Обновили материал 05.09.2018
Для просмотра веб-страниц сейчас используют те же устройства, что и для просмотра почты — ноутбуки, планшеты, смартфоны и стационарные компьютеры. Но только веб-страницы открывают через браузеры, а почту — через почтовые клиенты, мобильные приложения и те же браузеры, но в веб-интерфейсе почтового провайдера. Поэтому требования к вёрстке писем и веб-страниц отличаются и с ними нужно считаться.
Давайте более детально разберём основные отличия между веб- и емейл-вёрсткой.
Табличная вёрстка
Одно и то же письмо должно одинаково корректно выглядеть как на Outlook 2010 (который использует для интерпретирования кода Word-подобный движок), так и в почтовом клиенте Mail на iOS, который работает на движке webkit. Это накладывает существенные ограничения на использование CSS. Именно по этой причине для вёрстки писем используется устаревший в веб-вёрстке табличный подход.
Нельзя использовать Java Script и другие интерактивные средства
Многие используют веб-интерфейсы почтовых провайдеров для просмотра своей почты. Почтовые провайдеры же, в свою очередь, стараются обезопасить подписчиков от кражи персональных данных, фишинга и прочих противоправных действий злоумышленников. Для этого они вырезают потенциально опасные фрагменты кода JavaScript и некоторые CSS-свойства, например, position, которое позволяет изменить позиционирование элементов и подменить элементы интерфейса своей кнопкой.
Инлайновые стили
При отображении письма в веб-интерфейсе почтовому провайдеру необходимо, чтобы это письмо не «сломало» сам интерфейс. Почтовые провайдеры анализируют все CSS-селекторы, чтобы исключить пересечения со стилями интерфейса, ограничить отображение только областью письма, исключить пересечения имен классов и т. д. Многие почтовые провайдеры поступили проще: они вообще не интерпретируют стили и обрезают всё, кроме содержимого body. По этой причине при вёрстке писем следует использовать инлайновые стили, которые прописывают в атрибуте style. Что в веб-вёрстке считается «дурным тоном».
Размер html-кода не должен превышать 100 Кб
Минимизация html-кода актуальна и для веб-страниц, но для них стараются просто максимально сократить время загрузки. В емейл-верстке всё немного жёстче. Некоторые почтовые клиенты и веб-интерфейсы проcто обрезают вёрстку письма, если она превышает 100 Кб. Это относится главным образом к Gmail и Yahoo, которые режут письма и в веб-интерфейсе, и в мобильных приложениях.
Нельзя использовать сокращённую форму записи в CSS
Несмотря на ограничения в размерах html-кода, не стоит использовать сокращённую форму записи для цвета (#000 вместо #000000) и стилевых свойств (border: 1px solid #000000 вместо border-width:1px;border-style:solid;border-color:#000000;).
Медиазапросы и retina-адаптация
В веб-вёрстке для чёткого отображения графики используется или векторный формат svg, или медиазапросы с подстановкой других спрайтов с большим размером. В письмах нет такой возможности, поэтому приходится всем показывать изображения больших размеров. Следует находить компромисс между чёткой графикой и небольшим размером письма.
Соблюдение этих правил позволит вам создать письмо, у которого не будет критичных проблем с отображением. Если у вас появились вопросы, вы всегда можете прислать их нам на почту или задать в комментариях.
