Полное руководство по стилизованному ALT-тексту в электронной почте

Общепринятой передовой практикой в ​​мире электронной почты является включение атрибутов ALT для изображений. Сокращение для альтернативного текста, ALT-текст в электронном письме теперь является стандартной практикой для поклонников электронной почты.

Причин несколько:

• Большинство почтовых клиентов по умолчанию блокируют изображения. В некоторых случаях вместо изображения в почтовом клиенте отображается текст ALT. Это определенно удобно, особенно в тех случаях, когда дизайн электронного письма преимущественно состоит из изображений. Текст ALT может помочь передать сообщение, даже если изображения не могут.
• В ситуации, когда изображения не могут или не загружаются из-за плохого соединения, неработающей ссылки и т. Д., Вместо изображения будет отображаться текст ALT.
• Маркетологи и дизайнеры, чуткие к потребностям читателей с ослабленным зрением, понимают, что текст ALT используется программами чтения с экрана. Поскольку эти пользователи не могут просматривать текст или изображения, текст ALT служит для описания изображения с помощью средства чтения с экрана.

Убедитесь, что в ваших изображениях есть текст ALT С помощью контрольного списка Litmus вы получите предварительный просмотр своих писем с отключенными изображениями и получите уведомление, если в каком-либо из ваших изображений отсутствует текст ALT. Отправляйте с уверенностью каждый раз. Попробовать Litmus бесплатно →

Установить текст ALT для изображений в электронном письме в формате HTML очень просто. Известный как атрибут , это стандартная часть синтаксиса HTML, включенная в тег изображения:

 <img src="logo.jpg" width="400" height="149" alt="Litmus" >

Важно указать значения высоты и ширины, поскольку это создает поле-заполнитель для текста ALT, который будет размещаться, когда изображения отключены.

Стандартный текстовый дисплей ALT

Вот как выглядят отключенные изображения в электронном письме без текста ALT, отправленном в Gmail:

По сравнению с отключенными изображениями в электронном письме с текстом ALT :

Какой из них вы бы предпочли получить?

Добавление стиля к тексту ALT

Вы также можете поэкспериментировать с вашим ALT-текстом, добавив немного встроенного CSS для изменения шрифта, цвета, размера, стиля и веса ALT-текста:

 <img src="NAME OF IMAGE.PNG" width="500" height="462" alt="Litmus"/>

Вот тот же пример выше, но с примененными стилями текста ALT:

Поддержка стилизованного текста ALT в почтовых клиентах

Несмотря на то, что это изящная техника, мы все еще говорим об электронной почте, поэтому, естественно, поддержка немного разбросана по разным почтовым программам. Я позаимствовал некоторые элементы из впечатляющего электронного письма Dreamforce от Salesforce, чтобы протестировать стилизованный текст ALT для следующих примеров.

Поддержка текста ALT в стиле веб-почты

Клиенты веб-почты, такие как Gmail, являются самыми разнообразными, поскольку к этим почтовым программам можно получить доступ в разных браузерах. Во всех клиентах веб-почты поддержка стилизованного текста ALT зависит от используемого браузера. Стилизованный текст ALT поддерживается в текущих версиях Firefox, Chrome и Safari.

Например, стилизованный текст ALT будет виден подписчику, просматривающему свой Gmail в Firefox, но работает только в Internet Explorer. В этом случае поддерживается цвет, но не шрифт или другие атрибуты. Internet Explorer в целом кажется недружелюбным браузером для стилизованного текста ALT. Мы обнаружили, что хотя цвет поддерживался, часто шрифт не поддерживался:

• Gmail и G-Suite в Internet Explorer
• GMX.de в Internet Explorer
• Office 365 в Internet Explorer
• Outlook.com в Internet Explorer
• Web.de в Internet Explorer
• Yahoo! Почта в Internet Explorer

Стилизованный текст ALT в Gmail / Firefox:

Стилизованный текст ALT в Gmail / IE:

Текст ALT на связанных изображениях

Текст ALT для связанных изображений может быть подчеркнутым или синим в некоторых клиентах веб-почты. Yahoo! подчеркивает текст ALT в связанных изображениях, в то время как Gmail подчеркивает и игнорирует указанные цвета, вместо этого по умолчанию используется яркий синий цвет:

Outlook.com

Вместо того, чтобы блокировать все изображения, Outlook.com утверждает, что «блокирует контент от подозрительных отправителей», хотя я не уверен, как они определяют, кто выглядит подозрительно! Случайным образом некоторые отправители являются «доверенными», автоматически отображая изображения, в то время как другие выдают предупреждение о заблокированном содержании:

