…

HTML-верстка для email-рассылки

Темы контента и дизайна письма мы обсудили в двух последних статьях, теперь займемся версткой. Получить готовый макет email-рассылки вы можете двумя способами: сайт-конструктор или ручная HTML&CSS-верстка. Первый вариант технически проще, но он проигрывает второму. Потому что количество шаблонов ограничено конструктором, да и приедаются такие однотипные рассылки быстро.

Чтобы контент письма получился интересным, читабельным и функциональным, предлагаем вам ручной способ: язык разметки HTML + язык стилей CSS.

Что такое HTML и CSS по-русски

Если вы не планируете вникать во все тонкости ручной верстки, воспользуйтесь бесплатными сервисами для запуска email-рассылки. Если хочется попробовать свои силы, двигаемся дальше. Начнем с краткого ликбеза.

В двух словах, HTML — строительный материал для веб-страниц, язык разметки. Он состоит из специальных тегов, которые содержат команды для браузера:

• — название документа
• …— чтобы вставить ссылку
• … — чтобы вставить картинку
• . — содержит команды, которые объясняют почтовым движкам, как отображать письмо
• … — обозначает видимое содержание страницы

Существует множество других тегов для различных команд. Полный список можно посмотреть здесь.

Обычно теги открываются <> и закрываются — это попарные. Если в этой статье вы увидите незакрытые теги, они относятся к одиночным. Например: и
.

Теги диктуют команды, на основе которых строится содержимое страниц.

Язык стилей CSS добавляет на страницу эффекты, анимацию и прочую красоту. CSS мы прописываем в HTML-коде через внутренний (inline) стиль или ссылаемся на сторонние классы стилей.

1 — задаем CSS через внутренний стиль; 2 — через сторонние классы стилей

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

Чтобы сверстать рассылку, мало знать базовые правила HTML и CSS. Вы можете создать идеальное письмо и отправить его покорять интернет, но почтовым графическим движкам не понравится, как вписаны атрибуты, и все «полетит». Чтобы рассылочное письмо максимально точно передало ваши мысли и дизайн, рассмотрим базовые правила верстки HTML-рассылки и сложные, но важные нюансы, которые нужно обязательно учитывать.

Где писать код

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

Sublime открывает файлы, позволяет вносить однотипные изменения сразу в несколько строк, автоматизировать работу индивидуальными настройками для каждого проекта и многое другое

Вы можете написать код даже в «Блокноте», но мы все-таки советуем использовать визуальные HTML-редакторы для проверки: CodePen, HTML-online и другие. Они не подойдут для полноценной верстки письма, но помогут проверить результат.

Еще один вариант: использовать редактор, в котором можно одновременно писать код и проверять его отображение — например, Brackets.

Формат шаблона HTML-писем

Ручная верстка радует нас многообразием блоков, дизайнов, вставок, но даже такое email-письмо предусматривает шаблон:

• Хедер. Шапка письма, которая обычно содержит логотип, навигационные ссылки. На языке HTML это все, что находится между тегами и .
• Тело. Текст, картинки, ссылки, анимация. Контент ограничивается тегом .
• Футер. Подвал письма. Обычно здесь находятся кнопки перехода на соцсети, ссылки на обратную связь и отписку от рассылки. Иногда футер сливается с телом письма и не выделяется.

Давайте попробуем сверстать «скелет» рассылки, просто выполняя следующие правила. Мы хотим дать вам не только рекомендации по верстке, но и показать, как это работает.

Создание документа. Хедер

Начинаем писать код для email-письма. Здесь и далее пользуемся визуальным редактором HTML-Online:

XHTML-документ, с которого начинается верстка

Обращаем ваше внимание, что письмо открывает не хедер (). Перед ним надо прописать:

— если простыми словами, то это переводчик или режим отображения контента. Он объясняет почтовому клиенту, как правильно читать письмо: какие будут теги и наборы правил HTML, CSS. Доктайпы бывают разные — для разных HTML и режимов.

В примере письма мы используем DOCTYPE HTML 4.01 Transitional, который поддерживает все актуальные элементы и атрибуты документов в HTML 4.01. Его еще называют переходным синтаксисом XHTML. Подробнее о вариантах отображения можно прочитать на Хабре, в статье, посвященной тегу.

