Какие бывают типы писем. В чём отличие дизайна рассылок от дизайна сайтов

Фантастические рассылки и где они обитают

Рассылка — это отправка одного сообщения определённому списку адресатов. Это может быть SMS и мессаджи в социальных сетях, push-уведомления и другие форматы, но на этом курсе нас интересует email.

5 основных типов email-рассылок

• Триггерные. Автоматические письма, например, поздравления с днем рождения, welcome-письма или брошенная корзина.
• Контентные. Дайджесты, новости компании или образовательные письма.
• Товарные. Подборки продуктов и новинки ассортимента бренда.
• Акционные. Анонсы специальных предложений, акций, скидок и подарков.
• Транзакционные. Статус заказа, подтверждение бронирования, сброс пароля и прочие технические штуки.

Анатомия письма

В зависимости от типа, рассылка может отличаться по своей структуре. Но чаще всего её можно разобрать на следующие сущности.

• Хедер. Это шапка рассылки — блок, который расположен в самом верху и обычно включает в себя логотип, ссылки на разделы сайта или категории товаров, контактную информацию или веб-версию письма.
• Тело письма. Здесь — всё самое интересное. Баннеры, текст, кнопочки, товарные раскладки и вся контентная часть.
• Футер. Или подвал письма. Это финальная часть рассылки, которая содержит в себе служебную информацию. Например, контакты или кнопку отписки.

Особенности дизайна

Имейл-дизайн — это, в первую очередь, про функциональность. Грамотно сделанный дизайн письма увеличит количество кликов, глубину просмотров и, соответственно, количество продаж. 

В отличие от дизайна сайтов, в дизайне рассылок есть ряд технических ограничений, поэтому некоторые креативные решения неприменимы к письмам. Технология вёрстки имейлов осталась на уровне 1999 года — в письмах используется табличная вёрстка. Нельзя использовать код CSS и вообще JavaScript — только HTML. Именно это и обуславливает количество сложностей.

Ширина

Первое и самое досадное притеснение в имейл-дизайне — это ширина письма. Из-за ограничений почтовых клиентов она не может быть больше 600–700 пикселей. Если будет шире — оно просто не поместится в экран. Самая распространённая ширина для мобильных устройств — 320 пикселей. Самая комфортная ширина колонки для чтения — 640 пикселей.

Ширина самого письма — не единственное ограничение. Есть ещё и ширина контента! Чтобы он не упирался в края экрана, должны быть поля и отступы по бокам. Лучше использовать округлённые значения, кратные 5 или 10, а не делать на глаз — это облегчит жизнь на этапе вёрстки. Для комфортного чтения лучше ширину контентной области не менее 540 пикселей.

Шрифт

В дизайне писем мы можем использовать только безопасные (web safe) шрифты. Это стандартные шрифты, которые корректно отображаются на разных компьютерах, устройствах и операционных системах. Безопасные шрифты используются для того, чтобы не нужно было верстать текстовый контент картинкой. Так при адаптации сохраняются корректные размеры текста. 

Важно! Если использовать другие шрифты, то в почтовиках они по умолчанию будут заменяться на Arial. И тогда у вас неминуемо поедет вёрстка, потому что у шрифта будет другое начертание. Исключения — большие заголовки на баннерах и в контенте. Если их сверстать картинкой, то благодаря размеру на мобильном устройстве их будет хорошо видно. 

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

Также нужно учитывать, что размер шрифта должен быть целым числом. Нельзя использовать десятичные значения, например, 16,78 пикселей. Это добавит проблем на вёрстке и придётся вручную подбирать размер.

Изображения

В рассылках используются JPG, PNG и GIF. Чтобы картинка не мылилась, исходный размер делают в 2 раза больше фактического. Это называется retina ready картинка. Формат SVG в рассылках не поддерживается.

Сейчас почти в каждом письме есть GIF-анимация — гифки. С их помощью у нас есть огромные возможности для креатива и для динамики контента. Чтобы письмо загрузилось быстро и анимация отображалась корректно, вес GIF не должен превышать 1 Мб. В исключительных случаях — 2 Мб, например, если во всем письме у вас только один баннер. Иногда лучше пожертвовать плавностью гифки и сократить количество кадров в ней, но сократить до приемлемого размера. Для сжатия можно использовать онлайн-сервисы, например, этот. 

Важно! Почтовый ящик Outlook не поддерживает GIF — пользователи видят только первый кадр. Об этом стоит помнить при подготовке сценария анимации.

Стабильный тренд в веб-дизайне — это использование градиентов. Чтобы использовать их в рассылках, нужно учитывать, что он может быть только вертикальным или горизонтальным, иначе при адаптиве произойдёт искажение. Но это правило не касается баннеров, так как они верстаются полностью картинкой.

Тёмная сторона

Точнее, тёмная тема. Новый тренд интерфейсов — настоящая беда для дизайна рассылок, потому что каждый почтовик инвертирует цвет по-своему. Исключениями являются только чёрный, белый и серый.