Как минимум 1 из 3 человек отключает изображения в электронной почте. Многие не видят потрясающий дизайн ваших писем. Это делает вашу кнопку вызова действия (CTA) единственной возможностью получить конверсии. Но если ваша кнопка также сделана как изображение, то никто никогда не увидит её. Что, если бы вы могли защитить свои кампании по электронной почте от этого?
Что, если бы ваши кнопки вызова действия были…пуленепробиваемыми?

Что такое Пуленепробиваемые кнопки?

Пуленепробиваемая кнопка вызова действия (CTA) — это кнопка, которая отображается во всех почтовых ящиках. Поскольку она написана на HTML без изображений, кнопка вызова действия отображается, даже если получатель не видит/отключает изображения в почте. Люди решают, будут ли они удалять вашу электронную почту всего за 3 секунды, даже если они видят ваши графические изображения.

Вы можете задать логичный вопрос - почему люди оставляют изображения в электронной почте выключенными? Причины не
не показывать изображения по умолчанию (и почему вы должны использовать пуленепробиваемые кнопки)
это:
Практичность. - Изображения могут быть отключены (или просто не отображаться), когда электронная почта загружается с медленной скоростью - из-за слабого или нестабильного интернета.
Доступность. - Скринридер (программа, которая «читает» речевое содержимое страницы) не сможет увидеть текст в GIF или JPEG. Это сделает вашу электронную почту недоступной для подписчиков с ослабленным зрением или просто ленивых гиков, которым читать уже лень ;)
Конфиденциальность. Задайте этот вопрос в Google, и вы найдете множество статей, в которых людям советуют отключить автоматическую загрузку изображений, чтобы их нельзя было отследить.

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

4 способа сделать пуленепробиваемые кнопки в своих письмах

1. VML кнопки

VML кнопки используют HTML-таблицу для создания кнопки, используя отступы в ячейке таблицы для формирования структуры. HTML-атрибуты и CSS используются для стилизации кнопки.

Плюсы:

• Использует HTML, что делает её легче кодировать и обновлять

Минусы:

• Только текст внутри кнопки кликабельный, что может вызвать путаницу у пользователя

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
  <tr>
    <td>
      <div>
        <!--[if mso]>
          <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://www.mautibox.ru" style="height:40px;v-text-anchor:middle;width:130px;" arcsize="5%" strokecolor="#19cca3" fillcolor="#19cca3;width: 130;">
             <w:anchorlock/>
             <center style="color:#ffffff;font-family:Helvetica, sans-serif;font-size:18px; font-weight: 600;">Click here!</center>
           </v:roundrect>

        <![endif]-->
          <a href="https://www.mautibox.ru" style="display: inline-block; mso-hide:all; background-color: #19cca3; color: #FFFFFF; border:1px solid #19cca3; border-radius: 6px; line-height: 220%; width: 200px; font-family: Helvetica, sans-serif; font-size:18px; font-weight:600; text-align: center; text-decoration: none; -webkit-text-size-adjust:none;  " target="_blank">Click here!</a>
          </a>
        </div>
    </td>
  </tr>
</table>

2. Padded (мягкие) кнопки

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

Плюсы:

• Упрощенный код и высокая масштабируемость

Минусы:

• Outlook не любит эти кнопки (не распознает теги <a> как блокировые элементы), и будет уменьшать их

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
  <tr>
    <td align="center" bgcolor="#19cca3" role="presentation" style="border:none;border-radius:6px;cursor:auto;padding:11px 20px;background:#19cca3;" valign="middle">
      <a href="href="https://www.mautibox.ru" style="background:#19cca3;color:#ffffff;font-family:Helvetica, sans-serif;font-size:18px;font-weight:600;line-height:120%;Margin:0;text-decoration:none;text-transform:none;" target="_blank">
        Click here!
      </a>
    </td>
  </tr>
</table>

3. Комбинированные мягкие/окантовочные кнопки

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

Плюсы:

• Легко обновляется, и поддерживаются фоновые изображения

Минусы:

• Стилизация включена в теги <a> и <tr>, так что оба нужно обновлять при изменении стиля

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
  <tr>
    <td align="center" bgcolor="#19cca3" role="presentation" style="border:none;border-radius:6px;cursor:auto;padding:11px 20px;background:#19cca3;" valign="middle">
      <a href="href="https://www.mautibox.ru" style="background:#19cca3;color:#ffffff;font-family:Helvetica, sans-serif;font-size:18px;font-weight:600;line-height:120%;Margin:0;text-decoration:none;text-transform:none;" target="_blank">
        Click here!
      </a>
    </td>
  </tr>
</table>

Примеры дизайна электронной почты с (и без) пуленепробиваемыми CTA кнопками

ПЛОХО (MTS)

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

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

ЛУЧШЕ (RedFox)

Без изображений: Если ваш продукт — изображение, легко отмахнуться от важности пуленепробиваемых кнопок вызова действия.

• Четкие описания продуктов. Подробное описание продукта — текст, так что информация не теряется при отключенных изображениях в почте
• Пуленепробиваемая кнопка. Пуленепробиваемая CTA с отличным UX
  С изображениями:
  
  

ЛУЧШЕ ВСЕГО (Т)

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

• Отзывчивый дизайн. Эта электронная почта имеет пуленепробиваемые кнопки — и отзывчивый фон, а также. Вы даже не заметите отсутствия изображений.
• Доступный текст. Текст стилизован так, чтобы его было легко (и привлекательно) читать без включенных изображений.
  

Как MautiBox делает пуленепробиваемые СТА

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

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