После того, как наше письмо задизайнено и свёрстано, нужно верстка писем его протестировать. Пропишите прехедер, мотивирующий узнать, что внутри. Клиент должен захотеть открыть и почитать ваше письмо.
Зачем нужна HTML-верстка электронных писем
Как правило, для этого используются специальные картинки малого размера — пиксели отслеживания. Это значит, что если почтовая программа блокирует изображения, то понять, открыл ли пользователь письмо, просто не удастся. Используйте встроенные стили (inline styles) для обеспечения совместимости с различными почтовыми клиентами. Встроенные стили применяются непосредственно к HTML элементам и гарантируют, что стили будут применены корректно. Автоматизация процесса верстки может значительно упростить создание регулярных email-рассылок.
Правило №2. Применяем универсальные HTML-теги и атрибуты
Но если вам без подготовки нужно собрать простое письмо, то вполне можно воспользоваться и конструктором. Первая таблица по ширине 100% экрана задаёт фон, минимальную ширину, размер шрифта в 1 px, чтобы не вылезло ненужных отступов. Как мы уже говорили, заниматься вёрсткой писем для email рассылки проще всего в блочном редакторе. Он позволяет добавить почти все необходимые элементы, не углубляясь в сложные процессы. По данным исследования компании AdIndex, email-маркетинг признан самым эффективным каналом продвижения. С популярностью мобильных устройств многие дизайнеры и разработчики начали делать письма и для мобильных дисплеев.
Основные правила вёрстки рассылок
Мы обрисовали в общих чертах самые распространенные запреты и требования к коду email в формате HTML. Можно даже не переходить к коду, чтобы задать отображение/отключение отдельных блоков, а воспользоваться переключателями в редакторе. — подсказывает почтовому клиенту, как отображать текст и специальные символы. Также теги HTML могут ссылаться на контейнер с CSS, который находится на другом сайте. Но если вы затеваете масштабную и длительную работу с ручной версткой, лучше загрузить все необходимое на свой сервер. Существует множество других тегов для различных команд.
Используйте таблицы для структуры
Следуйте описанным выше советам и вы сможете создать качественный шаблон письма, не совершая распространенных ошибок, даже если это ваша первая рассылка. Иногда в прехедер может попадать служебная информация, вроде иконок соцсетей, призывов к действию или фразы «Открыть в браузере». Не допускайте таких ошибок, а используйте прехедер по максимуму. Мы в SendPulse предоставляем услугу дизайна шаблонов, но но есть и специализированные агентства, как Site Elite Studio. Массимо Кассандро залил этот код на Codepen — это специальная песочница, в которой можно протестировать пример, подставляя собственные данные.
Отзывчивый дизайн в email-верстке необходим для обеспечения корректного отображения письма на различных устройствах. Адаптивная верстка необходима для корректного отображения письма на различных устройствах, включая мобильные. Она позволяет содержимому письма адекватно отображаться как в вертикальном, так и в горизонтальном режимах. При верстке электронных писем часто рекомендуется встраивать стили CSS непосредственно в HTML-документ, чтобы гарантировать их совместимость с разными почтовыми клиентами. Однако важно помнить, что не все стили CSS будут поддерживаться всеми клиентами одинаково.
Она может незначительно отличаться от того, как будет выглядеть на реальном телефоне получателя, так как размеры экрана и другие параметры меняются от устройства к устройству. В примере письма мы используем DOCTYPE HTML 4.01 Transitional, который поддерживает все актуальные элементы и атрибуты документов в HTML 4.01. Подробнее о вариантах отображения можно прочитать на Хабре, в статье, посвященной тегу. Однако для более точных тестов все равно придется выполнять отправку писем вручную. Для автоматизации этой задач можно использовать скрипты, но все равно полностью избежать рутины не удастся. Расскажем об особенностях верстки email шаблонов — в чем основные проблемы верстки, как работать с мультимедиа, шрифтами и адаптивностью.
Одно изображение, которое ведет к разным URL-адресам (Image maps), не распознается многими почтовыми клиентами. Чтобы все было в порядке, нарежьте свои изображения на несколько отдельных картинок, и каждую свяжите с нужной веб-страницей. Работая с изображениями в письме, необходимо использовать абсолютные адреса.
- Тогда изображения будут отображаться в почтовых ящиках получателей.
- Она позволяет содержимому письма адекватно отображаться как в вертикальном, так и в горизонтальном режимах.
- Особенно учитывая, что почтовые клиенты все больше интегрируют функции для их использования.
- CSS мы прописываем в HTML-коде через внутренний (inline) стиль или ссылаемся на сторонние классы стилей.
- В этом случае сначала создают письмо для мобильных гаджетов, а потом — для компьютеров.
- К столбцу прописаны свойства background-image, background-position, background-repeat, background-size, bgcolor.
Поэтому свойство background и его производные (background-image, background-visibility, background-size) лучше не применять. Поэтому пробуем открыть письмо через почтовые клиенты. Письмо может отлично выглядеть в браузере, но некрасиво разъехаться в мобильном приложении Gmail или старенькой версии Outlook. Как видим, в этом случае адаптация происходит за счёт уменьшения картинки и кнопки.
Если вы не планируете вникать во все тонкости ручной верстки, воспользуйтесь бесплатными сервисами для запуска email-рассылки. Если хочется попробовать свои силы, двигаемся дальше. Email Builder позволяет осуществлять инлайнинг или встраивание CSS-файлов для осуществления тестов через специальные платформы, или отправки тестовых email-писем. Существуют различные скрипты, позволяющие автоматизировать тестирование.
Некоторые почтовые клиенты не поддерживают сложные CSS свойства, такие как анимации, градиенты и т.д. Старайтесь использовать простые и проверенные свойства. Например, вместо использования градиентов можно использовать однотонные цвета, а вместо анимаций — статичные изображения. Хотя блочные конструкторы могут быть удобным решением для простых задач, глубокое понимание HTML и CSS остается ключевым для создания более сложных и уникальных дизайнов.
Отправляйте цепочки триггерных сообщений приветствия, брошенной корзины, реактивации, совмещая внутри одной цепочки email, SMS и web push. Размещайте изображения и другие ресурсы на CDN (Content Delivery Network) для ускорения загрузки. CDN распределяет контент по серверам по всему миру, что позволяет пользователям загружать ресурсы с ближайшего сервера. Верстка HTML-писем может вызывать различные проблемы в зависимости от почтового клиента или браузера. У них могут быть различные причины и соответствующие методы решения. Здесь также есть некоторые ограничения по сравнению с веб-версткой.
Первый — обычный, второй используют для анимации, а третий — если нужен элемент с прозрачным фоном. По классике почтовые рассылки и шаблоны верстаются в HTML. Согласно исследованию Litmus, 43% пользователей читают сообщения с мобильных телефонов. Декоративные шрифты лучше не использовать или вставлять в виде изображений. В погоне за креативностью и уникальным дизайном не стоит забывать о главной задаче рассылок — достижении целей конверсий. Верстка электронного письма связана с определенными правилами и постоянным тестированием.
Это происходит из-за различий в интерпретации HTML-кода разными почтовыми клиентами и браузерами. Верстка HTML писем требует учета множества нюансов и особенностей. Не забывайте о важности тестирования и оптимизации, чтобы ваши письма были не только красивыми, но и функциональными. Создать HTML-вёрстку писем для email-рассылки — не то же самое, что создать HTML-вёрстку сайта или лендинга. В email только табличная вёрстка позволяет рассылке нормально отображаться.
Если изображение при адаптации нужно уменьшить, указываем максимальную ширину 100%. Так изображение будет подстраиваться под ширину блока-родителя. Для вёрстки писем подходит доктайп 4.01 и кодировка utf-8. Можно воспользоваться PutsMail или использовать HTML-редактор в Thunderbird. Если пользуетесь Premailer, у него есть список с описанием CSS-атрибутов, применяемых в таких случаях. Просмотрите статистику своих рассылок, чтобы знать, для какого движка придется чаще всего верстать шаблоны.
В описанных выше способах мы для мобильных разрешений меняем изначально заданную ширину таблиц и ячеек, превращая их в блочные элементы. В таком случае верстка не является по-настоящему резиновой — мы просто прописываем нужные стилевые правила под определенные разрешения экрана. Плюс этот способ не сработает в мобильных почтовых клиентах, таких как Яндекс.Почта и Mail.ru под iOS и Android, которые не поддерживают медиазапросы. Помимо использования инструментов, важно тестировать письма на реальных устройствах и в различных почтовых клиентах, таких как Gmail, Outlook, Apple Mail и т.д.
IT курсы онлайн от лучших специалистов в своей отросли https://deveducation.com/ .
