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

Интерактивные письма

Интерактивные элементы разбавляют монотонный текст и экономят время читателя, поэтому являются удобным инструментом для создания рекламных писем и красиво оформленных текстов.

В качестве примера давайте рассмотрим простой способ создания интерактивных изображений. Он состоит из трех шагов:

1. Создаем таблицу из одной ячейки и задаем для неё фоновое изображение, которое показывается сразу после загрузки страницы.

<table cellpadding=0 cellspacing=0 border=0><tr>
<td width=240 background="http://.../alternate-image.jpg">
</td></tr></table>

2. Устанавливаем главное изображение и «прячем» его в ссылку с классом img-swap. Это позволит создать hover-эффект: когда при наведении курсора на фоновое изображение, на его месте появится главное.

<table cellpadding=0 cellspacing=0 border=0><tr>
<td width=240 background="http://../alternate-image.jpg">
<a class="img-swap" href="http://../link"><img src="http://../primary-image.jpg" width="240" height="170" border="0" style="display:block;" alt="the product"></a>
</td></tr></table>

3. Настраиваем команду :hover и устанавливаем стили для класса img-swap.

<style>
.img-swap {
  display: block;
  width: 240px;
  height: 170px;
}

.img-swap:hover img {
  height: 0px;
}
</style>

Этот вариант создания интерактивного изображения поддерживается такими сервисами, как: Mail, Outlook, Yahoo! и Gmail (с модификациями).

Прогрессивное улучшение (progressive enhancement)

Прогрессивное улучшение – это стратегия, предполагающая поэтапное создание веб-страниц – от простого к сложному. Сперва обозначается структура письма, а уже затем ведется работа по улучшению внешнего вида и юзабилити.

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

Пошаговая работа с документом позволяет отслеживать ошибки и исправлять их на месте, ведь появление одного недочета может сказаться на результате всей работы. Если вы хотите посмотреть на прогрессивное улучшение в действии, то обратите внимание на пример от html academy.

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

Media queryМедиазапрос –— это компонент языка CSS, позволяющий выбирать разные наборы стилей CSS. Наборы стилей – ключ к созданию привлекательного внешнего вида документа (наглядный практический пример CSS в действии вы найдете по ссылке).

Медиазапрос включает в себя три последовательных компонента, которые настраиваются пошагово:

• Тип среды (media type) – определяет среду применения правил. Выделяют такие типы, как all, print, screen (используется для email) и speech
• Выражения (expressions) – это перечень свойств устройства, описывающих, например, ширину (width) и высоту (height) экрана, цвет
• Правила стилей – применяются при открытии письма в среде, соответствующей типу и свойствам в выражении

Медиазапросы незаменимы при оптимизации формата отображения писем на мобильных устройствах. Они позволяют перейти с фиксированного дизайна на «плавающий» – такой документ будет хорошо смотреться на разных платформах.

Более того, технология медиазапросов может быть использована для таргетинга сервисов (выделения сервисов, удовлетворяющих заданным критериям) и адаптации под них. По аналогии осуществляется и таргетинг устройств, где важно учитывать размеры экрана. К примеру, так выглядит стандартный код для iPhone 6 Plus:

@media screen and (max-device-width: 414px) and (max-device-height: 776px) {
    /* Insert styles here */

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

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

О чем еще мы пишем в блоге Печкин-mail'а:

• Email-маркетинг: Рецепт правильного plain-text письма
• How-to: гайд по созданию интерактивных писем
• Печкин-mail «вики»: Чеклист по email-рассылкам
• Интерфейсы и юзабилити: Кто и как проектирует UX
• «Поговорим об этом»: Работа проектировщика