Специальные возможности в электронном маркетинге: 7 простых приемов, которые сделают ваш код более доступным

Опубликовано: 2019-04-16

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

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

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

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

Доступна ли ваша электронная почта?

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

Узнать больше →

Ваш контрольный список доступности

1. Добавьте код языка в свой <HTML>

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

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

Вот почему так важно проверить ваш <HTML> на предмет языкового кода - это простой фрагмент кода, который определяет язык вашей электронной почты. Если этого еще нет в вашем коде, добавьте lang = «xx» - замените xx кодом языка, подходящего для вашей электронной почты. Список всех возможных языковых кодов и местностей, который позволяет вам учитывать разные акценты, например различие между британским и американским английским, можно найти здесь .

 Следует учитывать несколько особых случаев:

  • Если вы используете какой-либо XML в своем теге <HTML>, вам также необходимо добавить xml: lang = «xx» .
  • Если вы включаете исправление Outlook 120dpi в свой код электронной почты, вам понадобится это решение, чтобы указать язык. Вот как выглядит наш код с этим исправлением:
     <html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">

Совет от профессионалов: можно динамически заполнять языковой код, если в вашем ESP настроена локализация.

2. Всегда добавляйте теги ALT к изображениям.

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

Везде, где у вас есть тег <IMG> в коде электронной почты, обязательно установите тег ALT. Если вы уже заполнили теги ALT, дважды проверьте, соответствует ли текст тексту на изображении. Если у вас есть пустые теги ALT, убедитесь, что на изображении нет текста, который нужно заполнить, чтобы программа чтения с экрана могла его увидеть. Если на ваших изображениях нет тегов ALT и нет текста в самом изображении - или нет текста, необходимого для смысла сообщения электронной почты - обязательно добавьте пустой тег ALT: alt = «» . Если вы не включите это, программы чтения с экрана будут читать URL-адрес изображения - и никто не захочет, чтобы им зачитывали длинный URL-адрес!

После того, как вы установили все свои теги ALT - пустые или нет - для изображений в электронном письме, добавьте стиль шрифта в тег <IMG> для стилизованного текста ALT . Этот стиль позволяет вам поработать с вашим ALT-текстом и позволяет изменять внешний вид шрифта, цвет, размер, стиль и толщину.

3. Включите атрибут role = "presentation" во все элементы <TABLE>.

Большинство маркетологов электронной почты полагаются на таблицы для структурирования макета своего электронного письма, но они могут вызвать серьезные проблемы для программ чтения с экрана. Если программа чтения с экрана идентифицирует таблицу в коде вашего электронного письма, она зачитает ее вслух как единицу. Он может буквально сказать вам, сколько там строк и столбцов, сообщая вам положение и содержимое каждого столбца, делая невозможным понимание вашего сообщения.

Вот почему важно сообщить программе чтения с экрана, что вы используете таблицу только для разметки. Вы можете сделать это, добавив role = «presentation» в каждую таблицу в своем электронном письме. Эта роль указывает программам чтения с экрана удалить любое семантическое значение из таблиц, поэтому вместо чтения номеров строк и столбцов они фокусируются на содержимом.

Давайте посмотрим на этот действительно простой заголовок одного из наших писем:

До того, как мы оптимизировали доступность, наш код выглядел так:

 <table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

Вы заметили, что отсутствуют атрибуты ALT, а таблицы не настроены на роль = "презентация" ?

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

Программа чтения с экрана: недоступный заголовок сообщения электронной почты

А вот тот же код, который был отредактирован путем добавления атрибута ALT = ”” и role = ”presentation” в теги <TABLE> для удобства чтения с экрана:

 <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td>&nbsp; </td></tr></table> </td></tr></table> </td></tr></table>

Программа чтения с экрана: доступный заголовок сообщения электронной почты

Как вы слышите, разница есть!

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

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

При двойной проверке копии убедитесь, что каждая копия, достойная заголовка, заключена в тег <H> : <H1> , <H2> , <H3> и т. Д. Точно так же убедитесь, что любой основной текст помещен в тег <P> . При просмотре электронной почты программы чтения с экрана делают упор на определенные заголовки, а установка этих тегов <H> и <P> упростит навигацию по электронной почте.

5. По возможности выровняйте копию по левому краю.

Когда дело доходит до вашего основного текста, может возникнуть соблазн выровнять по центру. Однако, когда дело доходит до доступности, это большой недостаток !

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

6. Проверьте контрастность вашей копии.

Сравните контрастность цветов вашего текста с цветами фона вашего электронного письма. У вас могут быть подписчики с дефицитом цвета, и если ваши цвета не обеспечивают им достаточного контраста, они не смогут прочитать вашу электронную почту. Проверить коэффициент контрастности можно двумя способами:

  • Если вы можете разместить свой HTML-код и создать URL-адрес для использования, это мой любимый способ проверки моих цветов: http://www.checkmycolours.com/
  • Если вам нужно вручную ввести свои цветовые коды, посетите https://contrast-ratio.com/

7. Добавьте эффекты наведения для CTA, ссылок и изображений.

В Litmus мы используем эффекты наведения на наши призывы к действию, ссылки и изображения, чтобы указать на кликабельность. Эффекты наведения - это простой интерактивный элемент, который может сделать ваши электронные письма более интересными и улучшить впечатления ваших подписчиков. Хотя эффекты наведения поддерживаются только в AOL, Apple Mail, Gmail и Yahoo! Mail - это популярный эффект, который стоит реализовать в коде электронной почты. Вы можете затемнить изображение, изменить цвет кнопки с призывом к действию, добавить всплывающую вкладку и многое другое.
Эффекты наведения могут помочь сделать вашу электронную почту более доступной, как в этом примере, где кнопка меняет свой цвет при наведении курсора.

Полный текст письма смотрите в Litmus Builder →

Хотите больше советов по электронной почте?

Полное руководство по доступности электронной почты

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

Скачать электронную книгу →


Получайте лучшие советы, статистику и ресурсы по электронному маркетингу и дизайну прямо в свой почтовый ящик и оставайтесь в авангарде инноваций в электронной почте, когда подпишетесь на Litmus News.

Будьте в курсе →