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

2016-06-02 0 ∞

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

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

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

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

Добавив несложный код, мы получим следующий результат:

Это простое решение, и оно выглядит гораздо интереснее обычного атрибута 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%;). Это необходимо для того, чтобы подстроиться под максимальную ширину изображения для мобильных устройств. Как вы могли заметить, почтовые клиенты живут по своим правилам и не подчиняются никаким стандартам. Поэтому будьте внимательны и тестируйте свою рассылку на разных клиентах, в том числе с отключенными изображениями.