Иногда бывает так, что у пользователя картинки в почте не открываются. Это связано с тем, что большинство десктопных почтовых клиентов (Mozilla Thunderbird, Outlook 2007-2016) по умолчанию блокируют загрузку изображений. Так же поступают и веб-интерфейсы Yahoo, Outlook.com и Gmail, если сочтут отправителя ненадёжным или контент письма сомнительным. Чтобы показать изображения, и те и другие требуют подтвердить их загрузку.
Очень важно мотивировать пользователя загрузить картинки, ведь они делают письмо привлекательным и помогают получить достоверную статистику открытий через трекинг-пиксель.
Но даже если у пользователя картинки в почте не открываются, письмо должно отображаться корректно, быть читабельным и понятным по структуре.
Содержание
Что делали раньше, если картинки в почте не открываются
Примерно 4 года назад Gmail не загружал картинки по умолчанию. Тогда маркетологи, чтобы мотивировать его пользователей прогрузить их, использовали «мозаичную вёрстку»: прописывали в html-коде таблицу, ячейки которой заливали цветами изображения. Она отображалась вместо заблокированной картинки и представляла собой её пиксельную версию. Это помогало показать задумку письма и стимулировало прогрузить полноценные картинки, чтобы посмотреть их в хорошем качестве.
Такой приём значительно увеличивал код письма и затруднял мобильную адаптацию. Поэтому в современной емейл-вёрстке его не используют.
Что делать теперь
Сегодня мобильная адаптация и удобство взаимодействия с письмом вышли на первое место. Чтобы помочь пользователю сориентироваться даже в письме с отключёнными картинками, следуйте нашим советам.
Прописывайте alt-тексты изображений
Тогда, если картинки в почте не откроются, подписчик увидит на их месте описания. Они укажут, где предусмотрены изображения, и объяснят, что картинки должны были показать.
Учтите, что весь текст письма нужно прописывать в html-коде именно текстом, а не вставлять изображением. Иначе пользователь увидит письмо, состоящее только из незагруженных картинок.
Атрибут alt в вёрстке обязателен. То есть он должен присутствовать в html-коде, даже если вы не собираетесь прописывать его значение. Тогда он будет выглядеть так:
Размер alt-текста должен быть не больше ширины изображения, для которого его прописывают. Theoutnet не уследили за этим — альтернативные тексты их иконок соцсетей наезжают друг на друга.
Прописывайте стилизацию alt-текстов
Если картинки в почте не открываются, их alt-текст должен гармонировать с остальным текстом и элементами письма. Поэтому пропишите для «альта» такие же или сочетающиеся стилевые свойства: цвет, гарнитуру и размер.
Разберём на нашем письме. Основной его текст набран 16-м шрифтом семейства Arial, чёрным цветом. Тогда alt-текст логотипа следует сделать такого же размера и набрать тем же шрифтом. Но цвет выберем серо-синий — такой же, как цвет самого логотипа. Так мы сохраним общий дизайн письма.
Письмо с загруженными картинками
Письмо с отключёнными картинками
Html-код тогда будет выглядеть следующим образом:
Прописывайте размеры и фон, если картинки в почте не открываются
Чтобы вёрстка не поехала, пропишите для изображений фактические ширину и высоту в пикселях. Тогда, даже если картинки в почте не откроются, пользователь увидит читабельное, структурированное письмо.
Но при вставке изображения, которое должно адаптироваться методом масштабирования, его ширину следует прописывать в процентах от родительского элемента. Высота при этом рассчитается автоматически, исходя из пропорций картинки. В таком случае масштабируемое изображение подстроится под размер адаптивного письма и гармонично в него впишется.
Пропишите альтернативный цвет для фонового изображения. Иначе,если картинки в почте не откроются, текст может слиться с фоном и стать нечитабельным.
Также позаботьтесь о сохранении цветовых акцентов на элементах. Для этого пропишите в вёрстке фоновый цвет элемента, который хотите выделить. Тогда акцент сохранится даже в режиме отключённых картинок.
В письме ниже компания прописала альтернативный серый цвет для фона кнопки «Ещё», голубой цвет для общего фона и серый цвет для подложки блока текста. Теперь, даже если картинки в почте не откроются, пользователь всё равно увидит акцент на кнопке и цветовую концепцию письма:
Итак, чтобы у пользователя отображалось структурированное и читабельное письмо, даже если картинки в почте не открываются:
- прописывайте alt-тексты изображений;
- следите, чтобы они помещались в ширину изображения;
- прописывайте стилизацию alt;
- прописывайте ширину и высоту изображений;
- прописывайте альтернативные цвета для фоновых изображений и элементов, акцентированных цветом.
Всегда думайте, как подписчик будет взаимодействовать с вашим письмом. Сделайте так, чтобы ему было удобно, и тогда вы выделитесь среди конкурентов. Не позволяйте отключённым картинкам всё испортить, как это было у Booking. А чтобы сделать емейл ещё привлекательнее — прочитайте семь наших советов.
