Дизайн и верстка писем для рассылки создание писем для Email-маркетинга

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

Лучший вариант в тех случаях, когда нужно максимально корректно отобразить письмо в максимальном количестве почтовых клиентов. В современных реалиях простым email письмом, которое представляет собой однообразный текст, заинтересовать получателя будет весьма затруднительно. Поэтому оформление письма для рассылки вы можете доверить профессионалам в этом деле. Мы поможем грамотно и качественно сделать дизайн email рассылки. Кодируем.Преобразуем ваш формат в макет письма для рассылки, выполняя html-вёрстку писем. Не стоит излишне доверять программам для вёрстки html-писем — drag-n-drop-редакторам.

Я никогда не занимался дизайном и вёрсткой. Я смогу создать письмо?

Изображений должно быть ровно столько, сколько нужно для выполнения задачи письма. Если это рассылка с подборкой товаров по акции – достаточно цепляющего баннера с оффером, остальное – карточки товара с кнопками. Если рассылка контентная, можно делать больше изображений, главное – чтобы они не отвлекали от смысла письма. К тому же он может значительно ускорить дизайн, если использовать собственные ассеты из мастер-шаблона.

А на неё приходится около 30% пользователей в РФ, так что применение фреймворка для рассылок российской аудитории представляется крайне сомнительным. Это проект с открытым исходным кодом, который существует с 2016 года. MJML — один из самых известных емейл-фреймворков. Среди особенностей — поддержка нетипичных компонентов вроде каруселей и аккордеонов (правда, они мало где работают) и формирование QR-кодов.

ПРИМЕРЫ НАШИХ ШАБЛОНОВ ПИСЕМ

Но пользоваться им стоит реже – он дольше читается. Подчеркнутого текста тоже лучше избегать – он похож на гиперссылки и вызывает ощущение спама. Жирным можно выделять заголовки, подзаголовки, главные мысли текста. Для письма лучше использовать один шрифт – например, Helvetica. Акценты при этом делать начертанием (курсивным, жирным и подчеркнутым), цветом, размером. Или использовать два шрифта – например, Helvetica и Times New Roman.

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

Как правильно написать ТЗ для верстальщика, который раньше верстал только лендинги?

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

• Важно понимать, что даже имеющихся инструментов вполне достаточно, чтобы создавать оригинальные тексты и изображения писем.
• В большинстве случаев баннер ставят в начало письма после шапки.
• В принципе, никто толком нормального и не сделал.
• Это проект с открытым исходным кодом, который существует с 2016 года.
• Оптимальный вес картинки, баннера и любого другого графического изображения – 200 кб, так они будут загружаться всего секунду.
• Он подключается как JavaScript-библиотека, после чего сразу готов к использованию.

Работа в таких редакторах построена по принципу «бери и тащи» — мы перетаскиваем нужные блоки в макет письма и заполняем их контентом. Некоторые из этих элементов не будут отображаться в рассылке (например, Flash-анимации, JavaScript). Другие могут отображаться, но при этом значительно повысят шанс рассылки на попадание в спам (сокращённые ссылки, письмо из одной картинки).

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

В большинстве случаев баннер ставят в начало письма после шапки. Задача баннера – мотивировать читать письмо дальше или сообщить главную мысль, если читатель не будет продолжать чтение. По данным, StatCounter, самый популярный размер шаблона на десктопе сейчас– 1920 на 1080 пикселей, https://deveducation.com/ на мобильном – 360 на 640. Но в то же время не все почтовые клиенты отображают письма корректно. А если и отображают, в письме при таком размере шаблона может появляться горизонтальный скролл – это неудобно. Фиксированная верстка просто пропорционально сжимается на телефонах.

Рассыльщики не любят писем, в которых есть гифки весом более пяти мБ. Даже если вашей рассылке повезёт попасть во «Входящие», она будет долго грузиться. Пользователи не любят тяжёлых писем — по статистике, если сообщение грузится дольше трёх секунд, его удаляют.