10 апреля 2015
33913
10 мин
4.02
Как сверстать кнопку в письме
Кнопка в письме — один из важных элементов email-рассылки, который украшает письмо и помогает сделать письмо более эффективным. Без призыва к действию уже трудно представить проморассылки и транзакционные письма — они просто необходимы, чтобы захватить внимание клиентов и побудить их купить/почитать/перейти на сайт и т.д.
Для продвинутых пользователей, наверное, проще сверстать кнопку с нуля, чем брать уже готовую и заморачиваться над изменениями. Мы разобрали популярные практики, как можно сделать кнопку СТА разными способами.
Краткое содержание статьи, как сверстать кнопку:
1. Кнопки в виде картинок
Если вы не хотите мучиться с вёрсткой или дизайн вашего письма требует уникальных кнопок со спец. эффектами, такими как: тени, свечения, анимация, градиенты или нестандартные шрифты — вы всегда сможете использовать кнопку нарисованную в графическом редакторе. Такая кнопка будет выглядеть 100% одинаково везде, но есть вероятность, что некоторые почтовые клиенты сразу ее не загрузят. Тот же Outlook по-умолчанию блокирует загрузку картинок.
Не забывайте использовать ALT-текст для кнопок-картинок. Дублируйте в нем название вашей кнопки, а так же применяйте стили для оформления ALT-текста.
2. Campaign Monitor
Компания разработала инструмент для создания кнопок на основе VML. Язык VML используется для корректного отображения кнопки в MS Outlook.
Создать такую кнопку можно легко по ссылке buttons.cm, вам нужно будет лишь указать исходные параметры и вам автоматически сгенерится код для использования.
В зависимости от редактора, где вы планируете добавить кнопку, возможно, придётся её немного дорабатывать.
Пример кода для тестирования:
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://company.com" style="height:35px;v-text-anchor:middle;width:120px;" arcsize="12%" stroke="f" fillcolor="#28b422">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://company.com"
style="background-color:#28b422;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:35px;text-align:center;text-decoration:none;width:120px;-webkit-text-size-adjust:none;">Купити</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
Откровенно говоря, слишком много кода получается. В Outlook такая кнопка хорошо смотрится, но она не универсальная из-за фиксированных размеров. Получается, её нужно постоянно генерировать заново, изменяя размеры в зависимости от длины названия.
3. MailChimp
Компания предлагает использовать кнопки на основе таблицы. Образец кнопки вы можете найти на странице Buttons.
Также компания рекомендует использовать адаптивные кнопки, в таком случае ширина призыва к действию будет зависеть от объема текста внутри ячейки таблицы.
Пример кода для тестирования
<table border="0" cellpadding="0" cellspacing="0" style="background-color:#28b422; border-radius:4px;">
<tr>
<td align="center" valign="middle" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:30px;">
<a href="http://company.com" target="_blank" style="color:#FFFFFF; text-decoration:none;">Read More Stories On Our Blog</a>
</td>
</tr>
</table>
Кликнуть по такой кнопке получится только если точно попасть по ее названию. Так же получилось довольно много кода, а значит - это увеличит размера письма.
4. eSputnik
Мы верстаем наши кнопки используя в качестве основного элемента — ссылку, которая обернута в span элемент для создания эффектов границы вокруг кнопки или отбрасывания тени.
Мы не задаем фиксированных размеров кнопкам, поэтому наши кнопки увеличиваются в размерах вместе с увеличением размеров шрифта текста и его длины.
Делайте красивые письма!
«Объем» кнопки, или иными словами отступы вокруг текста, задается в виде толщины границ ссылки. Этот прием позволяет кнопке остаться объемной в Outlook и не превратиться в ссылку с цветным фоном. Однако Outlook не поддерживает css-свойство border-radius (и др.), поэтому закругленная кнопка в Outlook будет с острыми углами.
Вот так выглядят CSS-классы со стилями наших кнопок. Вы можете экспериментировать с этими стилями, чтобы добиться желаемого результата.
А это HTML верстка самой кнопки:
Пример кода для тестирования:
<td align="center" class="esd-block-button es-p10" style="" bgcolor="transparent">
<span class="es-button-border" style="border-width: 4px; background: rgb(40, 180, 34);">
<a href="http://company.com" class="es-button" target="_blank"
style="background: rgb(40, 180, 34); border-color: rgb(40, 180, 34);">ПОКУПКИ ONLINE</a> </span> </td>
При создании письма выбираете блок кнопку и добавляете её в письмо.Кроме того, в нашей системе есть готовые наборы кнопок, которые можно добавлять лёгким движением руки.
Перед вами откроются все настройки кнопки, которые можно задать в несколько кликов даже без знаний вёрстки. В том числе, адаптивность кнопки и расположение в письме.
Создание кнопки, как и всего письма не займёт много времени. В редакторе вы сможете задать настройки кнопки:
- отступы,
- обводку,
- выравнивание,
- адрес ссылки,
- расположение в письме,
- адаптивность,
- цветовую гамму.
Вот и всё! Останется только дополнить вашу кнопку красивым призывом к действию.
Кстати, всем нашим новым пользователям (для комфортного пользования нашей системой и быстрого старта) мы дарим первый бесплатный шаблон в стиле сайта клиента. В шаблоне так же создаем стили для главной и второстепенной кнопки вашей будущей рассылки.
До новой встречи!:)
P.S.: Настройте дополнительный канал коммуникации для рассылок — Viber — кнопки здесь делаются так же просто.)
Эдуард Шворак 4 года назад