Как сверстать письмо в html. Особенности верстки
Простой рецепт идеального шаблона или краткое пособие для начинающих, также есть особенности кода для практикующих.
Из чего состоит письмо?
Как и любой html-файл письмо состоит из head и body. Перед head часто пишут скрытый код, это что-то типа спецификации и пояснение с отсылкой на стандарт кода, а xmlns описывает пространство имен. Если простым языком, то это похоже на: "Откройте это полиция! Вот мое удостоверение." Пример:
Head содержит техническую информацию. Пример ниже. Что это означает?
Этот код говорит принимающему почтовому серверу: "Привет, я html файл, распознай меня в кодировке UTF-8, а если меня откроют на устройстве шириной менее 600рх, то растяни меня на ширину устройства, еще у меня есть стили в теге style, прими их к сведению, это важно, и еще пара стилей для мобильной версии и темной темы".
Что лежит внутри body или как выстроить структуру
Письма верстаются таблицами, так как такие известные css-свойства как flex, grid или даже float просто не работают в почтовых программах. В рассылках используют старый надежный способ табличной верстки. Особенно, если вы создаете письма для корпоративных клиентов, частых пользователей Outlook, это точно мастхев.
Структура внутри body похожа на матрешку, внутри которой находятся другие, только вот каждая очередная матрешка является таблицей.
Элементы контентной части письма
- Body является главным контейнером, здесь мы задаем цвет фона за письмом и обнуляем отступы, чтобы в Google у нас не было лишних рамок.
- Контейнерная таблица – каркас самой рассылки. Внутри body мы задаем таблицу и ее ширина, т.е. ширина самого письма 600рх.
- Контентная таблица – внутри ячейки контейнерной таблицы, мы создаем таблицу и это будет каркас для контента. Отдельные строки и ячейки этой таблицы будут заполняться текстом, изображениями, кнопками и пр.
- Футер часто выносят в отдельную таблицу, но это необязательно
Если нужно разместить 2 объекта друг с другом, например с одной стороны картинка, с другой текст, то в таблицах можно объединять ячейки и строки.
colspan="2" - пишем в ячейку, где нужно объединить 2 ячейки в одной строке, т.е. объединение по горизонтали
rowspan="2" - объединение по вертикали (ставим в первую ячейку)
Задаем свойства css для писем
Дальше мы настраиваем стили. В отличие от верстки сайта, где достаточно задать классы, все стили в рассылках мы прописываем персонально к каждому тегу, т.е. инлайново.
Можно прописывать стили в head как для сайта, но не все почтовики их воспринимают. Если тег от текста далек, то в нем прописываем отступы и фон, если близко к тексту, то внутри него прописываем свойства шрифта, цвет, размер и пр.
Если вы не знаете сработает ли в почтовике css-свойство, вы можете проверить его здесь→ (заходить с впн)
Изображения для рассылок
Размер изображений нужно брать в 2 раза больше самого письма, но чтобы оно быстро подгружалось, есть лайфхак. Экраны ретина (продукция Apple) хорошо отобразят картинку, если у нее высокая плотность пикселя, что нужно для этого сделать. Если наше письмо шириной 600рх, то изображение нужно взять в 1200рх, далее немного снижаем качество с целью уменьшения веса (до 600KB) и вставляем в письмо. В рассылке происходит сжатие такого изображения в 2 раза, и в итоге мы получаем легкую картинку с отличным качеством. Кстати для сжатия изображений рекомендую бесплатный сервис Squoosh.
🔺 Обязательно прописываем значение alt для всех картинок, это важно для восприятия вашего письма почтовиками. Репутация может значительно снизится из-за такой, казалось бы, мелочи.
О том каким должен быть макет рассылки читайте в моей статье по ссылке →
Пара слов о мобильной версии писем
Не все почтовики воспринимают к сведению медиазапросы. Яндекс игнорит их и не адаптирует письма, смиряемся. Но есть и адекватные почтовики, которые хотят развиваться, тут наши медиазапросы как раз в тему. Важно, медиазапросы мы пишем в head, но в рассылкам к ним нужно приписывать !important, чтобы на мобилке инлайновый стиль (тот, что прописан к тегу), был "перебит по важности" тем стилем, что указан в медиазапросе.
Например, ширина ячеек для десктопа 50% и у вас две картинки в один ряд, а на мобилке вы задаете этим ячейкам класс и в медиазапросе говорите, что если ширина устройства менее 600px, то задать ширину этим ячейкам в 100% и тогда они будут друг под другом. Пример медиазапроса ниже:
Темная тема Google
В своей темной теме Google может раскрашивать все на свое усмотрение и на это практически невозможно повлиять. Есть вариант попробовать вставить в head в style медиазапрос, код ниже, в ряде устройств он работает. Попробуйте задать повышенный приоритет, т.е. в медизапросе указать тег с классом и, конечно, !important.
Надеюсь, эта статья была полезна!
Если нужна помощь или нужно разобрать какой-либо вопрос, пишите в комментарии, чем смогу помогу 🍻
Удачи в проектах!