{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопки — это неотъемлемая часть успешных email-рассылок. В конечном итоге они являются ключевыми элементами для вовлечения получателей и побуждения их к действию. Но чтобы они всегда работали должным образом и отображались корректно, необходимо создать такие кнопки, которые будут универсальными, даже если изображения блокируются почтовыми клиентами.","type":"unstyled","key":"6bdga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":51,"style":"BOLD"},{"length":19,"offset":74,"style":"BOLD"}],"text":"Это руководство познакомит вас с основами создания неуязвимых кнопок (или bulletproof buttons), которые всегда работают, вне зависимости от того, включены ли изображения или нет. Мы рассмотрим разные способы их создания, их лучшие практики, а также как добиться того, чтобы они правильно отображались в различных почтовых клиентах.","type":"unstyled","key":"4kqr9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое неуязвимая кнопка?","type":"header-two","key":"c8v8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Неуязвимая кнопка — это кнопка, созданная с помощью чистого HTML и CSS, а не изображений. Это означает, что она будет работать в большинстве почтовых клиентов, даже если изображения отключены или заблокированы. Неуязвимые кнопки надежны, потому что они не зависят от внешних изображений, которые могут не загрузиться, и при этом они остаются доступными для всех пользователей, включая тех, кто использует скринридеры.","type":"unstyled","key":"8np6u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С помощью HTML и CSS вы можете создать кнопку с текстом, фоном, размерами и даже с эффектами при наведении, которые будут выглядеть одинаково в разных почтовых клиентах.","type":"unstyled","key":"ah79g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему нельзя использовать кнопки в виде изображений?","type":"header-two","key":"9r70k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя использование изображений для кнопок может показаться хорошей идеей с точки зрения дизайна, на практике это может привести к проблемам с их отображением. Вот несколько причин, почему использовать изображения для кнопок — не лучший выбор:","type":"unstyled","key":"4rr5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Блокировка изображений: Большинство почтовых клиентов, таких как Gmail и Outlook, блокируют изображения по умолчанию. Если изображение кнопки не загружается, кнопка не будет видна получателю, и весь призыв к действию потеряет свою эффективность.","type":"ordered-list-item","key":"4n3e0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Меньшая доступность: Изображения трудно адаптировать для пользователей, которые используют экранные читалки. Это означает, что кнопки на основе изображений могут быть недоступны для людей с нарушениями зрения.","type":"ordered-list-item","key":"4e4lr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Отсутствие гибкости: Если вам нужно изменить текст или цвет кнопки, вы должны заново создавать и загружать изображение. Это неудобно и добавляет лишнюю работу.","type":"ordered-list-item","key":"421re"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Неуязвимые кнопки, с другой стороны, решают все эти проблемы. Они всегда видны, даже если изображения отключены, они доступны для скринридеров и могут быть изменены без необходимости загружать новые файлы.","type":"unstyled","key":"7vij8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Лучшие практики дизайна кнопок","type":"header-two","key":"c0i4m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот несколько лучших практик для создания эффективных и красивых неуязвимых кнопок:","type":"unstyled","key":"8vc9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Размер кнопки: Кнопка должна быть достаточно большой, чтобы её было удобно нажимать, особенно на мобильных устройствах. Рекомендуется использовать кнопку размером не менее 44px x 44px для лучшей кликабельности.","type":"unordered-list-item","key":"cogqo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Контраст и цвет: Выбирайте яркие цвета, которые контрастируют с фоном, чтобы кнопка была заметной. Убедитесь, что она выделяется на фоне остального контента письма.","type":"unordered-list-item","key":"27t3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Текст кнопки: Текст на кнопке должен быть четким и ясным. Используйте короткие фразы, такие как «Купить сейчас», «Подробнее» или «Начать».","type":"unordered-list-item","key":"f249t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Отступы и пространство: Оставляйте достаточно пространства вокруг кнопки, чтобы она не «сливалась» с другими элементами письма. Это также улучшает восприятие и снижает вероятность случайных нажатий.","type":"unordered-list-item","key":"ddch4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Адаптивность: Убедитесь, что кнопка хорошо выглядит как на десктопах, так и на мобильных устройствах. Использование медиазапросов поможет сделать кнопку адаптивной.","type":"unordered-list-item","key":"5edma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Техники кодирования неуязвимых кнопок","type":"header-two","key":"bofat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существует несколько техник для создания неуязвимых кнопок, которые работают в различных почтовых клиентах:","type":"unstyled","key":"fohar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"1. Использование CSS с отступами (padding)","type":"header-three","key":"4o33m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый простой способ создать неуязвимую кнопку — это использовать HTML и CSS. Вы задаете кнопку с помощью тега (ссылка), и затем добавляете отступы с помощью CSS. Это гарантирует, что кнопка будет работать даже если изображения отключены.","type":"unstyled","key":"8nhrp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:","type":"unstyled","key":"10he"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Купить сейчас","type":"unstyled","key":"659k8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"2. Использование VML для Outlook","type":"header-three","key":"ejed1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для Outlook (особенно старых версий) потребуется использовать VML (Vector Markup Language) — язык разметки, поддерживаемый только этим почтовым клиентом. В этом случае кнопка рисуется прямо в письме, а не используется изображение.","type":"unstyled","key":"e0rtn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:","type":"unstyled","key":"cq56g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fbllk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fo0ph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"40l0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Купить сейчас","type":"unstyled","key":"4qksb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ctc5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4s145"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"3. Кнопка с использованием border","type":"header-three","key":"5ne25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно создать кнопку с прозрачным фоном и цветной рамкой, что также будет хорошо смотреться и в почтовых клиентах.","type":"unstyled","key":"bp04s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:","type":"unstyled","key":"2spfo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Купить сейчас","type":"unstyled","key":"aormc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"4. Комбинированный метод (padding + border)","type":"header-three","key":"b9bq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот метод комбинирует padding (внутренний отступ) и border (границу), что позволяет создавать более сложные и привлекательные кнопки.","type":"unstyled","key":"btg09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:","type":"unstyled","key":"luhk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Купить сейчас","type":"unstyled","key":"ehnim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поддержка почтовыми клиентами и адаптация к тёмному режиму","type":"header-two","key":"gpa8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все почтовые клиенты по‑разному обрабатывают email-рассылку. Важно протестировать кнопки в таких почтовых клиентах, как:","type":"unstyled","key":"biu0m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Gmail (включая мобильное приложение)","type":"unordered-list-item","key":"epioq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Outlook","type":"unordered-list-item","key":"c1b1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Apple Mail","type":"unordered-list-item","key":"2u0ej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Yahoo Mail","type":"unordered-list-item","key":"3mb4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Yahoo Mobile","type":"unordered-list-item","key":"6skec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кроме того, с учётом популярности тёмного режима важно удостовериться, что кнопки выглядят хорошо и на тёмном фоне. Например, цвета кнопок должны быть адаптированы для тёмного режима, чтобы кнопка оставалась читаемой.","type":"unstyled","key":"bmnqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как сделать неуязвимые кнопки с помощью Letteros.com","type":"header-two","key":"79rlv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":73,"style":"BOLD"}],"text":"Создание таких кнопок вручную требует некоторых технических знаний, но с конструктором писем Letteros.com процесс становится проще. Наш редактор позволяет создавать неуязвимые кнопки без необходимости писать код, гарантируя их корректную работу во всех почтовых клиентах.","type":"unstyled","key":"dr2fb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Просто выберите элемент «Кнопка», настройте текст, цвет и размер, и редактор автоматически сгенерирует код, который будет отображаться корректно в любых условиях.","type":"unstyled","key":"dmc17"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"126as"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Неуязвимые кнопки — это не просто тренд в email-маркетинге, а необходимость для обеспечения правильной работы ваших рассылок в различных почтовых клиентах. Они не зависят от изображений, обеспечивают доступность и кросс‑клиентскую совместимость, а также повышают конверсии.","type":"unstyled","key":"4gprg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":91,"style":"BOLD"}],"text":"Используя лучшие практики, такие как описанные выше методы кодирования, и инструменты, как конструктор писем Letteros.com, вы можете гарантировать, что ваши кнопки будут работать эффективно и выглядеть привлекательно на всех устройствах и почтовых клиентах.","type":"unstyled","key":"3mtt0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c9lgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"pBFxZrVLK7kN4iMFO7FB"}],"entityMap":{}},"mentions":[]}