Адаптивные кнопки в шаблонах электронной почты

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

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

Вот стандартная HTML-кнопка и то, как она выглядит при просмотре письма на десктопе:

Код:

<table border="0" cellpadding="0" cellspacing="0" class="emailButton" style="border-radius:3px; background-color:#6DC6DD;">
  <tr>
    <td align="center" valign="middle" class="emailButtonContent" style="padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
      <a href="..." target="_blank" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; text-decoration:none;">Buy Now</a>
    </td>
  </tr>
</table>

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

<style type="text/css">
  @media only screen and (max-width: 480px){
    .emailButton{
      max-width:600px !important;
      width:100% !important;
    }

    .emailButton a{
      display:block !important;
      font-size:18px !important;
    }
  }
</style>

Код, приведенный выше, позволяет получить более удобную и читабельную кнопку на мобильных:

Такое решение пока считается оптимальным для кнопок в шаблонах электронной почты.

Сергей Ермилов