Руководство по доступному дизайну в email-маркетинге

**Ключевые выводы**:

— Цель доступного дизайна — помочь всем наслаждаться вашим контентом.

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

— Лучше делать маленькие шаги в направлении доступности, чем не делать их вовсе.

Дизайн электронных писем — это больше, чем просто красивые украшения и интересные цвета; это то, как люди воспринимают информацию и взаимодействуют с ней.

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

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

### Оглавление

— Что такое доступный дизайн?

— Принципы доступного дизайна для email-дизайнеров

— Распространенные ошибки в дизайне, которые допускают дизайнеры

— Примеры доступных электронных писем для дизайнеров

— Инструментарий дизайнера для доступности email-писем

**Что такое доступный дизайн?**

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

— Постоянные состояния, такие как слепота.

— Временные травмы, такие как сотрясение мозга или перелом запястья.

— Ситуационные трудности, такие как управление телефоном одной рукой, когда другая рука занята.

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

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

В обсуждении доступных электронных писем на Litmus Live 2024 Сара Гальярдо, ведущий email-разработчик и специалист по доступности email в Oracle Digital Experience Agency, поделилась: «Недостаточно придумать хороший дизайн — это могут сделать многие дизайнеры. Email — это прежде всего коммуникационная платформа, поэтому очень важно, когда вы не общаетесь с 27% своих получателей».

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

### 1. Доступный дизайн

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

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

### 2. Инклюзивный дизайн

Существует разница между доступностью и инклюзивностью в дизайне электронных писем.

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

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

### 3. Универсальный дизайн

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

## Принципы доступного дизайна для email-дизайнеров

Лучшие практики доступного дизайна преследуют одну и ту же цель — помочь *всем* наслаждаться вашим электронным письмом. Хотя есть некоторые конкретные вспомогательные инструменты или состояния, которые нужно учитывать, вы увидите, что в целом доступный дизайн — это просто хороший дизайн. Вы можете даже принимать решения в пользу доступного дизайна, не осознавая этого.

Перейти к советам по:

— Живой текст

— Иерархия текста

— Выравнивание по левому краю

— Размер шрифта

— Межстрочный интервал

— Контрастность цветов

— Фоновые изображения

— Дизайн кнопок

— Ссылки

— Макет

### Используйте реальный текст вместо писем, состоящих только из изображений

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

Реальный текст в HTML — победитель доступного дизайна по ряду причин.

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

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

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

Наконец, использование реального текста вместо его блокировки в изображении позволяет персонализировать сообщения с помощью динамического контента.

### Создайте организованную и сканируемую иерархию

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

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

### Выравнивайте текст письма по левому краю

Использование реального текста и иерархии может повысить читаемость, но выравнивание вашего текста также влияет на читаемость ваших писем.

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

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

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

Если у вас более двух строк текста, выберите выравнивание по левому краю. Это самый доступный вариант во всех отношениях, и он ощущается более естественно и комфортно для глаз.

### Используйте минимальный размер шрифта 14px

«Что это, письмо для муравьев?!»

Мелкие шрифты помещают ваш дизайн в диапазон от раздражающего до совершенно нечитаемого. К счастью, это легко исправить. Некоторые мобильные устройства, такие как iPhone, автоматически увеличивают текст размером менее 14 пикселей. Установка шрифта размером не менее 14 пикселей, а лучше — еще больше, может помочь улучшить опыт чтения. Помните, что вспомогательные устройства масштабирования или программы увеличения экрана могут изменять точное положение вашего шрифта в электронном письме.

Вам также нужно обращать внимание на выбранный шрифт. Безопасный для веба шрифт — более надежный вариант, и к ним относятся наиболее доступные шрифты, такие как Arial и Helvetica. Если безопасные для веба шрифты портят вашу атмосферу, вы можете экспериментировать с веб-шрифтами, но вам понадобится резервный шрифт, если веб-шрифты не поддерживаются.

Сделайте каждое письмо значимым для всех

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

### Оптимизируйте межстрочный интервал

Читаемость вашего текста также зависит от межстрочного интервала — очень похоже на принцип «Голдилокс».

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

Консорциум Всемирной паутины даже имеет четкие рекомендации по доступности относительно правильного межстрочного интервала, предлагая 1,5-2 вместо одинарного интервала.

### Обеспечьте высокий контраст

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

К счастью, существуют хорошо зарекомендовавшие себя рекомендации по надлежащему контрасту. Рекомендации по доступности веб-контента четко определяют, как они определяют соответствующий контраст. Основное правило — сделать элементы *различимыми*. Их слова: «Сделайте цифровой контент более легким для восприятия, в том числе отделяя передний план от фона».

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

Балансируйте размер фоновых изображений и текста

Фоновые изображения являются обязательным элементом многих дизайнов электронных писем, и мы уже говорили об использовании живого текста поверх них, а не внутри них. Однако есть еще кое-что, что нужно учитывать, — это баланс количества текста и размера изображения. Сара Гальярдо отметила: «Пользователи, которые используют инструменты масштабирования в качестве вспомогательной технологии, могут увеличивать размер текста до 200% или 300%, поэтому нам нужно фоновое изображение, которое может вместить этот текст, когда он увеличивается настолько».

