Создаем макет письма для рассылки без дизайнера

Советы от Mail.ru для бизнеса

Верстка писем для email-рассылки не требует серьезного обучения и больших познаний в веб-дизайне. У многих сервисов рассылок есть удобный конструктор писем. В Sendbox от Mail.ru для бизнеса загружено много готовых шаблонов, которые можно настроить для создания своего макета в течение получаса. Однако нужно учитывать базовые требования к верстке, чтобы письма было приятно читать как на ПК, так и на мобильных устройствах.

Разбираемся с дизайном и шрифтами

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

Чтобы пользователь смог прочитать письмо, текст внутри должен быть набран безопасным шрифтом. Arial, Tahoma, Times New Roman и другие традиционные шрифты входят в число безопасных, потому что их отображают большинство почтовых сервисов. Если для логотипа или другого элемента нужны фирменные шрифты из брендбука, то лучше их вставлять в качестве картинок. Иначе почтовый сервис самостоятельно заменит их в устройстве пользователя на один из безопасных. Для самой важной информации, которую может скопировать себе пользователь (номер телефона или промокод), используйте безопасные шрифты. Мелкий текст неудобно читать, а слишком большой может вызвать отвращение. Для рассылки подойдет размер 12-13 пикселей.

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

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

Ширина письма

Если создать слишком широкий макет, то на выходе письмо будет растянутым, а для его просмотра на ПК нужно будет прокрутить ползунок вправо. Избегайте этой ошибки и ориентируйтесь на оптимальную ширину в 600 пикселей. Иногда маркетологи экспериментируют с шириной, увеличивая ее до 680 или 960 пикселей. Однако для такой работы нужен опытный дизайнер, который грамотно расположит все элементы на такой ширине.

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

Структура макета и деление на столбцы

Этот принцип лежит в основе адаптивной верстки. Больше половины пользователей открывает письма на смартфонах, поэтому не стоит верстать их только для ПК. Табличная верстка помогает правильно расположить все элементы дизайна – в два, три или четыре столбца. Легче создать несколько шаблонов для определенных рассылок, чтобы впоследствии не тратить много времени на создание нового макета.

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

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

Как адаптировать письмо для смартфонов

Оптимальным размером для экранов мобильных устройств считается 320 пикселей. Однако отдельные макеты для смартфонов почти никогда не делают, поэтому создаются адаптивные варианты писем. Для этого подойдут резиновые макеты. В них ширина устанавливается в процентах, поэтому его размер будет автоматически подстраиваться под экран устройства. У дизайнера есть три опции применения резиновых макетов.

  • Масштабировать. Все элементы сжимаются до ширины экрана смартфона. Получается точно такое же письмо, что и на ПК, только поменьше. Размер шрифта, картинок, кнопок и других элементов также уменьшается, поэтому нужно проверить читабельность при открытии тестового макета на смартфоне. Те же кнопки с регистрацией или скидками стоит заранее сделать большими.
  • Отсекать. Все письмо целиком на экране смартфона не отобразится, поэтому его часть в данном макете становится невидимым. Дизайнер может выбрать, какая часть будет доступна пользователю. При верстке стоит поместить на нее все важные элементы.
  • Перестраивать. Этот макет подойдет для писем, сверстанных из нескольких ячеек таблицы. Они автоматически перестроятся друг под друга, а у дизайнера будет возможность указать, в какой последовательности это произойдет. Ячейки стоит сделать равными по размерам и проследить, чтобы при перестроении элементы не застревали и не накладывались друг на друга. Если используете большую фоновую картинку, например, в шапке письма, на всякий случай нужно оставить больше свободного фонового места по краям, чтобы перестроение прошло успешно.

Красивое письмо на примере сервиса Sendbox

Начинающим дизайнерам создавать макет лучше в HTML-редакторе почтового сервиса. В Sendbox есть удобный конструктор, где можно выбрать безопасный шрифт, загрузить картинку под размеры макета и аккуратно разбить его на элементы.

Справа в меню можно настроить размер отступа, определить контур изображения и выбрать нужный цвет фона. Основные требования к письмам для email-рассылки можно настроить в этом редакторе.

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

Бизнес

Как собрать базу для рассылок

23 сентября 2020
Советы

Простые способы монетизировать свой блог

17 сентября 2020
Узнавайте о наших публикациях первыми
Все статьи для бизнеса