Полное руководство по созданию надежных кнопок в email-рассылках
Кнопки — это неотъемлемая часть успешных email-рассылок. В конечном итоге они являются ключевыми элементами для вовлечения получателей и побуждения их к действию. Но чтобы они всегда работали должным образом и отображались корректно, необходимо создать такие кнопки, которые будут универсальными, даже если изображения блокируются почтовыми клиентами.
Это руководство познакомит вас с основами создания неуязвимых кнопок (или bulletproof buttons), которые всегда работают, вне зависимости от того, включены ли изображения или нет. Мы рассмотрим разные способы их создания, их лучшие практики, а также как добиться того, чтобы они правильно отображались в различных почтовых клиентах.
Что такое неуязвимая кнопка?
Неуязвимая кнопка — это кнопка, созданная с помощью чистого HTML и CSS, а не изображений. Это означает, что она будет работать в большинстве почтовых клиентов, даже если изображения отключены или заблокированы. Неуязвимые кнопки надежны, потому что они не зависят от внешних изображений, которые могут не загрузиться, и при этом они остаются доступными для всех пользователей, включая тех, кто использует скринридеры.
С помощью HTML и CSS вы можете создать кнопку с текстом, фоном, размерами и даже с эффектами при наведении, которые будут выглядеть одинаково в разных почтовых клиентах.
Почему нельзя использовать кнопки в виде изображений?
Хотя использование изображений для кнопок может показаться хорошей идеей с точки зрения дизайна, на практике это может привести к проблемам с их отображением. Вот несколько причин, почему использовать изображения для кнопок — не лучший выбор:
- Блокировка изображений: Большинство почтовых клиентов, таких как Gmail и Outlook, блокируют изображения по умолчанию. Если изображение кнопки не загружается, кнопка не будет видна получателю, и весь призыв к действию потеряет свою эффективность.
- Меньшая доступность: Изображения трудно адаптировать для пользователей, которые используют экранные читалки. Это означает, что кнопки на основе изображений могут быть недоступны для людей с нарушениями зрения.
- Отсутствие гибкости: Если вам нужно изменить текст или цвет кнопки, вы должны заново создавать и загружать изображение. Это неудобно и добавляет лишнюю работу.
Неуязвимые кнопки, с другой стороны, решают все эти проблемы. Они всегда видны, даже если изображения отключены, они доступны для скринридеров и могут быть изменены без необходимости загружать новые файлы.
Лучшие практики дизайна кнопок
Вот несколько лучших практик для создания эффективных и красивых неуязвимых кнопок:
- Размер кнопки: Кнопка должна быть достаточно большой, чтобы её было удобно нажимать, особенно на мобильных устройствах. Рекомендуется использовать кнопку размером не менее 44px x 44px для лучшей кликабельности.
- Контраст и цвет: Выбирайте яркие цвета, которые контрастируют с фоном, чтобы кнопка была заметной. Убедитесь, что она выделяется на фоне остального контента письма.
- Текст кнопки: Текст на кнопке должен быть четким и ясным. Используйте короткие фразы, такие как «Купить сейчас», «Подробнее» или «Начать».
- Отступы и пространство: Оставляйте достаточно пространства вокруг кнопки, чтобы она не «сливалась» с другими элементами письма. Это также улучшает восприятие и снижает вероятность случайных нажатий.
- Адаптивность: Убедитесь, что кнопка хорошо выглядит как на десктопах, так и на мобильных устройствах. Использование медиазапросов поможет сделать кнопку адаптивной.
Техники кодирования неуязвимых кнопок
Существует несколько техник для создания неуязвимых кнопок, которые работают в различных почтовых клиентах:
1. Использование CSS с отступами (padding)
Самый простой способ создать неуязвимую кнопку — это использовать HTML и CSS. Вы задаете кнопку с помощью тега <a> (ссылка), и затем добавляете отступы с помощью CSS. Это гарантирует, что кнопка будет работать даже если изображения отключены.
Пример:
<a href=»https://example.com» style=»display: inline-block; background-color: #4CAF50; color: white; padding: 15px 25px; text-align: center; text-decoration: none; border-radius: 5px;»>Купить сейчас</a>
2. Использование VML для Outlook
Для Outlook (особенно старых версий) потребуется использовать VML (Vector Markup Language) — язык разметки, поддерживаемый только этим почтовым клиентом. В этом случае кнопка рисуется прямо в письме, а не используется изображение.
Пример:
<!—[if mso]>
<v:roundrect xmlns:v=»urn:schemas-microsoft-com:vml» xmlns:w=»urn:schemas-microsoft-com:office:word» href=»https://example.com» style=»width:200px; height:50px; padding: 10px;» arcsize=»10%» fillcolor=»#4CAF50″>
<w:anchorlock/>
<center style=»color:#ffffff; font-size:18px; font-family:Arial, sans-serif;»>Купить сейчас</center>
</v:roundrect>
<![endif]—>
3. Кнопка с использованием border
Можно создать кнопку с прозрачным фоном и цветной рамкой, что также будет хорошо смотреться и в почтовых клиентах.
Пример:
<a href=»https://example.com» style=»display: inline-block; border: 2px solid #4CAF50; color: #4CAF50; padding: 12px 20px; text-align: center; text-decoration: none; border-radius: 5px;»>Купить сейчас</a>
4. Комбинированный метод (padding + border)
Этот метод комбинирует padding (внутренний отступ) и border (границу), что позволяет создавать более сложные и привлекательные кнопки.
Пример:
<a href=»https://example.com» style=»display: inline-block; background-color: #4CAF50; color: white; padding: 15px 25px; text-align: center; text-decoration: none; border: 2px solid #4CAF50; border-radius: 5px;»>Купить сейчас</a>
Поддержка почтовыми клиентами и адаптация к тёмному режиму
Все почтовые клиенты по‑разному обрабатывают email-рассылку. Важно протестировать кнопки в таких почтовых клиентах, как:
- Gmail (включая мобильное приложение)
- Outlook
- Apple Mail
- Yahoo Mail
- Yahoo Mobile
Кроме того, с учётом популярности тёмного режима важно удостовериться, что кнопки выглядят хорошо и на тёмном фоне. Например, цвета кнопок должны быть адаптированы для тёмного режима, чтобы кнопка оставалась читаемой.
Как сделать неуязвимые кнопки с помощью Letteros.com
Создание таких кнопок вручную требует некоторых технических знаний, но с конструктором писем Letteros.com процесс становится проще. Наш редактор позволяет создавать неуязвимые кнопки без необходимости писать код, гарантируя их корректную работу во всех почтовых клиентах.
Просто выберите элемент «Кнопка», настройте текст, цвет и размер, и редактор автоматически сгенерирует код, который будет отображаться корректно в любых условиях.
Заключение
Неуязвимые кнопки — это не просто тренд в email-маркетинге, а необходимость для обеспечения правильной работы ваших рассылок в различных почтовых клиентах. Они не зависят от изображений, обеспечивают доступность и кросс‑клиентскую совместимость, а также повышают конверсии.
Используя лучшие практики, такие как описанные выше методы кодирования, и инструменты, как конструктор писем Letteros.com, вы можете гарантировать, что ваши кнопки будут работать эффективно и выглядеть привлекательно на всех устройствах и почтовых клиентах.
Источник:
https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design