Автор — Никита Аксютин
У вас есть готовый черновик с текстом и изображениями для рассылки подписчикам. Вы хотите сверстать классное html письмо — чтоб оно отображалось на всех устройствах и просто красиво выглядело. Например, как у Reebok:
В этом html письме нет ничего сложного. Многие промо-рассылки строятся на похожем макете. Такие html письма легко сверстать самому без знаний дизайна и верстки.
В этой статье я расскажу как быстро сверстать письмо. А еще — повторю html письмо Reebok с нуля. В конце можно будет сравнить, получилось ли у меня скопировать рассылку известного бренда или нет.
Какие навыки нужны для верстки письма
Раньше сверстать html письмо можно было только одним способом: написать его на специальном языке — html-коде. Этим занимался верстальщик. Он переносил нарисованный дизайнером макет в готовое письмо.
Сейчас услуги верстальщиков тоже распространены. Их можно нанять на аутсорсе или поискать внутри своей компании 😉
Существует альтернатива классической верстке — создание писем в конструкторе (он же — блочный редактор). Это приложение для создания html письма по кирпичикам (блокам). Блоком может быть кнопка, кусок текста, изображение, обложка товара. Цвет, размер и другие параметры блока тоже регулируются.
Сервисы-конструкторы: Stripo, Topol, Mosaico, Tilda, встроенные конструкторы в сервисах рассылок.
Конструктор — посредник между пользователем и html-кодом. Мы оперируем понятными инструментами — блоками, а конструктор переводит это на язык html и правильно отображает в почтовом клиенте.
Инструменты конструкторов позволяют создать практически любое html письмо. Есть некоторые ограничения, но большинство идей реализовать точно получится.
Конструкторы подходят для большинства пользователей, благодаря нескольким фишкам:
- Встроенные шаблоны. Для красивого дизайна во многих блочных редакторах есть шаблоны, которые облегчают создание html письма на раннем этапе.
- Верстка вшита в процесс. Создавая html письмо из блоков мы как бы сразу его верстаем. Созданный в конструкторе макет хорошо выглядит — изображения не съезжают, ссылки работают. Программисты уже постарались за нас — нам не нужно иметь дел с html-кодом.
- Адаптивность. Конструктор сразу делает html письмо адаптивным — оно корректно выглядит и на десктопе, и на смартфонах разной ширины. А еще html письмо из конструктора правильно отобразится во всех почтовых сервисах.
Функционала конструктора точно хватит для создания html письма как у Reebok. Сейчас в этом убедимся.
Практика: создаем письмо, как у Reebok, в конструкторе
Я попробую повторить html письмо Reebok из начала статьи. Делать я его буду в конструкторе почтового сервиса UniSender.
Я начну верстать с бесплатного шаблона. Мне легче работать с предзаполненной страницей, чем с пустым листом:
В html письме Reebok есть два изображения: логотип и иллюстрация с Томом и Джерри. Загрузим их в файл-менеджер:
Поменяем фон и удалим лишние элементы:
Добавим шапку с ссылкой на веб-версию html письма:
Конечная версия шапки выглядит так:
Добавим логотип и иллюстрацию:
Логотипу не хватает отступов. Исправим это:
Добавим разделитель, отредактируем текст в меню, подставим нужный шрифт. Получится так:
Теперь основной контент письма. Тут главное не ошибится с шрифтом и размером. И не забыть про отступы:
Осталось доделать кнопку — поменять цвет и убрать округление углов:
Я сравнил мой заголовок с оригинальным и понял, что забыл сделать текст жирным. Поэтому еще немного отредактировал макет: поигрался со шрифтом и отступами.
Сравнение оригинала и копии из конструктора
Посмотрим что у меня получилось:
Сравните сами веб-версии писем:
Веб-версия копии (я сделал верхнюю часть html письма и не прописывал ссылки)
По-моему очень похоже. В некоторых местах не соблюден изначальный масштаб и с выравниванием текста я промахнулся. Что ж, не без косяков. Тем более, эти косяки можно легко исправить.
Чтобы сделать такое письмо, мне понадобилось 20-30 минут. Но я не мастер верстки и с некоторыми функциями знакомился впервые.
Первое html письмо всегда создается дольше, чем следующие. Обычно в них меняется только изображения и текст, а это сильно ускоряет процесс.
И еще — в конструкторе все элементы адаптивны. Поэтому на смартфоне у html письма все в порядке с отображением:
Я не соврал и реально сделал html письмо как у Reebok. Расскажите, а вы верстали когда-нибудь html письма в конструкторе? Если да, поделитесь ссылкой или изображением, будет интересно посмотреть.