### Сделайте кнопки легко видимыми, понятными и кликабельными

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

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

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

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

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

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

Энтони из UX Movement прекрасно резюмирует это в своей статье «Почему вашим ссылкам нужен эффект наведения»:

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

### Сохраняйте простой макет письма

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

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

Доступность стала проще

Создание доступных электронных писем в 2025 году не является необязательным — это требование. Узнайте о влиянии доступности на бренды от двух отраслевых экспертов.

## Распространенные ошибки в дизайне, которые допускают дизайнеры

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

### 1. Не пропускайте ключевые принципы доступного дизайна

Некоторые из наиболее распространенных ошибок в отношении доступности связаны с принципами, которые мы рассмотрели в предыдущем разделе, например, блокировка текста в изображениях.

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

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

**Как исправить**:

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

— Проверяйте свои дизайны с помощью инструмента тестирования доступности, такого как Litmus.

### 2. Избегайте работы в изоляции

Доступность email-писем — это командная работа между дизайном, разработкой и копирайтингом. Делитесь тем, что вы узнаете, объясняйте свои мотивы и работайте вместе, чтобы найти баланс между эстетикой и доступностью.

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

Помимо сотрудничества с различными специалистами по email, полезно работать с людьми с различными способностями.

Молли Берк, создатель контента, консультант и активист, поделилась своим советом брендам в подкасте What’s Trending:

«Я не могу достаточно подчеркнуть, что я представляю себя одной слепой женщиной — я не представляю все сообщество. Но я думаю, что мы должны быть вовлечены на каждом этапе. Это означает инклюзивный найм внутри компании, чтобы мы могли присутствовать во всех комнатах на каждом этапе».

**Как исправить**:

— Делитесь тем, что вы узнаете о доступности (и почему это важно) с вашей командой. Вы можете переслать им наше руководство по стандартам доступности кодирования и советы по написанию для доступности. Наше виртуальное мероприятие о том, почему бизнесы должны принять доступность email-писем, является еще одним отличным ресурсом.

— Запрашивайте отзывы подписчиков об их опыте работы с вашим контентом и собирайте выводы в отчет.

### 3. Прекратите делать предположения

Пол Эйри, консультант по дизайну и разработке email-писем и автор книги «Тип email», поделился: «Когда мы проектируем и разрабатываем электронные письма, мы склонны предполагать, что наши подписчики смогут их прочитать и взаимодействовать с ними, основываясь на том, можем ли мы их прочитать и взаимодействовать с ними. Мы судим о качестве опыта других людей по своему собственному. Правда в том, что каждый человек и то, как он воспринимает мир, отличается».

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

**Как исправить**:

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

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

— Проверьте, не пришло ли время для аудита доступности email-писем.

## Примеры доступных электронных писем для дизайнеров

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

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

### Litmus — сочетание цветов и символов

Цвета могут передавать настроение и брендинг, но они ненадежны сами по себе для передачи смысла. В недавнем письме о вебинаре по доступности (как уместно! Вы можете посмотреть запись здесь.) наши дизайнеры сочетали цвета и символы.

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

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

ASOS – персонализированный контент в заголовке

Помните, как мы упоминали, что использование живого текста лучше для доступности и персонализации? Вот яркий пример. ASOS использует данные о погоде для создания динамического заголовка — он либо сообщает, что идет дождь, либо что дождь собирается. Крупный, красочный текст также привлекает внимание.

### Bulk Powders – сильная визуальная иерархия

Bulk Powders использовали интерактивный опрос в своем письме, чтобы оценить планы своей аудитории на Лондонский марафон, с высоким контрастом, четкой организацией контента и описательными призывами к действию. Если вы планируете использовать несколько колонок в своем дизайне, убедитесь, что он адаптивен и подходит для различных размеров экрана.

Учитесь у лучших

## Инструментарий дизайнера для доступности email-писем

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

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

— Библиотека дизайнов email-писем Litmus позволяет создавать, хранить, управлять и совместно работать над доступными дизайнами email-писем, которые вы можете повторно использовать и дорабатывать. Создавайте фирменные цвета, шаблоны HTML-писем и модули кода, чтобы придерживаться своего обычного внешнего вида и ощущений, не жертвуя доступностью.

— Litmus Email Builder предоставляет членам команды место для удобного создания доступных электронных писем, будь то с помощью конструктора email-писем с перетаскиванием или конструктора HTML-писем.

— Проверки доступности Litmus Email Testing автоматически проверяют ваши дизайны по более чем 40 областям доступности и лучшим практикам. Кроме того, вы можете услышать, как ваше письмо звучит для программ чтения с экрана, и просмотреть дизайны с фильтрами цветовых дефицитов.

Начните вносить изменения сегодня

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