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

При этом ситуацию с версткой писем сейчас можно сравнить с тем, как обстояло дело в вебе до тех пор, пока веб-стандарты не стали хм… стандартами. Если вкратце — это просто ад для дизайнера.

При этом создание почтовой рассылки вовсе не обязательно должно сопровождаться болью, кровью и слезами. Да, многие используют табличную верстку с медиазапросами и инлайн-стилями, но есть и «передовики производства», адаптирующие новейшие техники веб-дизайна к архаичной сфере дизайна почтового.

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

В чем ценность HTML-писем

Вне зависимости от того, нравится это вам или нет, HTML-письма — это важный маркетинговый инструмент огромного количества бизнесов. Его эффективность зачастую значительно превышает все другие маркетинговые каналы (вроде соцсетей). Кроме того, почтовая рассылка позволяет взаимодействовать с огромным количеством людей одновременно, при этом сохраняя интимность персонального общения.

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

Многие разработчики и дизайнеры отправляют подписчикам plain text-письма. Они могут быть довольно эффективными, кроме того их легче верстать, не говоря о других важных плюсах (быстро загружаются, отображаются в любом почтовом клиенте и т.п.). При этом, свои плюсы есть и у HTML-версий писем:

• Гиперссылки — часто бывает так, что из письма пользователя нужно направить на какую-то страницу, а без встроенной ссылки сделать это сложнее (мало кто захочет что-то копировать и вставлять в строку браузера).
• Дизайн — хорошо сделанные HTML-письма привлекательно выглядят и позволяют компаниям доносить свой фирменный стиль даже до папки входящих.
• Иерархия — С помощью HTML-верстки легче создать четкую иерархию и выделять важные места сообщения.
• Отслеживание результатов — HTML позволяет использовать механизмы отслеживания открытий и показателей вовлеченности — это важная информация для оптимизации маркетинговых усилий.

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

Почему HTML-письма — отстой

Традиционно считается, что заниматься разработкой HTML-рассылок — худшее занятие для дизайнера и разработчика. Это как сесть в машину времени и отправиться на ней прямиком в «лихие девяностые» табличных шаблонов, инлайн-стилей, несемантической разметки и хаков для каждого клиентского приложения.

Вот лишь краткий список причин, по которым HTML-письма — это больно:

• Нет никаких стандартов. Да, все используют HTML и CSS, но не как в вебе. Не существует никаких реальных стандартов того, как должны работать почтовые клиенты. Все это временами приводит к появлению по-настоящему безумного кода.
• Почтовые клиенты. Почтовые программы вроде того же Outlook или Gmail рендерят HTML по-разному, и часто довольно причудливо. Что, в свою очередь, приводит к…
• Необходимости хаков. Чтобы все работало в разных программах, нужно предусмотреть массу моментов, которые важны для отображения письма в каждой из них.
• Никакого JavaScript. Один из самых популярных веб-языков в email отсутствует как класс, потому что почтовые клиенты вырезают подобный код из соображений безопасности. Так что прощай интерактивность.
• Инлайн-стили. Большинство почтовых клиентов вынуждают использовать инлайн-стили и атрибуты по любому поводу.

Нет никаких оснований надеяться на существенные изменения в этом плане в ближайшем будущем. Однако среди дизайнеров и разработчиков email-кампаний есть целое движение людей, которые стремятся привнести в свою область деятельности больше порядка из веба. К ним относятся члены команды специализированных почтовых сервисов, вроде Litmus, MailChimp, Campaign Monitor, Печкин-mail.ru, и индивидуальные профессионалы вроде Anna Yeaman, Nicole Merlin, Fabio Carneiro, Elliot Ross, Brian Graves и dudeonthehorse здесь на Хабре.

Меняющийся инбокс

Как и все в вебе, электронная почта переходит в «мобайл». Сейчас уже более половины всех писем читают на экранах мобильных устройств, и эти цифры будут только расти. Хорошие новости заключаются в том, что веб-дихайнеры могут адаптировать свои уже имеющиеся навыки и применить их к созданию качественных и удобных для пользователей почтовых писем.

Как работает HTML-верстка

