Статьи
КОНТАКТЫ
Поступление:

+375 (29) 636 65 85

+375 (29) 706 85 85

Учебный отдел:

+375 (29) 668 11 62 (Обучение взрослых)

+375 (29) 364 66 74 (Обучение детей)

По вопросам оплаты:

+375 (29) 609 64 93

Адрес:

г. Минск, ул. К. Маркса, 32

+375 (29) 636 65 85

Особенности верстки html-писем

верстка хтмл-писемВсем верстальщикам рано или поздно приходится иметь дело с версткой писем. На самом деле, верстка 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 самостоятельно, так что об этом не приходится беспокоиться.