Как сверстать адаптивное письмо?

Если вы занимаетесь рассылками, у вас обязательно должны быть адаптивные письма — без этого вы рискуете потерять подписчиков. По исследованию statista, 92,6% пользователей заходили в сеть через мобильное устройство хотя бы один раз.

Есть три способа сделать адаптивные письма:

• Написать код письма самому.
• Нанять верстальщика.
• Сверстать письмо в конструкторе.

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

Почему писать код самому или звать верстальщика — не всегда ОК

Самому разобраться в верстке адаптивных писем непросто. Даже если вы знаете HTML-код и умеете верстать веб-страницы, в верстку адаптивных писем придется погружаться отдельно. В отличие от верстки сайтов, в email-письмах верстают таблицами. Это нужно для того, чтобы все почтовые сервисы правильно отображали email-письмо.

Если вы хотите научиться адаптивной верстке писем, то вот полезные статьи:

• Гид по верстке адаптивных писем.
• Верстка email-рассылок от A до Я — в этой статье 14 пункт про адаптивность.
• Как сверстать email-письмо: инструкция для чайников.

Опытные верстальщики стоят дорого. Средняя зарплата html-верстальщика — 40 000 рублей. При этом, многие из них не владеют версткой адаптивных писем, а те, что владеют, стоят дороже.

Чем хорош конструктор писем

Конструктор — редактор для создания писем. Конструкторы могут быть самостоятельным сервисом (например, Stripo) или могут быть встроены в сервис рассылок (так, например, устроен конструктор Unisender). Верстка происходит как сборка письма из блоков: не нужно соприкасаться с языком html. Бывают блоки текста, картинок, меню, карточки товаров и другие — зависит от конструктора. Отсюда и название «конструктор» — вы как бы собираете письмо из готовых блоков, как Лего. А конструктор переводит все это на язык HTML, который почтовые сервисы потом переводят на человеческий.

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

В конструкторах также есть много адаптивных шаблонов под разные сферы — e-commerce, дайджесты, туризм, рестораны. Некоторые шаблоны приурочены к событиям — Черная пятница, День святого Валентина.

В конструкторе Unisender можно менять отображение email-письма для компьютера и смартфона прямо во время верстки — не нужно отвлекаться на предпросмотр письма, косяки видно сразу.

Конструктора хватит для 95% задач верстки — только уж какие-то совсем мудреные вещи на нем реализовать не получится. Я недавно проводил эксперимент и попробовал воссоздать email-письмо Reebok в конструкторе. Получилось почти точь-в-точь, а заняло это у меня не больше 20 минут. Я не делал адаптацию email-письма, но оно все равно отлично выглядело на смартфонах.

Какие проблемы могут быть при адаптивной верстке в конструкторе

Хоть в конструкторах письмо автоматически проходит адаптацию под мобильные устройства, этот процесс нужно контролировать и в некоторых местах помочь конструктору сделать красивое email-письмо.

Разберу самые популярные затыки.

Ломается меню

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

Что делать. Отключать меню для показа на смартфонах. В конструкторе Unisender любой блок можно отключить для своей платформы: он будет показываться на десктопе, а на смартфонах — нет. Наоборот тоже можно.

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

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

Неадаптивные картинки на смартфоне

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

Что делать. Зашейте в email-письмо два изображения: одно для смартфонов, другое — для десктопа. Попросите дизайнера рисовать для картинок с текстом две версии.

Как я писал выше, в конструкторе Unisender блок с картиной можно скрыть для определенной платформы.

Нечитаемый шрифт и маленькие кнопки

Здесь все просто — есть рекомендуемые размеры для шрифта и кнопок: используем их.

Столбцы и плитка работают неправильно

Общий принцип адаптивности в конструкторах — резиновая верстка. Если по горизонтали находится несколько блоков, которые не умещаются в ширину, то все они прыгают друг под друга. Таким образом плитка превращается в столбец.

Но такое нужно не всегда — иногда дизайнерская задумка не подразумевает того, чтобы плитка распадалась. Посмотрите на email-письмо Lego — здесь нужна именно плитка:

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

Например, конкретно этот шаблон не предусмотрен для такой настройки — верстка уезжает:

Телефон для связи

Для некоторых ниш важно, чтобы читатель смог позвонить из email не копируя номер. Например, b2b-компания предлагает бесплатно проконсультировать о финансовом здоровье бизнеса.

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

Конечно, для десктопа такая кнопка не нужна. Поэтому создаем две кнопки — одну видно на смартфоне, другую — на десктопе. Вторым шагом меняем действие кнопки:

Прочитать про настройку кнопки со звонком подробнее можно в Базе знаний Unisender.

Заключение

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

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

В сервисах рассылок можно создать список контактов и включить в него только свои email-адреса. В Unisender это выведено в отдельную функцию «Отправить тест» на финальном шаге создания письма:

Не стесняйтесь простого минималистичного дизайна. Его удобно верстать и легче адаптировать под мобильное устройство. А пользователю проще ориентироваться в письме — эту гипотезу подтверждают рассылки T—Ж, Skyeng, Такие дела. В первую очередь — полезный контент.

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