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

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

1607a65013b4cb10e.gif

Адаптивное письмо Skillbox. Обратите внимание, меняется не только размер элементов, но и структура плитки с кнопками

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

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

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

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

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

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

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

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

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

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

Процесс верстки в конструкторе Unisender. У каждого блока есть внутренние настройки
Процесс верстки в конструкторе Unisender. У каждого блока есть внутренние настройки

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

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

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

А вот один из шаблонов в Unisender:

3216799562a71746a.gif

Меняю режим отображения для разных устройств прямо во время верстки

41100dd4b0f8f1b43.gif

Распространенный прием адаптивности. На десктопе плитка, а на смартфоне — один столбец

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

В некоторых местах не угадал с размером и шрифтом, но в целом, выглядит похоже
В некоторых местах не угадал с размером и шрифтом, но в целом, выглядит похоже

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

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

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

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

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

Неадаптированное письмо RESERVED
👎 Неадаптированное письмо RESERVED на смартфоне — все элементы просто уменьшены, чтобы помещаться на экран. Из-за этого меню больше похоже на обычный текст, пользоваться им неудобно
В письме Reebok одна кнопка
👍 В письме Reebok одна кнопка из меню удаляется, чтобы пользователям было удобнее. На десктопной версии в меню 4 кнопки — прибавляется кнопка «Найти магазин»
в письме Swatch верхнее меню
👍 А в письме Swatch верхнее меню просто удаляется из смартфона

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

Меню свойства блока в конструкторе Unisender
Меню свойства блока в конструкторе Unisender. Отступы нас не интересуют, а интересует настройка «Скрыть» внизу изображения. Сейчас на примере синим подсвечена иконка смартфона — значит, блок скрыт на смартфонах. Можно переключить на десктоп или нажать на крестик левее — тогда блок будет отображаться везде

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

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

Я скрыл строку с тремя кнопками
Я скрыл строку с тремя кнопками — теперь ее не видно для десктопа

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

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

Письмо PichShop
Письмо PichShop. Плитка превосходно выглядит на десктопе, но на смартфоне нечитаемо. На изображениях невозможно разглядеть надписи, а иногда и сам товар
У Lego адаптируемое изображение
У Lego адаптируемое изображение: широкое для десктопа, узкое для смартфонов. Обратите внимание на меню — они все-таки решили его оставить на смартфонах и оно выглядит мелковато

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

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

12b28b8176f70e2f8d.gif

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

Для смартфона и компьютера используются разные варианты одного изображения
Для смартфона и компьютера используются разные варианты одного изображения — квадратное для смартфонов, 4:3 на десктопе. Кажется, что они очень похожи и можно было использовать одно квадратное изображение — но в этом случае на десктопе поедет плитка

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

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

Татьяна Филатова

дизайнер Unisender

Размер шрифта. Чтобы текст отлично читался на смартфоне и на дестктопе, рекомендую его делать не меньше 16pt (21px). Это такой компромиссный шрифт, который независимо от платформы будет выглядеть хорошо.

Размер кнопок. Минимальный размер кнопок для смартофонов: 45 на 45px — так пользователь точно не промахнется. Даже если нужна кнопка меньше по размеру, область нажатия все равно должна быть не менее 45px.

В идеале, самые важные кнопки на смартфоне должны занимать всю ширину экрана с отступами от краев по 20px — это 560px, так как ширина email-письма обычно 600 пикселей. Рекомендуемая высота кнопки — также 45px. Больше тоже можно, например, когда кнопка — это картинка.

Дайджест Т—Ж

Дайджест Т—Ж. Карточки статей — кнопки, которые занимают почти всю ширину экрана

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

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

Еще раз приложу email-письмо Skillbox, которое отлично демонстрирует резиновую верстку:

154f2b43c44b06156e.gif

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

письмо сломается
Если блоки прыгнут друг под друга, письмо сломается. Не только в плане дизайна, но и удобства: блок с ценой и кнопкой «купить» будет под печатной машинкой. Но следующим блоком будет идти снова кнопка «купить» с ценой, а не корабль в бутылке

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

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

работа шаблона.

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

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

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

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

В свойствах кнопки в разделе действие меняем с «Открыть ссылку» на «Позвонить»
В свойствах кнопки в разделе действие меняем с «Открыть ссылку» на «Позвонить»

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

Заключение

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

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

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

Отправить тест
Перед отправкой сначала нажимаем на кнопку «Отправить тест»
Теперь вводим тестовые ящики
Теперь вводим тестовые ящики в разных почтовых сервисах

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

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

Какие проблемы возникали у вас при адаптировании писем?

В комментарии

Комментарии