Стилизация ALT-текста e-mail рассылки

Интернет-маркетологи регулярно задаются вопросом, как быть, когда вывод изображений в письме e-mail рассылки отключено либо почтовым покупателем, либо самим посетителем. Ответ лежал на поверхности: использовать атрибут alt, на который никто обычно не обращает внимания. Задается он следующим образом: alt=”текст, который надо отобразить”.

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

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

Стилизация ALT-текста e-mail рассылки Если изображение не скачивается автоматически, шапка не отобразится, и будет выглядеть следующим образом:
Стилизация ALT-текста e-mail рассылки Добавив несложный код, мы получим следующий результат:
Стилизация ALT-текста e-mail рассылки Это простое решение, и оно выглядит намного интереснее обычного атрибута alt для изображений. Давайте рассмотрим код, при помощи которого мы достигли такого результата.

Мы начали с ячейки таблицы, в которой выводится текст, установив ей фоновый цвет( background-color:#1F003D).

После этого мы указали высоту ячейки при помощи свойства height, чтобы текст не съехал. Если мы задаем высоту ячейки, для текста не остается свободного пространства. Иначе он размещается по умолчанию в рамку высотой 289 пикселей. В случае, когда вокруг текста остается слишком много пространства, это выглядит некрасиво. Мы установили высоту – height:100px;.

Далее мы стилизовали текст путем установки нового шрифта( font-family: Arial;), цвета( color: #FFFFFF;), стиля( font-style: Bold;) и размера( font-size: 24px;).

<!–Шапка письма. Замените URL и Alt-тег–><tr><td class=””>http://www.abccompany.com/images/placeholder.png alt=”ABC Company: Building a Simple Stylized Alt Tag” style=”max-width: 100%; font-family: Arial; color: #FFFFFF; font-style: Bold; font-size: 24px;”></td></tr><!–Конец шапки письма–>

Сейчас даже при отключенном изображении атрибут alt письма будет выглядеть отлично.

Подсказка: Мы указали, что максимальная ширина шапки должна быть 100%(max-width: 100%;). Это надо для того, чтобы подстроиться под максимальную ширину картинки для мобильных устройств. Как вы могли заметить, почтовые покупатели живут по вашим правилам и не подчиняются никаким стандартам. Так что будьте внимательны и тестируйте рассылку на различных покупателях, в том числе с отключенными картинками.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *