Более детально об этом вы можете почитать вот в этой публикации на stackoverflow. Любая станица начинается с тега head, и письмо – не исключение. В head обычно прописывают мета-информацию для браузеров, мы же будет прописывать ее для почтовых клиентов. Я специализируюсь на создании качественного дизайна и адаптивной HTML вёрстки писем для всех видов email-рассылок.
Из-за карантина люди стали проводить больше времени дома, за экранами гаджетов – в том числе в почтовом ящике. На помощь пришло темное оформление, которое снижает нагрузку на глаза. Темные интерфейсы появились в разных интернет-сервисах – социальных сетях, стриминговых платформах, аудиосервисах. В целом, если текст объемный, достаточно 2-3 кнопок CTA. Если это подборка товаров – кнопки можно ставить прямо в карточках. Фирменные цвета можно использовать даже как фон или рамку письма.
КАК МЫ ДЕЛАЕМ ПИСЬМА
В принципе, никто толком нормального и не сделал. Прежде всего будет крайне полезным подход Mobile First. Сделать из мобильноого письма десктопное в несколько раз проще и быстрее, чем наоборот. Шаблоны html-писем для email-маркетинга от профессионалов. Корректное отображение писем достигается за счет адаптивной email-вёрстки.
Если письмо шире — на некоторых устройствах появится горизонтальная полоса прокрутки. При этом длина письма и размер фона может быть любым. МФО имеет высокий уровень доверия пользователей.
Верстка email рассылок и писем
И помните, что при восприятии информации в интернете взгляд человека обычно направлен в левый верхний угол и на остальное его часто не хватает. Также часто тексты читают по F-паттерну – взгляд скользит по странице в форме этой буквы. Поэтому, верстка писем если используете две колонки, старайтесь главное размещать слева и в верхних строчках. Чем меньше колонок с контентом в электронном письме, тем проще его воспринимать. У Marka и Ampier нет никаких ограничений по структуре писем.
С этим кодом умеют работать все почтовые клиенты Microsoft. Если хотите – можете без проблем нагуглить десяток сервисов и выбрать себе понравившийся, но они в большинстве своем будут платными. Если нет желания платить – читайте ниже о том, как сформировать свое письмо без почтовых сервисов. Во входящих часто встречаю письма с откровенно шакальными мутными изображениями. Такое случается, если для рассылки шириной 600 пикселей взять картинку 600 пикселей.
Дизайн + Адаптивная вёрстка писем: Эффективные решения для вашей email-рассылки!
Теперь темные письма приходят не только на Черную пятницу. Такой email-дизайн привлекает, потому что читать письма на черном фоне мы пока не привыкли. Тенденция «просто текст» срабатывает как эффект неожиданности. Человек открывает письмо, ожидая увидеть там шапку, баннеры, иллюстрации и кучу других элементов, а видит просто текст. Письмо похоже на переписку с живым человеком – это необычно, привлекает. Несмотря на то, что в футере содержится важная информация, он должен отличаться от текста письма по шрифту текста или цвету фона.
Проще всего создать письмо в блочном редакторе. В нём можно выбрать готовый шаблон или собрать письмо из блоков с нуля. Вот, для примера, один из 200+ бесплатных шаблонов в блочном редакторе Unisender. В нём используются те же семейства шрифтов, такие https://deveducation.com/ же логотипы и цветовые сочетания. Так мы сохраняем корпоративный стиль, а подписчикам проще узнать нас среди входящей почты. В email-рассылках используют набор «безопасных» шрифтов, которые отображаются во всех браузерах и почтовых приложениях.
Проще всего подсмотреть цвета и шрифты для рассылки в брендбуке компании. Если такого нет — можно собрать палитру цветов с сайта и перенести их в письмо. Я для этого использую расширение для Chrome Eye Dropper. Если не пользоваться конструкторами и шаблонами – опций мало, можете попробовать сервис, который переводит CSS-стили в инлайнеры (записывает в теги). Кнопки создаются через специальный сервис Гугла.
Отдельного упоминания заслуживает комбинация так называемой отзывчивой и адаптивной верстки email. Она предусматривает возможность одинаково успешного отображения электронного письма как на стационарном ПК, так и на любом мобильном устройстве. Сегодня эта тема является очень актуальной, так как более половины рассылок открываются и прочитываются со смартфонов или планшетов.
