Email Рассылка Верстка

email рассылка верстка

Из песочницы Уже 3 с лишним года занимаюсь дизайном и версткой почтовых рассылок, которые ориентированы на англоязычных пользователей. За время работы перелопатили огромную кучу информации, перепробовали много вариантов верстки, набили достаточное количество шишек. Были найдены и исправлены типичные баги, которые в той или иной мере повторялись во всех почтовых клиентах. Также нашлись проблемы с некоторыми CSS свойствами — различные почтовые клиенты интерпретировали их по разному.

Каждое письмо тестировалось на самых популярных почтовых клиентах: Рассылки ходят на сотни миллионов пользователей и приносят очень хорошие результаты. Итак, приступим к изучению. Основные положения Для верстки писем используется табличная верстка. Используем только Inline-стили, то есть применять непосредственно к тегам. Писать CSS в тегах head и body запрещено, так как некоторые клиенты будут удалять все, что находится в этих тегах.

Такие конструкции не будут работать в head и body: Если использовать ширину больше этого значения, то письмо по ширине не поместится в почтовый клиент. Обязательные свойства для HTML-тегов Для html-тегов табличной верстки существуют свойства, которые обнуляют лишние отступы, бордеры, а также избавляют нас от некоторых багов в будущем.

Их нужно использовать всегда во всех html тегах письма. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами; -webkit-text-size-adjust: По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему; display: Не стоит использовать CSS свойства для наложения фона, они будут игнорироваться некоторыми почтовыми клиентами: Отступы Для отступов можно использовать пустые ячейки таблицы с прописанной высотой или шириной, но этот метод уже устарел, так как влечет за собой нагроможденность кода.

Отступы можно делать с помощью CSS свойства padding. Свойство margin тоже работает но полностью не поддерживается в веб версии почтового сервера Outlook. Советую применять padding к ячейке таблицы: Он показывает браузеру, каким образом интерпретировать HTML-разметку.

Для писем наиболее подходящим доктайпом является: Работа с текстом Чтобы сделать акцент в тексте на фразе или слове, мы можем визуально выделить данный участок текста. Для этого мы можем использовать стили font-weight: Цвет Все цвета в письмах задаются в виде трех пар шестнадцатеричных цифр HEX dddddd. Также мы знаем, что в верстке сайтов применяют сокращенную запись. Например, ffffff можно сократить fff. Но в верстке писем этого делать не нужно, некоторые почтовые клиенты не понимают такой записи.

Также не нужно писать шестнадцатеричный код цвета всеми большими буквами. Не все почтовые клиенты это оценят. Например, D4D4D4 нужно записать в таком виде: RGB запись цвета тоже не воспринимается должным образом. Например, такая запись цвета rgb ,, не будет работать. Картинки Существуют почтовые клиенты, которые по умолчанию не показывают картинки и только после клика на определенную кнопку картинки начинают отображаться. Это вызывает некие проблемы в верстке писем.

Если картинки не показываются и не задана ее ширина и высота вместе, то почтовый клиент не знает, какого размера эта картинка и как рендерить свободное место. Таким образом, картинка занимает все свободное пространство. Всегда пишите ширину и высоту картинки, чтобы избавится от таких проблем. Если нет такой возможности, указывайте ширину картинки и тогда письмо не будет рваться в стороны.

Решение проблем В работе с почтовыми рассылками встречаются не совсем стандартные баги. Это связанно с нюансами отображения писем различными почтовыми клиентами. Если использовать span или другой строчный тег, то телефонные номера и e-mail адреса Gmail оборачивает в ссылку и присваивает класс с синим цветом: Для решения этой проблемы нужно электронную почту и телефон изначально оборачивать в ссылку.

Также необходимо указать нужные стили для ссылок. В веб версии почтового клиента Outlook не желательно использовать строчные элементы, так как по умолчанию почтовый клиент добавляет собственное значение line-height. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: Шрифты В почтовых рассылках допускается использование только стандартных шрифтовых наборов, которые присутствуют на всех устройствах.

Представляю вашему вниманию список безопасных шрифтов, которые есть на всех устройствах. Arial, Helvetica, sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: Verdana, Geneva, sans-serif; Таким образом, эти шрифты можно использовать в рассылках без страха и риска. Если вы все же хотите использовать совсем нестандартные шрифты через правило font-face, то будьте внимательными, это правило работает только в IOS, Google mail и Android 4 Gmail.

Адаптивная верстка На данный момент существует огромное количество методов верстки адаптивных писем, но мы остановимся на одном из них. Суть данного метода заключается в следующем: Внутренние блоки, которые располагаются горизонтально, при нехватки места прыгают друг под друга, таким образом все элементы письма, которым не хватает, будут уходить вниз.

Система подстраивания письма под размер экрана реализована с помощью стилей и тега center, который находится сразу после основной таблицы письма. Получается, что весь контент оборачивается тегом center: Когда размер главной страницы становится меньше хоть на один пиксель, то блокам не хватает места и блок номер 2 становится под блоком номер 1.

Вся наша структура не будет работать в MS Outlook десктоп, поэтому специально для него мы сделаем проверку и будем вместо тега center и span подставлять обычные таблицы: Следующая статья будет посвящена использованию CSS 3 свойств в верстке писем. Также расскажу об CSS анимации в рассылках.

