На платформе рассылок Sendsay простой и удобный редактор кода. Чтобы в него попасть, кликните «Создать выпуск», выберите E-mail и среди предложенных вариантов по созданию письма – в HTML-редакторе. Для создания макета обычно привлекают дизайнера, который отрисовывает баннер и другие элементы. Затем макет собирают в блочном редакторе, и письмо готово.
Не все блочные редакторы и не всегда обеспечивают хорошее отображение в разных почтовых клиентах и веб-интерфейсах. Как правило, отображение приемлемое, но далеко не идеальное. Есть пара способов, как адаптировать свои письма под darkish верстка писем mode и перестать светить ими, как паяльной лампой, в глаза получателям. Как мы уже говорили, заниматься вёрсткой писем для e mail рассылки проще всего в блочном редакторе.
Умение рассылки подстраиваться под различные устройства и размеры экрана и называется адаптивностью. Также не рекомендуем использовать CSS-анимацию, так как в письмах не работают многие CSS- и HTML-теги (специальные настройки, которые отвечают за внешний вид страниц в вебе). Например, в письме не получится наложить два элемента друг на Пользовательское программирование друга так, чтобы это смотрелось хорошо на всех устройствах. Оптимальный вес – 125–800 кб, поэтому слишком тяжелые GIF следует сжимать так же, как и картинки. Если вам нужно быстро сверстать несложную рассылку самостоятельно – используйте готовые шаблоны или блочный редактор сервиса рассылок.
На десктопе при этом специальный функционал для звонка будет лишним. Если вам нужно, чтобы резиновая верстка не работала для смартфонов, то для некоторых участков email-письма можно отключить адаптивность. В конструкторе EmailMaker, для этого есть специальная кнопка — она блокирует превращение двух колонок в одну. Общий принцип адаптивности в конструкторах — резиновая верстка.
Гайд По Верстке Писем Для Email-маркетологов: Виды, Возможности, Проверка Корректности, Частые Ошибки
- В таком редакторе все блоки сверстаны так, чтобы письмо адаптировалось под разные устройства.
- А если не знаете, как адаптировать тот или иной элемент письма, посмотрите референсы в рассылках крупных компаний.
- Выбрав какой-либо конкретный фреймворк, вы оказываетесь привязаны к его особенностям рендеринга.
- Если вам нужно, чтобы резиновая верстка не работала для смартфонов, то для некоторых участков email-письма можно отключить адаптивность.
- Поэтому в мобильной версии меню обычно выглядит слишком мелко — по кнопкам тяжело попасть, появляется чувство захламленности экрана.
Не используйте сторонние сокращалки для ссылок, поскольку в них адрес сайта и сама ссылка отличаются. Почтовики отслеживают это несоответствие и классифицируют такое письмо как потенциальный спам. Если ваше письмо рассчитано на высокий отклик, то главным элементом в нем должны быть кнопки name https://deveducation.com/ to action. Если сделать большое количество колонок, то они будут узкие и их будет сложно читать. Многие верстальщики предпочитают использовать одноколоночный стиль.
Как Правильно Верстать Электронные Письма
Со статьей помог Денис Щукин, верстальщик писем в Unisender Company. — Помните о пользователях, которые отключили показ картинок в браузере. Соблюдайте баланс «текст-изображение», чтобы в любом случае донести информацию до человека. — Указывайте как можно больше стилей для элементов.
Если по горизонтали находится несколько блоков, которые на экране смартфона не умещаются в ширину, то они прыгают друг под друга. Минимальный размер кнопок для смартфонов — forty five на 45 пикселей. Даже по дизайну просится кнопка меньше по размеру, область нажатия всё равно должна быть не менее 45px.
И в целом он выглядит очень винтажно, чем могут воспользоваться email-маркетологи. Это моноширинный шрифт, поэтому его очень любят программисты, которые пишут на нем скрипты. Используйте универсальные HTML-теги и атрибуты, чтобы все элементы отображались корректно на любом устройстве и в любом почтовике.
С их помощью можно менять размеры шрифта и цвет кнопок, расположение блоков и картинок в зависимости от размера экрана. Но полностью полагаться на них не стоит — до сих пор не все почтовые клиенты выполняют эти инструкции. К примеру, для компьютерной версии письмо может состоять из двух или трех колонок, а при адаптации блоки подстраиваются один под другой.
Даже если вы досконально знаете HTML и CSS, над письмом надо будет потрудиться.
Чтобы в письмо автоматически подставлялись нужные товары и услуги, нужно написать специальный код и вставить его в письмо. Но для работы с кодом нужны знания программирования, поэтому сервисы рассылок разработали блочные редакторы для тех, кто не умеет писать код. Создание макета возможно и без контента, но тогда ТЗ нужно составить как можно более подробно, с указанием структуры и содержимого. Поэтому пробуем открыть письмо через почтовые клиенты. Следовательно, верстка электронных писем сложный и трудоемкий процесс, который лучше доверить профессионалу. Ведь от того, каким увидит ваш e-mail подписчик, зависит репутация и прибыль компании.
Для корректного отображения письма его ширина не должна превышать 600 пикселей, поэтому изображения важно предварительно подогнать по ширине. У почтовых клиентов есть ограничения по размеру верстки писем для email-рассылки – не больше 100 Кб. Если его превысить, то письмо может некорректно отображаться или не отправиться вовсе. Чтобы письмо не улетело в спам, добавляйте plain text версию письма (письмо, которое состоит из одного текста). Такой случай необходим для почтовых клиентов, не отображающих HTML.