Главная » Блоги Экспертов И ИТ-Компаний » Верстка email писем и работа c изображениями в email-маркетинге

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

шаблон электронного письма

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

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

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

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

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

  • при использовании картинок CTR писем возрастает на 47%;
  • оценка привлекательности материала увеличивается на 65%;
  • использование логотипа и фирменных цветов в оформлении повышает узнаваемость бренда;
  • люди более охотно кликают по картинкам.

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

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

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

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

  • Чтобы сообщение отображалось без искажений, ширину макета рекомендуется делать не более 600 пикселей, но не менее 500.
  • Лучше задать также границы сообщения. Психологи считают, что письмо без означенных границ подсознательно воспринимается «незавершенным». Для этого достаточно выполнить заливку письма определенным цветом.
  • Реальный размер изображения должен соответствовать выводимому без сжатия. Масштабирование ухудшает качество изображения на 40-60%.
  • Файл не должен быть большим – мобильный интернет может «не справиться».

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

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

  • JPEG. Достоинства: отлично передает цвета в фотографии. Недостатки: нет анимации, сильно искажается при уменьшении, размер файла растет с увеличением изображения; неудобен для логотипов.
  • GIF. Преимущества: передает анимированные изображения; сжимается, не теряя качества; хорошо передает текст; дает возможность создавать прозрачные участки. Недостатки: палитра ограничена (256 цветов); большой размер файла; плохо отображает фотографии.
  • PNG. Преимущества: сжимается без потери качества; идеален для логотипов; передает тексты; может передавать прозрачность. Недостатки: слишком «тяжелый» файл; отсутствие анимации; не все браузеры его поддерживают.
  • SVG. Преимущества: легко и без потерь масштабируется, имеет небольшой размер файла. Недостатки: не все почтовые клиенты поддерживают этот формат.

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

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

  • размер – не меньше 14 пикселей;
  • цвет – контрастный, выделяющийся на фоне;
  • тип – без засечек – Tahoma, Verdana или Arial.

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

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

  • размер баннера (анимированного или нет) должен вписываться по ширине в шаблон и составлять 600х300 или 600х400рх;
  • в качестве максимального размера чаще всего устанавливается 640х480рх;
  • чтобы кнопки были удобны для нажатия, их размер не должен быть меньше 40-50рх;
  • вокруг кнопок или кликабельных изображений необходимо сделать отступ;
  • нужно учитывать размер файла, чтобы не увеличивать время загрузки и не испытывать терпение клиентов.

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

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

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

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

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

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

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

  • медленно грузится (плохое соединение);
  • пользователь может отключить загрузку изображений для снижения трафика;
  • ряд почтовых клиентов выводят изображения лишь из проверенных источников;
  • при отключенной кликабельной картинке пользователь получит представление о том, куда ведет ссылка;
  • если картинка в заголовке, в превью отобразиться текст ALT до открытия письма.

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

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

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

  • для маленьких картинок (менее 19рх) необходимо прямо указывать высоту и ширину внутри <td> (атрибуты height, width, и line-height);
  • не следует использовать в названиях изображений слова типа «promo» или «banner», чтобы не попасть под действие блокировщиков рекламы;
  • между закрывающим символом тега <img> и закрытием ячейки </td> не должно быть пробелов, иначе браузер неправильно обработает закрытие ячейки.

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

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

  • вокруг картинки нужно сделать отступ;
  • необходимо запретить установку параметра border в ссылке, иначе может появляться синяя (бордовая после посещения) рамка вокруг картинки;
  • когда ссылка встраивается в крупное изображение, его надо порезать в Photoshop так, чтобы кликабельная область была отдельным файлом изображения, который в коде будет заключен в якорную ссылку. Перед тем, как выбрать этот вариант, советуем обсудить с вашими клиентами преимущества линкования всего изображения – так вы получите гораздо большую кликабельную область.

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

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

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

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

  • При добавлении изображения, у него обязательно должен быть прописан атрибут border=0, а если изображение обернуто ссылкой, то для тега ссылки должно быть прописано свойство border:none (если не сделать последнего, то в некоторых клиентах вокруг картинки может отображаться синяя рамка).
  • Формат gif лучше всего подходит для штрихованной графики и простых графических элементов.
  • Формат jpeg лучше всего подходит для насыщенных, многослойных и фотографических элементов. Качество изображений, экспортируемых в формате jpeg¸ как правило, должно составлять 60% от изначального качества. В некоторых случаях вам прийдется увеличить качество до 75% для устранения помех изображения.
  • Формат png лучше всего подходит для изображений с высокой прозрачностью.

Для встраивания изображений в текст (например, изображение стрелки после текстовой ссылки), вы должны включить 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>

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

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

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

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

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



Источник: https://vlada-rykova.com/?p=4205


Данный материал является частной записью члена сообщества Club.CNews.
Редакция CNews не несет ответственности за его содержание.
9 месяцев назад | тэги: Маркетинг, e-mail-маркетинг
Комментарии
Другие публикации
UA, Харьков
https://mavr.ua/, Интернет-маркетолог
+380676451078
Реклама PR и маркетинг

Полный комплекс услуг по интернет-маркетингу в b2b сегменте: SEO, SMM, маркетинговое сопровождение бизнеса.




Забыл пароль?
Авторизоваться через
Зарегистрируйся сейчас!
Присоединяйся к нашему обществу для того чтобы познакомиться с новыми людьми, создать собственный блог, публиковать анонсы событий и объявления, а также участвовать в обсуждении публикаций CNews. Мы создали единое пространство для общения специалистов рынка информационных технологий и всех, кто интересуется современными технологиями. Регистрация =>