Если говорить в общем, то создание HTML-версии письма можно сравнить с версткой веб-страницы в мире, где ничего неизвестно о веб-стандартах дизайна. HTMl-верстка в email стоит на трех китах: таблицах, HTML-атрибутах и инлайн-CSS. Важно понимать, что из-за особенностей рабоыт разных email-клиентов, которые по-разному поддерживают одни и те же вещи (а многое не поддерживают вообще), работать приходится с очень ограниченным набором HTML и CSS-элементов. Вот здесь представлен отличный график того, что из CSS поддерживают популярные почтовые клиенты.

Прежде чем изучать вопросы резиновой верстки, взглянем на базовые вещи. Для примера разберем один из шаблонов Litmus (код на гитхабе).

Таблицы

Большинство веб-дизайнеров используют теги вроде div, header, section, article, nav и footer для структурирования веб-страниц. К сожалению, у email-дизайнеров нет такой роскоши, как возможность использования семантических элементов. Вместо этого вы *обязаны* использовать HTML-таблицы для создания шаблонов. И эти таблицы вставляют одна в другую…. много раз.

Для того, чтобы стилизовать эти таблицы, придется использовать атрибуты, которые большинство людей в глаза не видело уже довольно давно: width, height, bgcolor, align, cellpadding, cellspacing и border. В комбинации с инлайн стилями вроде padding, width и max-width, можно уже чего-то добиться.

Ниже представлен пример кода неплохо сверстанного табличного письма:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td bgcolor="#333333">
			<div align="center" style="padding: 0px 15px 0px 15px;">
				<table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper">
					<tr>
						<td>…Content…</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
</table>

Легко увидеть, как вложены таблицы и используются атрибуты border, cellpadding и cellpsacing. На уровне ячеек применяется bgcolor (это более надежный метод, чем background или background-color, хотя последний и применяется).

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

Изображения

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



Не существует способа автоматически включать отображение картинок в почтовых программах (и слава богу, в общем-то), но ситуацию можно улучшить с помощью использования alt- текста, который может передать некоторый контекст выключенных изображений. Более того, можно использовать инлайн-стили и img-элементы, чтобы стилизовать этот alt-текст и создать некоторую видимость наличия «дизайна»:

<img src="img/fluid-images.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max">

С помощью нашего кода можно привнести в отображаемое письмо чуточку больше смысла:

Призывы к действию

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

Многие дизайнеры используют для кнопок картинки, но есть и другой подход — применение bulletproof-кнопок, который заключается в их отрисовке с помощью кода. Таким образом кнопка показывается даже в клиентах, где отображение картинок по умолчанию выключено.

Ниже приведен код подобной кнопки, в таблице используются границы (border) — это позволяет понять, что кликабельна вся кнопка, а не только текст на ней:

<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
	<tr>
		<td align="center"><a href="http://alistapart.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #666666; text-decoration: none; background-color: #5D9CEC; border-top: 15px solid #5D9CEC; border-bottom: 15px solid #5D9CEC; border-left: 25px solid #5D9CEC; border-right: 25px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn More ></a></td>
	</tr>
</table>

С базовыми вещами мы разобрались, теперь посмотрим на то, как можно сделать письмо по-настоящему «резиновым».

Как работает «резиновая» email-верстка

Как и в случае резиновых сайтов, существует три основных компонента отзывчивого письма: гибкие изображения, гибкий шаблон и медиазапросы. Вся разница между вебом и email лишь в их реализации.

В email-дизайне мы имеем дело с ограниченным набором элементов HTML и CSS. Нельзя использовать свойства и значения, которые дизайнеры используют для адаптивных сайтов в вебе, margin, float, em — все это не работает в большинстве почтовых клиентов. Так что нужно придумывать, как это обходить в каждом конкретном случае.

Гибкие изображения

«Жидкие» картинки — не такое уж и сложное дело. В некоторых почтовых клиентах даже несмотря на использование width в 100% возникают проблемы с рендерингом изображений в их предполагаемом размере, если только ширину и высоту не задать соответствующим атрибутом. Поэтому нужно прописывать конкретные размеры и показывать их в подходящем случае.

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

<img src="responsive-email.jpg" width="500" height="200" border="0" alt="Can an email really be responsive?" style="display: block; padding: 0; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px;" class="img-max">

