Особенно учитывая, что почтовые клиенты верстка писем все больше интегрируют функции для их использования. Вёрстка email-рассылок отличается от веб-вёрстки большим количеством ограничений и особенностей. Если не знать нюансов, письмо будет некорректно отображаться в некоторых или даже всех почтовых клиентах. Подробно рассказываем, как верстать письма и какие инструменты мы используем для их подготовки.
Используйте таблицы для структуры
Лучше использовать такой подход когда возможен конфликт стилей. Иногда компьютерная страница содержит столько всего, что адаптировать это на мобильную версию нереально или очень сложно. Стратегия Mobile First предлагает не переводить ПК-версию на мобильную. Философия метода строится на том, что сначала мы прорабатываем мобильный интерфейс, а потом уже версию для ПК.
Основные элементы и структура HTML письма
После чего откроется редактор кода, куда можно скопировать html и нажать Save в правом верхнем углу. После чего вставляем код и можем сохранять его с помощью кнопки Save. На этой платформе также можно загрузить письмо файлом (html, htm, zip, rar и 7z), ссылкой или кодом. Почти во всех платформах есть возможность как собрать письмо в блочном редакторе, так и загрузить свой код. Часто забывают про текст предзаголовка, хотя он очень важен. Это текст, который отображается либо рядом, либо ниже темы письма.
Основы верстки HTML-писем для веб-разработчиков
К примеру, Gmail добавит дополнительные стили и превратит URL в ссылки. Используйте стандартные системные шрифты для отображения текстов писем — это самое простое и надежное решение. Но если необходимо внести изменения в типографику можно использовать веб-шрифты, например, Google Fonts.
Как тестировать отображение письма
Нашел информацию, что нужно просто делать табличную верстку и стили прописывать в самих тегах. Но сама верстка почему то не отображается когда я отправляю mail.А отражаются сами теги в виде теста . Может нужно специальные атрибуты прописать чтоб почтовик понимал что перед ним верстка мейла и правильно её отображал… Важно помнить, что некоторые почтовые клиенты даже plain-text письма будут отображать в качестве HTML-сообщений.
Цифры говорят о том, что необходимо уделять особое внимание тому, как письма отображаются на различных мобильных устройствах. Веб-дизайнер Массимо Кассандро публиковал на SitePoint полезную инструкцию по созданию адаптивных версий email-сообщений. Знание и правильное использование MIME-типов важно для обеспечения корректной обработки и отображения содержимого письма различными почтовыми клиентами и программами.
Однако, не все почтовые клиенты поддерживают медиазапросы, поэтому важно тестировать письма на различных устройствах. С помощью медиазапросов (media queries) можно создавать адаптивный макет. Они позволяют видеть с мобильных устройств дизайн email с измененными шрифтами, изображениями и фоном. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину письма, размеры изображений и текста, и т.д.
Например, неплохим инструментом является npm, но пакет Gulp Email Builder даже удобнее. Этот пакет является частью более масштабного проекта, существует и его Grunt-версия. Препроцессоры могут быть крайне полезными при создании email-верстки. Они могут значительно упростить код как для HTML, так и для CSS.
Для этого можно использовать Минификатор кода — он сжимает код в одну строку. Минимальный размер основного текста — 16 px с межстрочным интервалом в 150% [«полуторный»]. В дизайне имейл-рассылок лучше использовать безопасные шрифты (web safe). Поскольку не все шрифты универсально отображаются в почтовых службах и браузерах, используйте что-то из безопасных. Можете выбрать для себя 2–3 ходовых шрифта и ставить их во всех рассылках — пусть читатели привыкают к вашему стилю.
Гифки поддерживаются большинством почтовых клиентов, однако Outlook версий с 2007 до 2013 их не поддерживает — программа просто показывает первый кадр. Почтовые клиенты добавляют собственные стили, помимо тех, что были изначально выбраны разработчиком рассылки. Например, Gmail для всех шрифтов в ‹td› устанавливает значение. Также разработчики почтового сервиса Google лишь недавно анонсировали поддержку встроенного CSS и media queries. Еще один способ, который можно использовать при верстке писем, – это встраивание стилей прямо в HTML-элементы в качестве атрибута. Не все почтовые клиенты обработают фон, который прописан через стили CSS.
Чтобы сверстать рассылку, мало знать базовые правила HTML и CSS. Вы можете создать идеальное письмо и отправить его покорять интернет, но почтовым графическим движкам не понравится, как вписаны атрибуты, и все «полетит». В нашем блоге мы уже неоднократно рассказывали о создании интерактивных email-рассылок с помощью CSS и HTML. Сегодня же речь пойдет о самом подходе к созданию верстки. Итальянский дизайнер Массимо Кассандро на сайте SitePoint описал свой процесс разработки html-писем. В нем есть несколько интересных моментов, так что мы решили сделать адаптированный перевод этой заметки.
В HTML-вёрстке писем есть обязательные атрибуты, которые нельзя игнорировать, иначе вёрстка выйдет кривой. Иногда проще воспользоваться встроенным редактором, в коде блоков которого уже учтены все нюансы. Создание макета возможно и без контента, но тогда ТЗ нужно составить как можно более подробно, с указанием структуры и содержимого. Даже если вы досконально знаете HTML и CSS, над письмом надо будет потрудиться.
Это поможет ускорить загрузку письма и улучшить пользовательский опыт. С каждым годом появляются новые возможности в CSS, включая анимации и более сложные интерактивные элементы, такие как встроенные формы и корзины покупок. Это открывает новые перспективы для дизайнеров и разработчиков, стремящихся создавать более динамичные и интерактивные email-кампании. Создать отдельный файл с CSS-кодом и вставить в ваш HTML-код через , хотя это не всегда поддерживается почтовыми клиентами. Один минус — Mail.ru и Яндекс Почты на этих сайтах нет.
Поэтому вместо специфичных HTML-тегов и атрибутов нужно использовать универсальные — они поддерживаются всеми почтовыми клиентами и браузерами. Чтобы потенциальный клиент мог прочитать письмо с любого девайса, попробуйте прописать медиа-запросы. Это команды, которые приспосабливают макет HTML-письма к экранам разного формата. Минус медиа-запросов — их поддерживают не все почтовые клиенты и сайты. Подробнее об этом способе адаптации писем рассказали на Хабре. Для тега‹img›можно прописать стилевые правила текста, например colorили font-family, которые будут применяться к alt-тексту.
- Работая с изображениями в письме, необходимо использовать абсолютные адреса.
- Причём проблемы могут возникать как в новых, так и в старых версиях HTML и CSS.
- Можно даже не переходить к коду, чтобы задать отображение/отключение отдельных блоков, а воспользоваться переключателями в редакторе.
- Про дизайн email-рассылок у нас есть отдельная подробная инструкция.
Этот вариант проще, но для него нужен подходящий дизайн. В некоторых случаях на помощь приходят медиазапросы. Например, когда дизайн не до конца продуман и плохо поддаётся адаптации. В случаях, когда фон, например, с градиентом или нестандартной формы, но требуется, чтобы текст был текстом, можно использовать фоновое изображение. Но в таком случае придётся пожертвовать отображением в Outlook и не использовать особую структуру для фона, так как отображение будет искривлено.
Эта стратегия не бюджетная, обычно она вписывается в долгосрочную маркетинговую стратегию. Чтобы выделиться среди конкурентов, одного только качественного контента недостаточно. Учитывая, как за его внимание борются даже в почтовом ящике, клиенту мало просто хорошего предложения. Клиент хочет, чтобы предложение было просто и приятно читать. Давайте попробуем сверстать «скелет» рассылки, просто выполняя следующие правила. Мы хотим дать вам не только рекомендации по верстке, но и показать, как это работает.
Поэтому нужно каждый раз проверять изменение элемента или строки кода, чтобы убедиться, что он отображается правильно. Один из самых простых способов – подготовить исходное изображение в 2Х-размере и разделить их пополам уже в редакторе. Вариант создания резиновой верстки в письмах — использовать оборачивающие дивы с указанием максимальной ширины max-width. Так как Outlook не поддерживает это правило, под него прописываются специальная инструкция-комментарий, в которой заключена табличная верстка. Некоторые почтовые программы по умолчанию показывают картинки, а некоторые их блокируют. Помимо прочего, это оказывает влияние на возможность сбора статистики.
IT курсы онлайн от лучших специалистов в своей отросли https://deveducation.com/ .
دیدگاهتان را بنویسید