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

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

Этому есть несколько причин:

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

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

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

## Настройка стандартного ALT-текста

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

``

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

## Отображение стандартного ALT-текста

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

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

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

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

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

``

Вот тот же пример, но с примененными стилями 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! Mail в 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-family

— font-size

— font-weight

— color

— font-style

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

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

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

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

## Другие заметные особенности блокировки изображений

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

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

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

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