Верстка писем для рассылок
Один из читателей блога Вебсовет попросил рассказать о верстке писем для рассылки. Сам я этим практически не занимаюсь. Помнится, в свое время я много возился с шаблонами для Subscribe.ru, и помню, что дело это было муторное. Проблема в том, что почтовые сервисы плохо работают с блочной версткой. А еще хуже со стилями css. Столько лет прошло, а воз и ныне там. Сейчас подавляющее большинство писем для рассылок верстаются все так же по старинке — при помощи таблиц. И это в 2016 году, когда на сайтах уже давно рулит html5, css3 и прочие современные вкусняшки.
В принципе, исчерпывающие статьи по верстке писем уже есть на Хабре, здесь и здесь. Также рекомендую почитать тамошнего обитателя по имени Артур Кох, у которого по верстке писем написана масса полезных статей. Примеры: ссылка 1, ссылка2.
Но чтобы пост не получился пустым, я все-таки кратко озвучу основные моменты верстки писем для e-mail рассылок.
Во-первых, вам придется забыть о блочной верстке и отдельном файле стилей. Все верстается таблицами, а стили прописываются непосредственно по месту, или иначе — Inline. Выглядит это примерно так:
<a href="http://www.yourwebsite.com/" style="color: #333333; font: 10px Arial, sans-serif; line-height: 30px; -webkit-text-size-adjust:none; display: block;" target="_blank">Ссылка</a>
Во-вторых, следует всегда принудительно обнулять значения отступов, полей и бордеров, ибо каждый почтовый клиент норовит отобразить их по-своему:
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0">
В-третьих, можете не заморачиваться с тегами doctype, head и body. Без doctype ваши письма будут одинаковыми везде, head и body практически бесполезны, т.к. все равно будут вырезаны большинством почтовых сервисов (пруф).
В-четвертых, если используете в письмах картинки, то обязательно прописывайте их размеры. Очень часто почтовики блокируют изображения в письмах, и если не задать их размеры, то письмо будет выглядеть коряво. Кроме того, обязательно добавляйте style=»display:block;. Это избавит от проблем с непонятными отступами (например, в gmail):
<img src="#" alt="" border="0" width="150" height="150" style="display:block;"/>
И ни в коем случае не используйте однопиксельные картинки в качестве распорок для ячеек таблицы! Ваше письмо гарантированно попадет в спам. Если нужна распорка, то следует применять картинку с размерами, как минимум, 20х20 пикселей, которой в стилях принудительно задать размер 1х1 пиксель.
В-пятых, есть возможность таки сделать адаптивную верстку для писем. Выглядит это так же коряво, как и вообще вся работа с таблицами, но на безрыбье… Сами понимаете. Короче, чтобы ваше письмо имело какое-то подобие адаптивности, его контентную часть следует обрамлять тегом center с соответствующими стилями:
<center style="max-width: 600px; width: 100%;">
здесь ваш контент
</center>
И напоследок пара полезных ссылок. Здесь вы можете посмотреть, какие теги поддерживаются различными почтовыми сервисами. А здесь найдете еще несколько полезняшек — «Особенности верстки HTML-писем».
О! Полезная статейка. Сэнкас! А не могли бы вы рассказать еще о способоах сделать собственную рассылку на вордпрессе? А то смартреспондер канул в Лету, а другие сервисы рассылок теперь только за бабки.
Николай, пожалуйста! О собственной рассылке расскажу в одном из ближайших постов. Чтобы не пропустить, рекомендую подписаться на рассылку. Что касается сервисов рассылок, то есть еще и бесплатные варианты. О них тоже расскажу вкратце. Но своя рассылка — это отдельная песня. Есть и скрипты и плагины для Вордпресс. Но есть и ограничения, которые налагает используемый хостинг. Об этом тоже расскажу.