Верстка email писем и работа c изображениями в email-маркетинге

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

• единство стиля, для узнаваемости бренда;
• вёрстка html писем: подбор шрифтов и стилевого оформления текста при;
• правильное использование изображений.

На последнем пункте следует остановиться подробнее.

Почему так важно правильно использовать картинки?

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

В результате правильное использование изображений помогает сформулировать главную идею и увеличивает эффективность писем. Оптимальным является соотношение 40% картинок на 60% текста. Поэтому важно понимать, как красиво оформить письмо, используя изображения.

Прежде всего, нужно обратить внимание на тип подачи текста. Чаще всего используется табличная верстка email писем. Она максимально проста и, в отличие от блочной, позволяет выводить информацию в виде, задуманном при создании. Но нужно учитывать, что уже сегодня на мобильных телефонах письма просматривают более половины пользователей (77% на момент написания в 2018 году).

Верстка писем должна быть адаптивной, чтобы емейл рассылка корректно отображалась на десктопах и ноутбуках, а также телефонах с различным размером экрана.

Как сделать верстку адаптивной?

Какой формат изображений использовать?

Сегодня наиболее популярными при верстке писем являются форматы картинок JPEG, GIF, PNG и SVG. Однозначных преимуществ не имеет ни один, и при выборе стоит ориентироваться на выполняемые задачи. Перечислим их особенности.

Шрифты для картинки

Рекомендуется при оформлении письма добавлять на изображение пояснительные надписи. При этом для выбранного шрифта нужно учитывать:

Оптимальный размер картинки

Размер при верстке html писем должен подбираться, исходя из следующих соображений:

Верстка письма: как использовать картинку – изображением или фоном?

При верстке письма можно устанавливать различный тип фона, в частности, в виде картинки. Технически сделать это несложно, но могут возникнуть проблемы при просмотре. Фон не должен выделяться и мешать просмотру текста, должен вписываться в общий дизайн письма. И особенно аккуратно нужно применять для фона анимированные GIF-изображения.

Также стоит установить дополнительно цвет фона. Некоторые почтовые клиенты и браузеры не допускают установки картинки в качестве подложки.

Поскольку не все платформу поддерживают свойство background, в частности это касается Outlook, Вам следует быть осторожным при использовании фоновых изображений. Добавляйте соответствующее значение bgcolor – так любой текст будет отображаться для пользователей без фоновых изображений и\или с отключенными изображениями.

Хотя картинки (особенно анимированные) и увеличивают привлекательность и CTR письма, не переусердствуйте с их количеством в ущерб информативности.

Заполнение атрибутов тега <img>

Не забывайте при установке картинки заполнить дополнительные атрибуты – особенно параметр ALT, в том числе, в логотипе. Если фото не отображается, на экране появится пустой участок и альтернативное описание. Причины:

При этом стоит учесть, что альтернативный текст не должен быть длинным (около 30 символов). Некоторые браузеры «режут» или просто не отображают длинные сообщения.

Особенности вписывания изображения в ячейку таблицы

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

Нужно ли устанавливать карты изображений?

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

Проблемы при рассылках на Gmail и Hotmail

В этих популярных почтовых клиентах часто проявляются различные эффекты при отображении рассылок. Иногда их стиль отличаются в различных браузерах – Safari, Chrome или Firefox.

В них изображения передаются блочными элементами, поэтому необходимо добавить не только в CSS, но и в тег <img> параметр style=display:block. Если картинка встраивается в текст (это может быть значок после ссылки в тексте), необходимо указывать style=display:inline.

Фоновые изображения, атрибуты alt и изображения в Gmail и в Hotmail – аспекты, которым следует уделить особое внимание при верстке электронных писем.

Для встраивания изображений в текст (например, изображение стрелки после текстовой ссылки), вы должны включить style=display: inline; instead of display:block; <a href=https://site.com>

Здесь будет ссылка со стрелкой в конце <img scr=arrow.gif width=12 height=12 style=display:inline; border:0;></a>

Обзор Stripo – платформы для создания HTML-писем без навыков верстки

Краткие выводы

Подведем некоторые итоги по вставке картинок в письма:

1. Картинки улучшают внешний вид и результативность рассылок при правильном использовании.
2. Верстка должна быть адаптивной, чтобы страница отображалась на экране мобильного устройства (без дополнительного сжатия).
3. Формат используемых картинок должен соответствовать поставленным задачам (преимущественно .PNG или .JPEG).
4. Шрифт подписи на картинке должен быть крупным, четким и контрастным.
5. Картинка должна иметь размер, соответствующий шаблону (до 600рх шириной).
6. При использовании картинки в качестве фона нужно учитывать видимость на ней текста, а также обеспечить альтернативное цветовое заполнение.
7. Обязательно следует указать альтернативный текст (небольшого размера) в теге ALT.
8. При вписывании картинки в ячейку таблицы необходимо соблюдать ряд правил.
9. При установке на картинку ссылки требуется предусмотреть правила линковки и убрать окантовку при наведении.
10. Нужно учитывать особенности стилевого оформления в Gmail и Hotmail.

При соблюдении этих рекомендаций ваши рассылки станут более эффективными и прибыльными!

Еще подборка полезных ссылок:

• Правила вёрстки email-писем – статья на хабре.
• Основы профессиональной верстки электронных писем.
• Инструмент проверки разметки в письмах

Часто задаваемые вопросы

Верстка писем что это?

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

Как осуществить email рассылку?

Для осуществления email-рассылки, сначала необходимо собрать базу адресов получателей, убедившись, что они дали согласие на получение писем. Далее следует выбрать сервис для email-маркетинга (например, Mailchimp, SendPulse или eSputnik), который предоставит инструменты для создания писем, сегментации аудитории и отслеживания эффективности рассылки. Важно также разработать стратегию содержания писем (контент-план), график рассылки и следить за соблюдением законодательства в области email-маркетинга.

Как сделать красивое письмо для рассылки?

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

Как красиво оформить подпись в почте?

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

Как красиво украсить письмо?

Чтобы красиво украсить email-письмо, следует использовать профессиональные шаблоны, доступные в сервисах email-рассылок, или создать собственный дизайн. Важно обеспечить читаемость и визуальную привлекательность: использовать гармоничную цветовую палитру, качественные изображения и легко читаемые шрифты.