Основы верстки HTML-писем для веб-разработчиков

Вы можете скачать бесплатную демо-версию программы и читая статью, сразу тренироваться в сотворении своего email шаблона. Формат шаблона html-писем Первым делом вам нужно определиться со структурой шаблона письма на основе таблицы. Для рассылок, лучше всего работают одно- и двухколоночные макеты, потому что они позволяют максимально четко и доступно структурировать большой объем информации. Одноколоночный макет к тому же отлично отображается в мобильной версии и на планшете.

Чаще всего одноколоночный макет включает в себя: Хедер шапку , что содержит логотип и навигационные ссылки с родительского вебсайта. Основное тело письма с контентом, картинками и ссылками на веб-страницы с полной информацией, обзор которой подан в письме.

Футер подвал письма, который, бывает, дублирует ссылки навигации, а также включает в себя инструкцию на отписку и ссылку отписки непосредственно. Те же элементы содержит и двухколоночный макет, с той лишь разницей, что колонки у него две и при отображении письма на мобильном устройстве колонки могут сдвигаться одна под другую принцип респонсивности , а могут масштабироваться согласно размеру экрана что не всегда удобно, если шрифт получается слишком мелким.

При более подробном рассмотрении оказалось, что все стили, находящиеся в head, дублируются, помимо этого дублировались теги head и body, как открывающиеся, так и закрывающиеся. Полистав более подробно документацию, удалось выявить проблему. Она заключалась в том, что Foundation сам создает head и body со всем необходимым, а вам остается только сверстать само письмо. Также для шаблонных рассылок рекомендуем вам использовать Custom Data.

Это пользовательские данные, которые могут быть добавлены на страницу, а после сгенерированы в ваш HTML через Handlebars.

Что позволит вам избавиться от необходимости править HTML. Вместо вертикальных отступов используйте таблицу с ячейкой, у которой задан атрибут высоты, это гарантированно даст вам нужный отступ во всех почтовых клиентах. Верстка email рассылок от А до Я для чайников / Хабр Тем более с Inky это делается одной строкой. Если вы решили использовать spacer для задания высоты, но в мобильных клиентах он вам кажется слишком большим, вы всегда можете его скрыть, добавив в вашу разметку класс. Также хотим обратить ваше внимание на класс.

Не рекомендуем использовать этот класс, так как он не поддерживается в Gmail и Yahoo. Если делаете кнопку, делайте ее так же с помощью таблицы, иначе рискуете получить текст залитый цветом.

В Inky есть готовый компонент button, главное не забудьте указать атрибут href, иначе придется гадать, почему у вас вместо кнопки простой текст. Не все почтовые клиенты поддерживают background-image, но так как наша основная шапка и тело письма как раз имели такой дизайн, мы выбрали подход graceful degradation, при котором в основных почтовиках используется фоновая картинка, а в почтовых клиентах, которые не имеют этой поддержки, используется заливка цветом. Таким образом мы не теряем читаемость текста.

В нашем примере уголок сделан с помощью псевдоэлемента: Еще подобный пример В процессе разработки нам необходимо проверять получившийся результат нашей верстки. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему; display: Не стоит использовать CSS свойства для наложения фона, они будут игнорироваться некоторыми почтовыми клиентами: Отступы Для отступов можно использовать пустые ячейки таблицы с прописанной высотой или шириной, но этот метод уже устарел, так как влечет за собой нагроможденность кода.

Отступы можно делать с помощью CSS свойства padding. Свойство margin тоже работает но полностью не поддерживается в веб версии почтового сервера Outlook. Советую применять padding к ячейке таблицы: Он показывает браузеру, каким образом интерпретировать HTML-разметку. Для писем наиболее подходящим доктайпом является: Работа с текстом Чтобы сделать акцент в тексте на фразе или слове, мы можем визуально выделить данный участок текста.

Для этого мы можем использовать стили font-weight: Цвет Все цвета в письмах задаются в виде трех пар шестнадцатеричных цифр HEX dddddd. Также мы знаем, что в верстке сайтов применяют сокращенную запись. Например, ffffff можно сократить fff. Но в верстке писем этого делать не нужно, некоторые почтовые клиенты не понимают такой записи.

Также не нужно писать шестнадцатеричный код цвета всеми большими буквами. Не все почтовые клиенты это оценят. Например, D4D4D4 нужно записать в таком виде: RGB запись цвета тоже не воспринимается должным образом. Например, такая запись цвета rgb ,, не будет работать. Картинки Существуют почтовые клиенты, которые по умолчанию не показывают картинки и только после клика на определенную кнопку картинки начинают отображаться.

СМС, Вайбер и email-рассылка для кафе, баров и ресторанов Идеи для поздравлений с 1 Сентября в году Email, СМС и Вайбер рассылка для салонов красоты (Видео). Это приводит к тому, что часто бывают случаи, когда при насильном переносе после ого символа строка разбивается внутри тега. Например: было, а стало и вся верстка «слетает». Email-рассылка стоит недорого, но приносит быстро нужный результат. Все письма приходят постоянно, но не как спам. Автосервисы email-маркетинга могут присылать спам/5(K).

Предыдущая статья: настроить imacros

Следующая статья: примеры письма email рассылки