О чем нужно подумать перед версткой HTML письма
Первое и самое главное – отписка от рассылки.
По Российскому (и не только) законодательству, в каждом письме обязательна должна быть возможность отписаться от рассылки. Отправка сообщений получателю, пожелавшему отписаться, должна быть немедленно прекращена.
Для этого в Convead есть специальный механизм отписки. Если вы создаете рассылку на основе стандартных шаблонов, то можете вообще об этом не думать – ссылка «Отписаться» зашивается в письмо автоматически. Для любителей собственной HTML-верстки писем в Convead предусмотрен механизм отписки. В каждое сообщение обязательно должна быть вставлена ссылка «Отписаться» с тегом *|UNSUB|* вместо которого при отправке автоматически подставляется ссылка на стандартную страницу отписки.
Выглядеть в коде это может так:
<a href="*|UNSUB|*">Отписаться от рассылки</a>
Текст ссылки можно менять по своему усмотрению. Главное, чтобы он однозначно говорил получателю, что по этой ссылке можно пройти и отписаться.
Ссылку отписки многие делают незаметной, чтобы пользователи попотели, пока ее найдут. Дело ваше, но мы рекомендуем поступать наоборот – делать ссылку «Отписаться» заметной и явной. Это сильно снизит количество писем, попадающих в спам. Пользователи смогут просто отписаться от рассылки, вместо того, чтобы отправлять ее в спам-лист. Это действительно важно, потому, что каждое отправленное в спам письмо грозит серьезно испортить вашу репутацию.
Корректное отображение в почтовых клиентах
В общем случае, чем меньше усложнений, тем больше вероятность, что письмо будет корректно отображаться в разных почтовиках. И наоборот, чем хитрее верстка, тем сложнее добиться одинакового (или хотя бы корректного) отображения. Любителям уникальных HTML рассылок советуем придерживаться нескольких правил и тщательно тестировать письма во всевозможных почтовых клиентах.
Кодировка
Чтобы раз и навсегда избавиться от проблем с кодировкой, верстаем в UTF-8. В шапке прописываем:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
А про то, что символы в юникоде типа копирайта, длинного тире или кавычек-ёлочек нужно экранировать в сущности знают даже школьники 🙂
Лэйаут и отступы
Никакой блочной верстки. Только таблицы, как в старые добрые времена. Каждый почтовик имеет свое представление о правильных отступах, поэтому, устанавливая значение cellspacing мы никогда не будем знать, как выглядит письмо в том или ином почтовике. Поэтому, обнуляем их самостоятельно и коллапсируем таблицу, чтобы не вылезли лишние отступы там, где не надо:
<table style=”border-collapse:collapse;” cellspacing=”0”>...</table>
В отличие от cellspacing, cellpadding прекрасно работает во всех почтовиках. Именно им задается большинство отступов в таблицах. В хитрых и сложных случаях их можно эмулировать при помощи изображений-распорок 1×1 px. С прозрачностью gif-распорок может возникнуть проблема в старых версиях The Bat! если вас это смущает – используйте gif-ки цвета фона.
Стили
Общие стили в head для всего письма указывать бесполезно. Все, форматирование задается inline для каждого элемента: таблицы, текста, картинок и др. Т.е. стили для каждого элемента прописываются отдельно.
Абзацы
Здесь есть варианты. Можно использовать стандартный тег абзаца <p>, но при этом отступы в разных почтовиках будут разными. Если вас это не смущает – используйте абзацы. Если размер отступов критичен, то можно эмулировать абзацы либо таблицей, либо тегом <span> с полуторной высотой строки. Делается это так:
Для таблицы
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td>Текст абзаца</td> </tr> <tr> <td height="20"><img src="blank.gif" width="20" height="20" alt="" style="display:block;"></td> </tr> <tr> <td>Текст абзаца</td> </tr> <td height="20"><img src="blank.gif" width="20" height="20" alt="" style="display:block;"></td> </tr> <tr> <td>Текст абзаца</td> </tr></table>
Для <span>:
<span style="line-height:1.5em;"> Текст абзаца <br><br> Текст абзаца <br><br> Текст абзаца</span>
Цвет, размер, шрифт и др. настраиваем опять же в самом HTML для каждого элемента текста. Никаких общих тегов в шапке. Важный момент – если после верстки письмо может попасть в WYSIWYG редактор и его будет редактировать неподготовленный человек, то лучше заворачивать текст в тег <span>. Тег <font> не стоит использовать, т.к. HTML-редакторы его все равно превратят в <span>, причем каждый – на свой вкус, и результат будет непредсказуемым.
Универсальные атрибуты CSS
Используйте только поддерживаемые всеми (ну или самыми популярными) почтовиками атрибуты CSS.
Картинки
Среди создателей HTML-писем отношение к картинкам двойственное. Кто-то их любит и активно использует, а кто-то старается избегать. В бизнес-рассылках для интернет-магазина без изображений обойтись сложно (логотип, элементы фирменного стиля, фото товаров…) поэтому пара рекомендаций по их оформлению и использованию лишней не будет.
Во-первых, не представляйте важную информацию в виде изображения (название компании, контакты, название товара) т.к. картинки могут быть отключены в почтовике. Обязательно проверьте, как смотрится верстка с отключенными картинками.
Во-вторых, если картинка осмысленная, например, логотип или фото товара, то ей лучше прописать alt, чтобы при отключенных изображениях пользователь смог понять, что там нарисовано и при желании его загрузить и посмотреть. Если картинка чисто оформительская, оставьте атрибут пустым alt=»». Совсем убирать alt у картинок не нужно. Отсутствие этого атрибута – негативных признак для спам-фильтров.
В-третьих, обтекание картинки текстом. Во многих почтовиках обтекание при помощи align, vspace и hspace работать не будет. Спасаемся таблицами.
В-четвертых, фоновые изображения. Последние новости из мира верстки писем говорят, что Gmail наконец-то научился адекватно отображать фоновые картинки. Ура! Но все равно, лучше ими не злоупотреблять. Еще живы старые почтовики, которые не любят фоновые изображения.
Цвета
Шестнадцатеричные коды цветов нужно указывать полностью. Т.е. #bbb почтовики не понимают, нужно писать #bbbbbb. То же самое касается всех сокращенных конструкций типа border: 3px solid #bbb; Нужно писать так:
border-width: 3px; border-style: solid; border-color: #bbbbbb;
Ссылки
Всегда указывайте target = ”_blank” чтобы ваш сайт (или куда вы там хотите уводить пользователя из рассылки) не начинал открываться во вкладке почтового клиента. Определяя цвет ссылки, добавляйте important! чтобы почтовик не перекрашивал ссылку по своему усмотрению при наведении или клике. Если ссылка оформлена картинкой, установите border = ”0” для <img>, а для самого <a> пропишите text-decoration:none;
Мобильные почтовики
Чем дальше, тем чаще люди читают письма с мобильных телефонов. И ваши получатели тоже не исключение. Поэтому, при верстке писем нужно учитывать особенности мобильных почтовых клиентов.
Во-первых, для того, чтобы письмо нормально масштабировалось, а текст в нем был читаемым, нужно в head приписать мета-тег viewport следующим образом:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Во-вторых, для того, чтобы письмо адекватно смотрелось на маленьком экране смартфона, используется адаптивная верстка. Например, если в десктопной версии есть табличка с тремя товарами в ряд, то в мобильной (для разрешения экрана до 600 px) они должны выстраиваться один под другим. Не подходящие по размеру элементы можно скрывать при помощи медиа-запросов (Media Queries):
@media only screen and (max-width: 600px){ img[class=hidden], table[class=hidden], ui[class=hidden] { display: none!important; }}
Media Queries понимают только стандартные почтовики iOS Mail, Android и Windows Phone. Любители нестандартных клиентов Mail.ru, Gmail и т.д. увидят неадаптивную верстку.
Резюме
Верстка писем – процесс сложный. Возможно, даже более сложный, чем верстка сайтов и таит в себе массу подводных камней. Главное здесь – не усложнять. Красивое и лаконичное письмо гораздо лучше разъехавшегося и перегруженного.
Наш совет – здравый смысл, минимализм и тестирование. И не забывайте про ссылку «Отписаться».