Одно и то же еmail сообщение воспринимается читателями по-разному, во многом это зависит от дизайна письма — насколько он привлекательно выглядит для подписчика. Если вы хотите передавать в письме настроение и красиво преподнести ваш товар, то одним из важных элементов оформления email-рассылок являются картинки.
Зачем нужны изображения в письмах?
- Картинки усиливают эффект от письма. Перед прочтением читатель выделяет образы, акцентируя на них внимание, только потом начинает читать о чём письмо. Чтобы создать хороший образ — картинка лучший помощник.С помощью правильно подобранных картинок для письма можно подчеркнуть главную идею письма и создать правильный образ.
- Люди любят нажимать на картинки в письмах, так воспользуйтесь этим — расположите под картинкой ссылку на ваш сайт. Проследите, чтобы ссылка была не слишком длинной и располагалась в одной строке — в противном случае она может оказаться нерабочей.
- Реклама товара работает лучше, если представлена наглядно в виде картинок. Ведь лучше один раз увидеть, чем 100 раз прочитать.
- С помощью изображений легче сделать ваше письмо/бренд узнаваемым. Можно добавить корпоративные изображения, логотипы, фотографии от кого адресуется письмо — клиенту будет приятно видеть с кем он общается.
- Чтобы узнать прочитал подписчик письмо или нет, лучше размещать картинки на нашем сервисе. Это позволит увидеть когда и для какого сообщения подписчик загрузил картинки, а следовательно прочитал письмо. (Многие клиенты автоматически позволяют загружать картинки. )
Подводные камни оформления изображений в письмах:
- «Большие» картинки это плохо. Большие можно трактовать по-разному: Во-первых, размер в байтах. Чем больше изображение, тем медленне оно будет загружено, допустим используя мобильный интернет. Во-вторых, размер в точках (пикселях) Лучше всего чтобы реальный размер изображения был равен тому, который отображается в письме. Часто бывает так, что картинка 2000x2000 пикселей сжимается до 200x200 пикселей. Такие сжатия всегда неуместны. Картинка загружается медленнее и теряет в качестве.
- Не используйте картинки 1х1 пикселей. Иногда для заполнения пустого места удобно использовать прозрачную картинку 1x1 пиксель. Такие изображения могут привести к попаданию в спам. Обойти эту проблему очень просто, используйте вместо этого картинку 10x10 пикселей :).
- При неумелом использовании картинка может стать врагом: многие грешат тем, что при составлении письма всё полностью заполняют картинками. Возможно, для реализации всех творческих идей это и хорошо, но с другой стороны — если изображения не загрузятся, читатель может получить просто набор ссылок. Используйте текст для важной информации, а изображения, чтобы усилить смысл сказанного или привлечь внимание читателя.
- Названия блоков лучше делать текстовыми, чтобы они не исчезали при пересылке.
- Проставляйте ссылки под картинки. Если этого не сделать, то в Gmail при клике на картинку пользователь попросту скачает её, а не перейдёт на сайт.
- Если картинки для письма находятся в одном блоке — проследите, чтобы они были одинаковыми по размеру и везде был ALT текст.
Плохо:
Хорошо:
Что такое Aльт-текст и очему он так важен для email-рассылок?
Альтернативный текст (alt text) - это фрагмент текста, который прописывается под изображение в письме. Атрибут АLT особенно удобен, когда дизайн вашего письма преимущественно состоит из изображений — это помогает передать смысл изображения, если оно не загрузилось. В целом, он нужен если:
- Почтовые клиенты блокируют изображения, из-за чего письма отображаются некорректно. Общепринятой практикой в мире электронных рассылок является добавление к каждой картинке альтернативного текста (известного как «ALT тег» или «ALT текст») для изображений. Этот элемент задаёт текст, который будет отображаться в письме вместо не загрузившегося изображения из-за плохой связи, неработающей ссылки, настроек браузера и т.д.
- Пользователи используют программы для чтения писем вслух, тогда вместо картинки прочтётся именно этот фрагмент.
- Вы хотите, чтобы ваше письмо было идеально и почтовики не ругались на отсутствие этого параметра. Ведь в том числе по описанию Альтов почтовик судит о содержимом всего письма.
Если картинки не загружаются и нет альтернативного текста, то сообщение выглядит нечитабельно — вместо картинок в письме клиенту может оказаться просто белый лист или блок.
Когда подписчик видит в письме атрибут alt — это сигнал, что ему нужно нажать «показать картинки»
Простые советы для написания Aльт-текста
1. Используйте разные Альт-теги для разных картинок, чтобы лучше проинформировать подписчиков о том что содержится на изображениях.
Например, у вас есть несколько продуктов в письме. Не стоит называть каждую картинку как "Карточка товара", лучше укажите название самого товара или дайте краткое описание.
2. Не слишком вдавайтесь в подробности.
Указывайте в Альт-тексте только самую основную мысль. Например, если это громадная скидка на товар - так и напишите.
3. Указывайте alt-текст при необходимости.
Если вы по каким-то причинам не хотите указывать альты - включайте пустой атрибут, который будет выглядеть так alt=””
Пример того, как выглядит подстановка аль-текста у в eSputnik.
Важные моменты при работе с альтернативным текстом:
1. Установить ALT текст для изображений в сообщении электронной почты очень просто — это стандартная часть синтаксиса HTML, в теге изображения:
<img width="400" height="149" src="logo.jpg" alt="Текст">
Важно указывать значения высоты и ширины изображения, так как это влияет на заполнение поля для альтернативного текста, когда изображения будут отключены.
2. Если сделать ALT текст слишком описательным — подписчику не нужно будет кликать на «отобразить картинки»
3. Экспериментируйте с альтернативным текстом, добавив немного встроенных CSS, чтобы изменить шрифт, цвет, размер и фон ALT текста. Например исходное изображение:
Если добавить стили, то получится так:
<img src=”logo.jpg” width=”400″ height=”149″ alt=”Текст” style=”font-family: Georgia; color: #697c52; font-style: italic; font-size: 30px;”>
- Gmail в Firefox:
- Gmail в Chrome:
4. Во всех почтовых клиентах, поддержка стилизованного ALT текста зависит от используемого браузера. Например, он будет виден при просмотре письма в Gmail в Firefox, а при просмотре Gmail в Internet Explorer — нет.
- Gmail в Internet Explorer:
- Gmail в Firefox
5. ALT текст со ссылкой на изображение в некоторых почтовых клиентах может быть подчеркнутым или выделяться синим цветом. Yahoo! подчеркивает ALT текст в ссылках изображений, в то время как Gmail подчеркивает и игнорирует указанные цвета, подставляя по умолчанию синий
6. Во многих почтовых клиентах альтернативный текст исчезает, как только размер или длина текста превышает ширину и/или высоту изображения. Поэтому, лучше придерживаться коротких описаний и меньшего размера шрифта, чтобы ALT текст не пропал.
Firefox:
Opera:
Chrome:
7. Если вы применяете стили к ALT атрибутам, проверяйте, как ссылки будут отображаться в разных почтовых клиентах и не ломают ли они стили. Помните, что «фокусы со стилями» иногда улучшают внишний вид письма, но всегда расчитывайте на худший вариант, когда альтернативный текст будет показан обычным текстом вместо картинки.
Конечно, хорошо если читатели добавили вас в адресную книгу или выбрали «Всегда отображать картинки от …», но всё же лучше перестраховаться и оформить письмо, придерживаясь этих простых советов. Не забывайте, что письма, перенасыщенные информацией, картинками и текстом, могут посчитать спамом, а нам ведь этого не нужно, правда?:)
До новой встречи в нашем блоге :)
