Как преодолеть страх и сделать хорошие кнопки для html-писем?

27-04-2017    Метки: , , ,

Как преодолеть страх и сделать хорошие кнопки для html-писем?

Мы решили сделать небольшой обзор кнопок, которые встречаются в html-письмах почтовых рассылок. Несмотря на обилие вариантов, все они сводятся к попытке сделать письма максимально одинаковыми в разных почтовых клиентах.

Наиболее архаично использование изображений. Выглядит это примерно так:

// image

<table border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td height="46px" align="center">
                <a href="##" style="color:#00A2E8 !important; text-decoration:none;"м
                    <img style="display:block; border:none;" src="button.jpg" width="148px" height="46px" alt="жми скорее!!!">
                </a>
            </td>
        </tr>
    </tbody>
</table>


жми скорее!!!

Метод с кучей недостатков. Если необходимо изменить размер, цвет или шрифт кнопки, придется гонять дизайнера и переделывать изображение. Еще надо помнить об экранах с высокой плотностью пикселей. А если картинка где-то потерялась или у получателя отключена загрузка внешнего содержимого, что часто происходит, результат может быть таким или даже хуже:


жми скорее!!!

По этой причине в рассылках кнопки картинками теперь встречаются нечасто. В основном приходят письма с кнопками в виде ячеек таблиц.

В наших следующих примерах присутствует небольшой конфликт со стилями блога, поэтому не работает выравнивание по высоте. Умоляем всячески нас простить. 🙂

// table

<table border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td height="46px" bgcolor="#00A2E8" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:1.2em; vertical-align:middle; border:2px solid #00A2E8; padding:0 60px;">
                <a href="##" style="color:#ffffff !important; text-decoration:none;">
                   Жми скорее!!!
                </a>
            </td>
        </tr>
    </tbody>
</table>


Жми скорее!!!

Тут заметен серьезный недостаток метода. Дело в том, что кликабельной оказывается лишь та часть «пространства» кнопки, в которой непосредственно находится строка ссылки.


Жми скорее!!!

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

Некоторые хитрят, чтобы как-то увеличить кликабельную площадь объекта, используя дополнительные символы.

// table with spaces

<table border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td height="46px" bgcolor="#00A2E8" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:16px;  line-height:1.2em; vertical-align:middle; border:2px solid #00A2E8;">
                <a href="##" style="color:#ffffff !important; text-decoration:none;">
                   _______Жми скорее!!!_______
                </a>
            </td>
        </tr>
    </tbody>
</table>


_______Жми скорее!!!_______

Теперь, если «замазать» пробелы в цвет фона, площадь для клика существенно увеличится.


_______Жми скорее!!!_______

Весь этот «костыль» начинает хромать, когда таким методом пытаются сделать очень большие кнопки. На маленьких экранах верстка письма может разъехаться, например вот так:


_______________________________________________Жми скорее!!!_______________________________________________

Мы в yorb.ru являемся сторонниками плавного сокращения возможностей в email-маркетинге и считаем, что письма должны создаваться в первую очередь для современных почтовых клиентов, обеспечивая при этом достаточный уровень взаимодействия с устаревшими.

Вот такой вариант еще сто лет назад был предложен Campaing Monitor. Мы приводим его в качестве примера inline-block верстки кнопок.

// campaing monitor

<div>
 <!--[if mso]>
 <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="##" style="height:46px;v-text-anchor:middle;width:228px;" arcsize="5%" strokecolor="#00A2E8" fillcolor="#00A2E8">
   <w:anchorlock/>
   <center style="color:#ffffff;font-family:sans-serif;font-size:16px;">Жми скорее!!!</center>
 </v:roundrect>
<![endif]--><a href="##" style="background-color:#00A2E8;border:1px solid #00A2E8;border-radius:2px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:46px;text-align:center;text-decoration:none;width:228px;-webkit-text-size-adjust:none;mso-hide:all;">Жми скорее!!!</a>
</div>

И не забывайте про медиа-запросы! Например, Litmus в своих шаблонах предлагает адаптивные кнопки, которые будут выглядеть по разному на экранах с шириной до 525px и больше. Пример кода:

// litmus

<style type="text/css">
  @media screen and (max-width: 525px) {
     .mobile-button-container {
         margin: 0 auto;
         width: 100% !important;
     }           
     .mobile-button {
         padding: 15px !important;
         border: 0 !important;
         font-size: 16px !important;
         display: block !important;
     }
  }
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="left" style="padding-top: 25px;">
            <table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
                <tr>
                    <td align="center" style="border-radius: 2px;" bgcolor="#00A2E8">
                        <a href="##" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 2px; padding: 13px 60px; border: 2px solid #00A2E8; display: inline-block;" class="mobile-button">
                            Жми скорее!!!
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

В заключение хочется сказать, что как ты лодку не называй, главное — это как она поплывет. Неважно насколько красивые кнопки вы вставляете в письма. Имеет значение как они работают. Экспериментируйте, улучшайте код и получайте рост ctr.

fin