Полное руководство по маркированным спискам в электронной почте в формате HTML
Полное руководство по маркированным спискам в электронной почте в формате HTML
Опубликовано: 2019-09-06
Маркированные списки могут быть невероятно полезны для иерархии контента. Они позволяют подписчикам быстро и легко читать ключевые моменты вашей электронной почты и могут отделить важную информацию от остального вашего контента.
Но, как это часто бывает при разработке электронной почты, то, что звучит так просто - добавление маркированного списка не может быть ракетной наукой, не так ли? - оказывается сложнее, чем вы думаете. Не все почтовые клиенты отображают маркированные списки одинаково. Поэтому некоторые разработчики просто избегают использования маркированных списков или используют таблицы для придания им формы - тактика, которая может вызвать большие проблемы у подписчиков, использующих программы чтения с экрана.
Если вы хотите включать маркированные списки в свои электронные письма таким образом, чтобы сделать их доступными и надежными для всех почтовых клиентов, у нас есть решение для вас.
Использование тегов списка для маркированных списков
Здесь, в Litmus, мы используем теги списков, когда кодируем маркированные списки в наших электронных письмах:
<ul> указывает на неупорядоченный список или маркированный список элементов
<ol> указывает на упорядоченный список или нумерованный список элементов.
<li> указывает позицию в неупорядоченном или упорядоченном списке позиций.
Если вас интересует реализация тегов списков в ваших электронных письмах, читайте дальше!
Как начать работу с семантическими маркированными списками
Чтобы начать работу с маркированными списками в своих электронных письмах, вот минимальный код, необходимый для их работы.
В этом коде вы заметите пару вещей, которые мы обязательно включили. Один из них - определение конкретного типа маркера, который мы хотим включить в наш список, с помощью определенного атрибута типа в тегах <ul> и <ol>. Для <ul> мы указали кнопку в виде диска. Для <ol> мы указали «A» - поэтому элементы списка будут идентифицироваться с помощью A, B, C и т. Д. - но в упорядоченных списках также можно использовать числа, буквы нижнего и верхнего регистра, а также римские цифры. Вот полный список параметров атрибута type , которые можно использовать в электронной почте:
Параметры типа неупорядоченного списка
диск (читается как «пуля» •)
круг (читается как «белый круг» ○)
квадрат (читается как «черный квадрат» ■)
Параметры типа упорядоченного списка
1 (десятичное число по умолчанию)
A (прописные буквы)
а (строчный алфавит)
I (римская цифра в верхнем регистре)
i (римская цифра в нижнем регистре)
Следует отметить несколько моментов, касающихся стиля полей в этих списках. Мы также включили « левое поле » в оба списка. Это необходимо для того, чтобы маркеры отображались внутри границ вашего контейнера, а не смещались или не отображались вообще.
Рекомендации по Gmail
Примечательно, что веб-почта Gmail (но не приложение Gmail для мобильных устройств) является единственным клиентом, которому не требуется левое поле, чтобы маркеры отображались в правильных границах, что означает, что ваши списки будут включать этот дополнительный левый отступ. Если вам абсолютно необходимо, чтобы маркированные списки были на одном уровне с левым полем вашего контейнера, вы можете сбросить левое поле до нуля с помощью специального кода Gmail, например:
<head> CSS
u + .body .glist { margin-left: 0 !important; }
@media only screen and (max-width: 640px) {
u + .body .glist { margin-left: 25px !important; }
}
Как видите, мы включили мобильный адаптивный медиа-запрос, чтобы гарантировать, что сброс полей не повлияет на приложение Gmail на мобильном устройстве. Также обратите внимание на порядок написания CSS . Если вы поместите CSS для мобильных устройств перед CSS для настольных компьютеров, тогда CSS для мобильных устройств будет отменен из-за каскада.
PS: семантические маркированные списки, естественно, адаптируются к мобильным устройствам , так что это беспроигрышный вариант с преимуществами доступности!
Модифицируйте свои пули
Если вы думаете, что вам нужно делать маркированные списки простыми (мы думаем о черных, круглых маркерах или просто 1, 2, 3), вы ошибаетесь! С маркерами можно делать практически все, что и с текстом в электронных письмах. Вы хотите изменить цвет в соответствии с руководством по стилю вашего бренда? Вперед, продолжать. У вас есть упорядоченный список и вы хотите использовать собственный шрифт, соответствующий остальной части вашего электронного письма? Вы определенно можете и должны. Для любого списка вы можете изменить размер и цвет маркеров, а для упорядоченных списков вы также можете изменить шрифт и выделить жирным или курсивом числа или буквы.
Давайте посмотрим, что некоторые из этих стилей делают с нашим исходным кодом ранее.
Однако этот стиль еще не совсем правильный. Если вы заметили, глобальный стиль шрифта, который мы установили ранее для каждого списка, был переопределен стилем, который мы добавили к самим маркерам. Вы хотите обновить только стиль маркера , а не копию, которая идет после него. Это быстрое исправление - просто оберните текст элементов списка в стилизованный тег <span>, чтобы восстановить для копии предполагаемый стиль шрифта.
Намного лучше - теперь вы можете иметь стилизованные семантические маркированные списки без ущерба для стиля вашего перечисленного контента.
Вложение ваших списков
Теперь, когда вы знаете, как включить в электронную почту один семантический маркированный список, как насчет вложенного списка?
Включить вложенные списки без таблиц не так сложно, как вы думаете. Вам просто нужно закодировать свой вложенный список, как обычно, но убедитесь, что он вложен в тег <li>, а не за его пределами, иначе вы можете увидеть некоторые ложные маркеры в почтовых клиентах, таких как Gmail IMAP (GANGA). Вот как будет выглядеть этот код:
Вложенные списки наследуют глобальный стиль родительских списков, поэтому вам не нужны дополнительные интервалы или стили для обеспечения согласованности списков. Однако с интервалом в Outlook все же может быть сложно - сюрприз, сюрприз. Вот наши советы, которые помогут сохранить интервалы так, как вам нужно:
Для горизонтального интервала добавьте padding-left: #px; с правильным размером тега <li>. Это поможет контролировать расстояние между маркером и копией. Кроме того, не забудьте включить указатель левого поля, упомянутый в начале этого руководства, чтобы ваши маркеры не отображались далеко от вашей копии.
Примечание. К сожалению, это не работает в Outlook для Windows.
Для вертикального интервала добавьте margin-bottom: #px; с правильным размером тега <li>. Это поможет увеличить интервал по вертикали между каждым элементом списка.
Использование пользовательских символов или изображений для маркеров
Вы применили стиль для маркеров - теперь попробуйте вместо этого использовать изображения или значки!
В отличие от стилизации маркеров под нестандартный размер или шрифт, маркеры с настраиваемыми символами и изображениями не так повсеместно поддерживаются во всех почтовых клиентах, поэтому будьте осторожны и используйте такой инструмент, как Litmus Email Previews, чтобы убедиться, что ваши списки хорошо отображаются в вашем абонентские устройства.
Для нашего кода мы изменим маркированные списки, включив в них сердечки, а также наш собственный логотип Litmus для некоторых пользовательских изображений.
<head> Метаданные
<meta name=Generator content="Microsoft Word 15 (filtered medium)">
Outlook для Windows (2007, 2010, 2013, 2016, 2019)
Windows 10
Приложение Gmail
Приложение Outlook
Outlook.com
Gmail
Почему метод таблицы не идеален для доступности
Вы слышали, как мы говорили, что вам следует избегать использования таблиц при кодировании маркированных списков. Но почему?
Вы можете знать, а можете и не знать, что популярность программ чтения с экрана резко возрастает - по прогнозам, к 2023 году ими будут пользоваться 275 миллионов человек. Ваши подписчики могут использовать программы чтения с экрана, потому что у них есть инвалидность, которая требует этого, или потому, что они хотят слышать, какие электронные письма они чистят зубы утром.
Когда дело доходит до иерархии содержимого вашей электронной почты, мы выступаем за максимально возможное использование семантических тегов, то есть осмысленное и преднамеренное использование <h1>, <h2> и т. Д., В отличие от общих <p> и <span. > теги. Но когда дело доходит до семантических тегов, одним из камней преткновения для разработчиков электронной почты является маркированный или неупорядоченный список.
Программы чтения с экрана плохо читают электронные письма с таблицами. Если программа чтения с экрана идентифицирует таблицу в коде вашего электронного письма, она зачитает ее вслух как единицу. Он буквально расскажет вам о положении и содержании каждой строки и столбца. Это может быть немного сложно для подписчиков, слушающих ваши электронные письма, и, безусловно, усложняет им поиск нужного контента. Давайте посмотрим на этот маркированный список:
В кодировке таблиц это будет звучать примерно так:
Это… не здорово , правда? Когда дело доходит до маркированных списков, многие разработчики решают визуальную проблему, кодируя ложные маркированные списки в таблицах. Но если бы вы знали эти таблицы звучали так, что вы по- прежнему коду ваших списков , что путь?
В отличие от таблиц, теги <ul>, <ol> и <li> намного легче понять программе чтения с экрана. Когда программа чтения с экрана увидит эти теги в письме, которое читает вслух, она прочитает это вашим подписчикам:
Чтобы начать список, он сообщит вам, сколько элементов в списке.
Он будет описывать тип маркера, используемого для обозначения каждого элемента списка, из следующего:
Неупорядоченные списки: « bullet » для type = «disc» , « white bullet » для type = «circle», « black square » для type = «square».
Упорядоченные списки: связанный буквенно-цифровой символ или римская цифра (например: « a », « 2 », « IV »).
Чтобы завершить список, он скажет « вне списка ».
Например, вот маркированный список со специальными возможностями, читаемый программой чтения с экрана:
Это звучит намного лучше, чем слушать целую кучу строк и столбцов, не так ли? Намного легче понять контент в списках, когда его зачитывают вслух, как если бы вы читали список в своей голове, как если бы вы смотрели на само письмо.
Готовы сделать свои маркированные списки доступными?
Хотите сделать маркированный список электронной почты доступным и хотите, чтобы он хорошо отображался в почтовых клиентах и устройствах? Использование такого инструмента, как Litmus Email Previews, поможет вам убедиться в надежности маркированного списка. Кроме того, наши новые проверки доступности в контрольном списке Litmus помогут вам мгновенно увидеть, соответствуют ли ваши электронные письма основным лучшим практикам доступности, и получить действенные советы о том, как сделать свои электронные письма более инклюзивными.