— подсказывает почтовому клиенту, как отображать текст и специальные символы.

— уточняет, что текст нужно читать через HTML.

Тело письма: таблица

Оптимальные версии для верстки писем — HTML 4 и CSS 2. Почтовые клиенты и браузеры не поддерживают некоторые теги следующих версий. Поэтому после того, как мы закрываем тег , открываем теги и

С точки зрения верстки наша рассылка будет выглядеть как таблица в таблице. А вот правила и рекомендации, которые облегчат вам табличную верстку:

1. Чтобы предупредить появление пустого пространства в шаблоне, значения margin и padding ставим нулевыми.
2. Поскольку главная таблица — каркас всего письма, ее ширина должна быть 100%. Ширина письма фиксированная, 600 или 660 px.
3. Чтобы убрать ненужные отступы от границ ячейки таблицы, cellpadding и cellspacing также приравниваем к нулю.
4. Для вложенной таблицы используем атрибут со значением «collapse». Так почтовый движок будет знать, как правильно отображать границы вокруг табличных ячеек.

Фоновый цвет ячейки задаем через тег . Значения цветов для писем обязательно нужно прописывать форматом HEX (#6 символов кода). Например, — ячейка окрасится в серый цвет. Если вы используете другие обозначения — например #FFF для белого вместо #FFFFFF, — в письме цвет не отобразится.

Изображение вставляем прямо в ячейку, предварительно расставляем отступы от картинки до внутренних границ ячейки через свойство . Можем использовать расширенную (padding-top: 5px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px;) или краткую (padding: 5px 0px 10px 0px;) форму записи. Обязательно прописываем alt для картинки (текст или символы, которые увидит получатель рассылки, если у него не отобразится картинка) и вставляем рабочую ссылку на источник картинки.

Вот как это выглядит на практике:

Футер

Сделаем простой футер: контакты и ссылка отписки. Поскольку это два разных элемента, поделим строку «Or die» на две таблицы. Перед ними прописываем padding. Содержимое ячеек выравниваем на свое усмотрение атрибутом align.

Вот как изменилась строка «Or die», которую мы превратили в футер:

Чтобы сделать футер кликабельным, используем тег

Кнопка и ссылки перехода

Чтобы добавить в рассылку кнопку, берем подходящую картинку, вставляем ее в ячейку (тег с атрибутом src=%источник, откуда берем картинку%) и добавляем ссылку перехода (на целевую страницу, в приложение). Применим этот вариант для нашего «скелета»:

Не забываем прописывать alt и для кнопки

Безопасные универсальные шрифты

Конечно, наш скелет не подходит для отправки подписчикам. Как минимум, мы использовали скучные шрифты, которые напоминают пользователям о школьных рефератах в стиле Microsoft Office Word.

Чтобы выделиться среди конкурентов, одного только качественного контента недостаточно. Учитывая, как за его внимание борются даже в почтовом ящике, клиенту мало просто хорошего предложения. Клиент хочет, чтобы предложение было просто и приятно читать. Выбор шрифта отыгрывает здесь не последнюю роль.

Поскольку не все шрифты универсально отображаются в почтовых службах и браузерах, используйте что-то из безопасных. Можете выбрать для себя 2–3 ходовых шрифта и ставить их во всех рассылках — пусть читатели привыкают к вашему стилю.

Подробнее тему шрифтов мы разобрали в статье о дизайне email-рассылки.

Адаптивная верстка, или «Отзывчивый email-дизайн»

По данным ТАСС, в 2019 году мобильный трафик в России вырос в 1,5 раза — до 3,3 млрд гигабайт. С мобильным трафиком растет и количество пользователей, проверяющих почту со смартфонов и планшетов. Сверстав рассылку руками, вы должны позаботиться и об адаптивной верстке. Иначе ваше письмо может выглядеть как-то так:

Текст письма подстроился под новую ширину экрана с неравномерными промежутками между словами. Это выглядит рвано и неаккуратно — такое письмо скорее оттолкнет читателя

Непроработанные интервалы между блоками письма привели к слипанию контента

При верстке не учли адаптацию под смартфон, из-за чего хедер со всем контентом уехали вниз

Понятие «отзывчивого дизайна» появилось в 2010 году. Смысл в том, что вне зависимости от формы дисплея устройства один и тот же контент смотрится по-человечески, читабельно. Хотя за последние 9 лет появилось много стратегий по адаптационной верстке, HTML-рассылок это не касается. Почтовые клиенты и сайты отображают не все способы адаптивной верстки. А из тех, что работают неплохо, выделим две: медиа-запросы и Mobile First.

Медиа-запросы. Чтобы потенциальный клиент мог прочитать письмо с любого девайса, попробуйте прописать медиа-запросы. Это команды, которые приспосабливают макет HTML-письма к экранам разного формата. Минус медиа-запросов — их поддерживают не все почтовые клиенты и сайты. Подробнее об этом способе адаптации писем рассказали на Хабре.

Mobile First. Иногда компьютерная страница содержит столько всего, что адаптировать это на мобильную версию нереально или очень сложно. Стратегия Mobile First предлагает не переводить ПК-версию на мобильную. Философия метода строится на том, что сначала мы прорабатываем мобильный интерфейс, а потом уже версию для ПК. Эта стратегия не бюджетная, обычно она вписывается в долгосрочную маркетинговую стратегию.

Источник

Как сделать красивую кнопку в письме

То, как выглядит ваше письмо, имеет очень большое значение для подписчика. Контент, конечно, король, но, если вы будете рассылать только текст, с торчащими отовсюду ссылками и расставленными невпопад картинками, а ваш конкурент отправит ту же информацию, но оформит ее красиво и профессионально, как думаете — кого выберут подписчики? Правильно!

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

Однако здесь не обойтись и без сложностей. Кнопки можно отнести к интерактивному контенту. В идеале хочется видеть их объёмными, кликабельными и реагирующими на щелчок пользователя.

Однако, как раз последнего эффекта в рассылке достичь крайне сложно.
Из-за технических особенностей почтовых клиентов вставить кнопку с тем же кодом, что и на сайте, в письмо не получится.

Впрочем, в запасе у нас, как всегда, есть парочка обходных путей 🙂

Как вставить кнопку в письмо

#1. Разместить кнопку картинкой

Очевидный способ: находим подходящее изображение кнопки (просим нарисовать дизайнера), пишем мотивирующую к действию надпись — узнать больше, читать полностью — и аккуратно вырезаем то, что получилось, и вставляем в нужное место письма. Это подходит, если вы пользуетесь профессиональным сервисом для рыссылок SendExpert

Если же вы еще пользуетесь обычными почтовыми сервисами, то вам помогут советы, изложенные ниже. Для почтовых клиентов, которые по умолчанию могут не загружать картинки (например, gmail), страхуемся: прописываем в html-коде изображения стили фона и шрифта, а также alt-текст:

«Подкладываем» под картинку нужную ссылку и добавляем последний штрих — атрибут title.

Пусть при наведении на кнопку подписчику демонстрируется небольшая подсказка, что именно произойдёт, если он кликнет на изображение:

Достоинства этого способа: вы можете вставить в письмо любую, сколь угодно «навороченную» графически кнопку.

Недостатки: кнопка в этом случае — всё же обычная картинка, которая может и не загрузиться в части почтовых клиентов.

#2. Разместить кнопку таблицей

Кнопку в письме можно сверстать «классическим» html-кодом.
Для этого просто создаем ее как ячейку во вложенной таблице. Для ячейки прописываем цвет фона, обрамление границей, стиль/размер/цвет шрифта:

Такую кнопку удобно редактировать: поменять цвет, вписать другой текст (не забываем про ссылку с атрибутом title, чтобы расшифровать подписчику действие кнопки).

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

Кнопки могут украсить ваше письмо. Правильно оформленная и размещенная кнопка поможет приподнять и клики.

Однако надеяться, что этот «волшебный» рецепт увеличения кликабельности в 2-3 раза, не стоит. Решающую роль в email маркетинге, все-таки, играет контент ваших писем. Если предложение подписчика не заинтересует, никакая сила не заставит его сделать клик мыши, даже если все ваше письмо будет одной сплошной кнопкой.

Источник