Пользователи могут блокировать изображения для всех, кого нет в списке надежных отправителей, в настройках Outlook.com. Outlook.com обрабатывает эти два типа фильтрации содержимого по-разному, используя поведение блокировки изображений, подобное Gmail, для «подозрительно выглядящих» отправителей и используя серые поля Hotmail для блокировки изображений для пользователей, у которых установлены более строгие настройки блокировки содержимого.

Поддержка текста ALT в стиле рабочего стола

Клиенты для настольных ПК немного более надежны, поскольку здесь задействовано не так много переменных:

* Outlook добавляет сообщение безопасности к тексту ALT. Подробности ниже.

Хотя Apple Mail и Thunderbird не блокируют изображения по умолчанию, вы можете сделать это в настройках каждого приложения. Я вручную включил блокировку изображений на этих клиентах, чтобы проверить, поддерживают ли они стилизованный текст ALT.

Были некоторые незначительные различия в поддержке других переменных, особенно связанных с веб-шрифтами:

• Apple Mail не поддерживает стилизованные шрифты, хотя цвет и другие свойства по-прежнему включены.
• В Outlook 2000-2003, хотя вы могли изменить цвет, вы не могли ничего изменить с помощью стилизованного текста ALT.

Сообщение безопасности Outlook

Outlook 2003, 2007, 2010, 2013 и 2016 предваряют ALT-текст длинным сообщением безопасности, в котором говорится: «Щелкните здесь правой кнопкой мыши, чтобы загрузить изображения. Чтобы защитить вашу конфиденциальность, Outlook запретил автоматическую загрузку этого изображения из Интернета ». К сожалению, это делает текст ALT в этих почтовых клиентах почти бесполезным, поскольку он появляется только в самом конце предупреждения безопасности Outlook:

Это сообщение также появляется в Windows 10, полностью блокируя любой ALT-текст.

Поддержка текста ALT в мобильном стиле

Мобильные клиенты полностью поддерживают стилизованный текст ALT, что является отличной новостью, особенно для маркетологов с большой аудиторией Android.

Подобно Apple Mail и Thunderbird, я вручную обновил свои настройки iOS, чтобы заблокировать изображения, чтобы посмотреть, как эта мобильная ОС обрабатывает текст ALT.

Стилизованный текст ALT в Android (Samsung Galaxy Nexus):

Стилизованный текст ALT одинаково отображается в приложениях электронной почты и Gmail на Android.

Стилизованный текст ALT в BlackBerry OS 6 (Torch 9810):

Стилизованный текст ALT в iOS (iPhone 5):

Блокировка изображения в Windows Phone 7.5 (Nokia Lumia 900):

Свойства шрифта CSS, ссылки и длина являются переменными

Если вдаваться в подробности, то большинство из следующих свойств шрифта поддерживаются в клиентах, которые отображают стилизованный текст ALT:

• семейство шрифтов
• размер шрифта
• font-weight
• цвет
• стиль шрифта

Когда дело дошло до поддерживаемых свойств, в тестировании были некоторые различия. Почти каждый клиент поддерживает свойства цвета, но не шрифта. Это также варьировалось между браузерами. Например, вот как выглядел Gmail / G-Suite в Chrome в моем тесте двух стилизованных шрифтов с разными цветами:

В то время как Gmail / G-Suite в Internet Explorer уважает цвет, но не шрифт:

Имейте в виду, что некоторые клиенты могут не поддерживать все шрифты или размеры в своем стилизованном ALT-тексте, но это не значит, что вы не можете добавить какой-то брендинг или чутье. Ознакомьтесь с этим удобным ресурсом, который специалист по электронному маркетингу Джайна Мистри написала для Campaign Monitor, чтобы дважды проверить поддержку веб-шрифтов.

Я также рекомендую этот список часто устанавливаемых шрифтов в Windows и Mac.

Другое примечательное поведение блокировки изображений

Во многих почтовых клиентах текст ALT исчезает, когда размер или длина текста превышает ширину и / или высоту контейнера изображения. Из-за такого поведения, вероятно, лучше придерживаться более коротких описаний и меньшего размера шрифта, чтобы избежать полного удаления текста ALT.

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

Предварительный просмотр электронной почты с выключенными (и включенными!) Изображениями

Как выглядит ваша электронная почта с отключенными изображениями? Правильно ли отображается ваш ALT-текст? Просматривайте свою электронную почту в более чем 50-ти клиентах для настольных, мобильных и веб-приложений, включая просмотр изображений, с помощью Litmus.

Начать тестирование →