Как сверстать кнопку в письме

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

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

Краткое содержание статьи, как сверстать кнопку:

• Кнопки в виде картинок
• Campaign Monitor
• MailChimp
• eSputnik

1. Кнопки в виде картинок

Если вы не хотите мучиться с вёрсткой или дизайн вашего письма требует уникальных кнопок со спец. эффектами, такими как: тени, свечения, анимация, градиенты или нестандартные шрифты — вы всегда сможете использовать кнопку нарисованную в графическом редакторе. Такая кнопка будет выглядеть 100% одинаково везде, но есть вероятность, что некоторые почтовые клиенты сразу ее не загрузят. Тот же Outlook по-умолчанию блокирует загрузку картинок.

Не забывайте использовать ALT-текст для кнопок-картинок. Дублируйте в нем название вашей кнопки, а так же применяйте стили для оформления ALT-текста.

2. Campaign Monitor

Компания разработала инструмент для создания кнопок на основе VML. Язык VML используется для корректного отображения кнопки в MS Outlook.

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

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

Пример кода для тестирования:

      Купити
  

Откровенно говоря, слишком много кода получается. В Outlook такая кнопка хорошо смотрится, но она не универсальная из-за фиксированных размеров. Получается, её нужно постоянно генерировать заново, изменяя размеры в зависимости от длины названия.

3. MailChimp

Компания предлагает использовать кнопки на основе таблицы. Образец кнопки вы можете найти на странице Buttons. 

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

Пример кода для тестирования

  

    

      Read More Stories On Our Blog
    
  

Кликнуть по такой кнопке получится только если точно попасть по ее названию. Так же получилось довольно много кода, а значит - это увеличит размера письма.

4. eSputnik

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

Мы не задаем фиксированных размеров кнопкам, поэтому наши кнопки увеличиваются в размерах вместе с увеличением размеров шрифта текста и его длины.

«Объем» кнопки, или иными словами отступы вокруг текста, задается в виде толщины границ ссылки. Этот прием позволяет кнопке остаться объемной в Outlook и не превратиться в ссылку с цветным фоном. Однако Outlook не поддерживает css-свойство border-radius (и др.), поэтому закругленная кнопка в Outlook будет с острыми углами.

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

А это HTML верстка самой кнопки:

Пример кода для тестирования:

ПОКУПКИ ONLINE  

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

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

Создание кнопки, как и всего письма не займёт много времени. В редакторе вы сможете задать настройки кнопки:

• отступы,
• обводку,
• выравнивание,
• адрес ссылки,
• расположение в письме,
• адаптивность,
• цветовую гамму.

Вот и всё! Останется только дополнить вашу кнопку красивым призывом к действию.

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

До новой встречи!:)

P.S.: Настройте дополнительный канал коммуникации для рассылок — Viber — кнопки здесь делаются так же просто.)