Заметили свойство display? Это, как и атрибут border, лишь один из множества хаков, которые приходится применять для работы с вероломными почтовыми клиентами. Большинство веб-клиентов добавляют пространство вокруг изображений, чтобы исправить возможные проблемы с размером. Работа с картинками на уровне ячейки позволяет убить эти отступы и спасти дизайн.

Теперь, чтобы сделать изображение по-настоящему гибким, нужно использовать медиазапрос в заголовке письма:

img[class="img-max”] {
	width:100% !important; 
	height: auto !important;
}

Не каждое изображение должно быть «жидким». Логотипы, иконки соцсетей и прочие подобные элементы вполне могут быть одного размера на разных устройства, поэтому и используются классы.

Поскольку чаще всего мы будем подавлять инлайн-стили и HTML-атрибуты изображений, используется декларация important.

А теперь рассмотрим кое-что посложнее.

Гибкие шаблоны

Большинство веб-дизайнеров знакомы с техникой создания адаптивных страниц с помощью семантических элементов с относительными величинами вроде em, re, percentage. Несмотря на то, что использовать проценты можно и в email, они будут применяться инлайн и подвергаться некоторым ограничениям.

Почти у всех наших таблиц есть процентовка ширины. Исключением является лишь таблица-контейнер, которая имеет заданную в пикселях конкретную ширину, ограничивающую общий размер шаблона, чтобы предотвратить его «поломку» в почтовых клиентах, которые плохо работают с процентами (например, во всех версиях Outlook).

Начнем с таблицы-контейнера:

<table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper">
	<tr>
		<td>…Content…</td>
	</tr>
</table>

Мы использовали атрибут width, чтобы ограничить ширину таблицы 500 пикселями.

Этот контейнер будет содержать все вложенные таблицы, в которых уже спокойно можно использовать проценты, поскольу общая граница уже жестко задана и равняется 500 пикселям.

Но что хорошего в гибких таблицах, если само письмо все равно всегда шириной 500 пикселей? Взглянем на контейнер снова. Мы включили класс wrapper. Этот селектор будет использоваться для того, чтобы сделать письмо по-настоящему резиновым с помощью медиазапросов.

Медиазапросы в email

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

Для простоты в нашем примере мы будем нацеливаться на размеры экранов с max-width в 525 пикселей и ниже. Затем, используя wrapper мы отменим HTML-атрибуты и инлайн-стили, заставив таблицу-контейнер отображаться на полную ширину экрана мобильного устройства:

@media screen and (max-width:525px) {
	table[class=“wrapper”] {
		width:100% !important;
	}
}

Мы также можем заставить вложенные таблицы сделать тоже самое — секции контента будут эффективно занимать доступное пространство. Неплохо бы еще было и увеличить размер текста и кнопок:

@media screen and (max-width:525px) {
	body, table, td, a {
		font-size:16px !important;
	}	
	table[id=“responsive-table”] {
		width:100% !important;
	}
}

Главный и довольно крупный минус медиазапросов заключается в том, что они далеко не везде поддерживаются. WebKit-клиенты вроде iOS Mail и дефолтное почтовое приложение Android их поддерживают, но Gmail, Mail.ru, Yandex, приложение Windows Phone 8 — нет.

Однако если аудитория конкретной компании в основном использует iOS и Android — все уже не так плохо.

Заключение

Техники, описанные выше, являются только самым началом. Продвинутые email-дизайнеры изучают возможности работы с веб-шрифтами, SVG и CSS3-анимациями. Верстка почтовых писем — сложное дело, в котором все постоянно ломается, но различные эксперименты позволяют нащупать свой путь к созданию по-настоящему качественных, полезных и информативных рассылок.

Главное на забывать о необходимости тестирования всего, чего только можно. Почтовые клиенты — куда хуже, чем браузеры в плане рендеринга и поддержки HTML и CSS. Тестировать необходимо и на реальных устройствах, и с помощью специальных превью-сервисов (например, от «Печкина»).

Кроме того, необходимо тестировать не только отображение письма, но и искать более эффективные варианты текстов, контента, времени рассылки (вот наш пост с важной статистикой по этому поводу).

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