Верстка HTML-писем очень тонкая и интересная тема. Основная сложность заключается в том, что по сути почтовый клиент это такой специальный, немного отсталый браузер, к которому нужно приноровиться. И если в далекие-далекие годы была проблема с Internet Explorer, который мало, что поддерживал, то с HTML-письмами дела обстоят еще все хуже.
В HTML-письмах есть свои особенности, которые связаны с тем, что многие почтовые клиенты имеют ряд ограничений, даже современные. Не будем развивать тему старых почтовых клиентов, вроде Outlook, причем не самых свежих версий они имеют “под капотом” еще более устарелый Internet Explorer, который не обновлялся годами.
Также на эту “традицию” не обновлять браузеры почтовых клиентов накладываются еще ограничения с почтой как таковой, например, есть определенный размер кода, который может содержаться в письме и есть дополнительные ограничения, связанные с отображением письма в почтовых клиентах.
К тому же от почтового клиента, к почтовому клиенту эти ограничения разняться и всплывают все новые и новые проблемы, которые мешают нам делать верстку писем хорошо и без головной боли.
Сейчас, конечно, уже есть много различных почтовых фреймворков, которые значительно упрощают сам процесс верстки писем, например MJML и др. О них мы поговорим в других статьях. Сейчас же рассмотрим основные правила верстки писем, как говорится “по классике”.
1. ИСПОЛЬЗУЙТЕ ТАБЛИЧНУЮ ВЕРСТКУ
Для полной поддержки писем, в том числе и в outlook, нужна табличная верстка.
2. ПИШИТЕ СТИЛИ ИНЛАЙНОВО
Подключать css-файлы в письмо не получится, поэтому стили нужно писать инлайново (либо в теге style, а затем применять инлайнер).
3. НЕ ДЕЛАЙТЕ СЛИШКОМ МНОГО ВЛОЖЕННОСТЕЙ В ПИСЬМЕ
При большом количестве вложенностей увеличивается и размер письма, а максимальный вес самого кода не должен превышать 102 кб, иначе увидите надпись “показать полностью”.
4. НЕ ИСПОЛЬЗУЙТЕ BACKGROUND-IMAGE
К сожалению, он не поддерживается в outlook.
5. ИСПОЛЬЗУЙТЕ ТОЛЬКО БЕЗОПАСНЫЕ ВЕБ-ШРИФТЫ
Вам подойдут шрифты типа Arial, Verdana, Helvetica и прочие “безопасные” шрифты, иные не будут работать.
6. ДЛЯ ПЕРЕНОСА ТЕКСТА ИСПОЛЬЗУЙТЕ BR
Это единственный способ сделать адекватный перенос текста в письмах.
7. ТЕЛЕФОН И ПОЧТУ НУЖНО СДЕЛАТЬ ССЫЛКАМИ
За вас это так или иначе сделает почтовый клиент, и чтобы быть уверенным в конечном результате — делайте подобные элементы ссылками и сразу стилизуйте.
8. НЕ ЗАБЫВАЙТЕ О ДОСТУПНОСТИ. ИСПОЛЬЗУЙТЕ АТРИБУТ ROLE
Атрибут role=”presentation” у всех таблиц преобразует их так, чтобы данные таблицы не представлялись как табличные.
9. ОТСТУПЫ В ВЕРСТКЕ ПИСЕМ. ВМЕСТО MARGIN ИСПОЛЬЗУЕМ PADDING
Причем, как правило, padding нужно писать только табличным тегам (в основном — td).
10. ИСПОЛЬЗУЙТЕ !IMPORTANT ПРИ АДАПТИВНОЙ ВЕРСТКЕ
Это может звучать для вас странно, но иначе порой просто невозможно сделать адаптивную верстку. Используйте !important, если потребуется.
На этом думаю все. Конечно, наверняка, есть и другие правила, но я сосредоточился только на самых основных на мой взгляд.
До новых встреч!
Sphinx Academy