#NoFailMail: 5 самых распространённых ошибок в дизайне email-рассылок (и как их избежать)

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

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

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

Переходим к ошибкам!

## Ошибка №1: Не адаптировать дизайн под разные размеры экранов.

Мир email больше не делится на десктоп и мобильные устройства. Ваши подписчики могут читать письма на всём — от «умного» телевизора на стене до смарт-часов на запястье.

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

Исследование Litmus и Fluid 2016 года показало, что 51% подписчиков отписываются от писем, которые плохо отображаются или не работают на их смартфонах, а 43% помечают такие письма как спам. Эти данные подтверждают, что адаптация под разные экраны больше не является желательной, а обязательной.

Быстрый взгляд на долю рынка почтовых клиентов показывает, насколько мобильные устройства доминируют. Четыре из десяти самых популярных почтовых клиентов работают только на мобильных устройствах, и на их долю приходится более 40% всех открытий писем:

— Apple iPhone — 29%

— Apple iPad — 10%

— Samsung Mail — 4%

— Google Android — 3%

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

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

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

**Используйте более крупный шрифт.** Звучит странно — крупный шрифт на маленьком экране? — но это работает. Цель — читаемость без необходимости увеличивать, уменьшать или прокручивать сообщение из стороны в сторону. Мы рекомендуем минимальный размер шрифта 14px для основного текста и 22px для заголовков.

**Создавайте CTA, удобные для касания.** Палец не так точен, как компьютерная мышь. Заменяйте кликабельные ссылки кнопками. Затем делайте эти кнопки размером не менее 44px × 44px — примерно размером с подушечку пальца.

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

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

Также старайтесь использовать более короткие предложения и блоки текста. Пять строк текста в стандартном десктопном формате могут легко превратиться в 10–15 на мобильном устройстве.

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

## Ошибка №2: Позволять синим ссылкам портить дизайн

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

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

К счастью, есть способы отключить эти синие ссылки. В почте iOS можно переопределить синие ссылки, стилизовав селектор детектора данных Apple Mail (узнайте как). Синие ссылки в Gmail можно исправить, обернув адреса или номера телефонов в тег и задав стиль для этого элемента, или переопределить все стили по умолчанию, добавив специфическое для Gmail объявление стиля в CSS (вот как).

## Ошибка №3: Проблемы с изображениями

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

**Использование неправильного формата изображения**

Решение здесь не в том, чтобы использовать «правильный» формат изображения, будь то JPEG, GIF, PNG или SVG, потому что универсального формата не существует. Каждый формат отличается от других размером файла, сжатием, качеством и лучшими сценариями использования. Подробное сравнение плюсов и минусов самых распространённых форматов изображений смотрите в статье «PNG, GIF или JPEG? Какой формат изображения лучше для email?» на блоге Litmus.

**Не оптимизировать для Retina-дисплеев**

«Retina-дисплей» — термин, придуманный Apple для обозначения дисплеев с высоким разрешением, которые используются на мобильных устройствах. Изображения, не оптимизированные для Retina-дисплеев, часто выглядят размытыми или нечёткими, что приводит к некачественному визуальному восприятию.

Чтобы подготовить изображения для Retina, создавайте их примерно в два раза больше планируемого размера отображения, а затем задавайте нужный размер в HTML. Если вы хотите отобразить изображение размером 300×200 пикселей, создайте его размером 600×400 и задайте размер 300×200 с помощью атрибутов HTML или свойств CSS.

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

## Ошибка №4: Не адаптировать дизайн для отключённых изображений

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

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

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

**Используйте базовый или стилизованный ALT-текст.**

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

Хорошая практика написания ALT-текста — создавать эффективное описание, а не просто метку изображения. Чтобы пойти дальше, попробуйте стилизованный ALT-текст. Здесь вы добавляете немного встроенного CSS, чтобы изменить шрифт, цвет, размер, стиль и насыщенность ALT-текста.

**Используйте неуязвимые кнопки**

Если вы размещаете призыв к действию внутри изображения, он будет невидимым при отключённых изображениях. Неуязвимая кнопка использует HTML и CSS вместо форматов изображений, таких как JPG и GIF. Они не зависят от рендеринга изображений, чтобы появиться в письме.

А вот то же письмо с включёнными изображениями:

Джейсон Родригес, евангелист сообщества и продукта Litmus, описывает четыре основных подхода к дизайну кнопок в своём руководстве «Полное руководство по неуязвимым кнопкам для дизайна email». Ознакомьтесь с ним, чтобы увидеть код, примеры и плюсы и минусы каждого подхода.

## Ошибка №5: Не оптимизировать для текстовой версии email

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

Эти советы помогут вам создать убедительное текстовое письмо, будь то отдельное сообщение или текстовая версия многокомпонентного MIME-сообщения:

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

**Разбивайте длинные блоки текста.** Используйте больше, но более короткие блоки текста, чтобы избежать ужасного и нечитаемого «серого потока».

**Создавайте иерархию информации с помощью списков.** Весь текст в текстовом письме имеет один и тот же шрифт и размер. Поэтому вам нужно больше работать, чтобы направить читателя к ключевым моментам. Используйте списки для выделения информации в серии. Выделяйте каждый пункт текстовыми символами, такими как тире (–) или звёздочка (*). (Маркеры не работают в простом тексте.)

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

**Определяйте CTA.** Что делали люди до появления кнопок CTA? Они использовали привлекающие внимание элементы, такие как пустое пространство, чтобы отделить их от остального текста, и типографические элементы, такие как стрелки (>> и <<), чтобы выделить их. Избегайте длинных списков CTA и окружайте их пустым пространством, чтобы сделать их удобными для клика или касания. Этот пример письма иллюстрирует все перечисленные лучшие практики для текстовых писем: ### Мы рассмотрели больше способов отправки писем без ошибок в этих предыдущих постах блога: Дополнительные советы и ресурсы для #NoFailMail - #NoFailMail: Почему избегание ошибок — ключ к успеху email-рассылок - Как тестирование помогает избежать 5 самых больших ошибок в email - 5 ошибок копирайтинга, которых следует избегать Хотите больше подобных ресурсов? Подпишитесь на нашу рассылку, чтобы быть в курсе последних новостей в мире email.