верстка хтмл-писем Всем верстальщикам рано или поздно приходится иметь дело с версткой писем. На самом деле, верстка HTML-письма — настоящее путешествие в прошлое, в год 1999, время вебмастеров, Frontpage и WYSIWYG-редакторов, а также табличной верстки.

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

В этой статье мы расскажем о том, как работают email-рассылки, а также с какими проблемами придется иметь дело при верстке HTML-писем.

HTML-шаблоны

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

Верстка HTML-шаблонов для почтовых рассылок

Сделать хороший шаблон временами более сложно, чем сверстать обыкновенную веб-страницу. Для обрабатывания HTML-писем почтовыми клиентами применяются различные движки. К примеру, Apple Mail и Outlook для Mac, а также Android Mail и iOS Mail применяют в работе WebKit. Outlook 2000, 2002 и 2003 основываются на Internet Explorer. Outlook 2007, 2010 и 2013 в работе применяют Microsoft Word. Веб-клиенты задействуют браузерный движок (к примеру, WebKit – для Safari, или Blink для Chrome). Также почтовые клиенты поверх ваших стилей могут добавлять стили «по своему вкусу».

Применение табличной верстки

Во время блочной верстки с применением div-ов в разных клиентах могут возникнуть проблемы с позиционированием. В особенности это касается тех клиентов, где для обработки применяют Microsoft Word, например, Outlook. При желании вы можете использовать div-ы, но верстать таблицами будет безопаснее.

Если вы используете Premailer, то учитывайте, что он обладает списком CSS-атрибутов, которые применяют в таких случаях.

Встроенные стили

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

Тем, ко вписывает стили руками, рекомендуется в работе задействовать сниппеты и/или язык шаблонов с partial и helper – благодаря этому вам не придется постоянно переписывать одно и то же.

Изображения в e-mail

В некоторых клиентах изображения по умолчанию отображаются, а в некоторых – нет. Об этом нужно помнить, добавляя картинки в письма. Это оказывает влияние и на показатели метрик, потому что изображения используют обычно для отслеживания открытий. В частности, Outlook по умолчанию блокирует отображение картинок. А Apple Mail и Gmail – не блокируют.

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

Анимированные гифки большинство почтовых клиентов поддерживает. Однако версии Outlook с 2007 и по 2013 гифки не отображают, демонстрируя только первый кадр.

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

Видео в письмах

Видео сегодня поддерживается практически везде, на iOS, Outlook.com и Apple Mail. Ориентируясь на конкретный клиент, можно использовать медиа-запросы, чтобы скрывать или демонстрировать видеоконтент.

Формы в письмах

Поддержка форм различная везде. Потому лучше подальше держаться от них, и при необходимости подключать внешние формы. Все зависит, само собой, от целей. Безопаснее формы не использовать, однако, к примеру Rebelmail и Mixmax делали очень хорошие формы для e-commerce и опросов.

Предзаголовок

Про текст предзаголовка обычно забывают, хотя и он важен. Это текст, отображаемый либо рядом с темой письма, либо ниже ее. Клиенты обычно берут для отображения в предзаголовке первый кусок текста прямо из тела письма. Нужно учитывать это, добавляя невидимый элемент в тело самого письма, который сможет попасть в предзаголовок. Основная задача скрытого текста – мотивировать пользователя прочитать письмо.

Тестирование писем

Письма тестируются обычно разными способами:

Отсылать готовое письмо можно к себе же на почту: к примеру, на десктоп (это позволяет Outlook), на веб-клиент (как в Gmail), либо на мобильный клиент (как iOS Mail).
Автоматически готовое письмо можно протестировать при помощи Litmus либо Email on Acid.
Необходимо также вычитывать содержание, проверяя отображение верстки.
Наконец, нужно проводить тестирование разных видов контента, заголовка и размера письма.

MIME Multipart

Обычное письмо с текстом — это просто текст. Соответственно, HTML-письмо — это лишь просто HTML. Большинство писем, посылаемые вами и получаемые — это MIME (Multipurpose Internet Mail Extensions — переводится как многоцелевые расширения интернет-почты). Данный стандарт позволяет комбинировать текст и HTML, и получатель сам принимает решение, какой именно тип отображать.

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

Некоторые клиенты отображают обычный текст как HTML; к примеру, Gmail добавляет определенные стили по умолчанию, превращая URL в гиперссылки. Большинство сервисов рассылок собирают MIME самостоятельно, так что об этом не приходится беспокоиться.