Основные правила верстки Email писем для почтовых рассылок

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

1. Используем табличный подход к вёрстке.

2. Избегаем сокращений CSS и используем полный код:

padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px

3. Используем полный HEX для цветов — #bb0000.

4. Не используем сокращённые варианты записи шрифта типа font: 12px arial;.

5. Используем вложенные таблицы без использования colspan и rowspan.

6. Атрибуты cellpadding и cellspacing ставим в 0.

7. Для атрибута border у таблиц table используем только 0.

8. Для line-height используем только пиксели.

9. Используем тег <br> для вставки разрывов между блоками текста вручную.

10. Используем текст предварительного заголовка (прехедера), который выводится рядом с заголовком (темой) письма:

<div style="font-size: 0px; font-color: #ffffff; opacity: 0; visibility: hidden; width: 0; height: 0; display: none;">текст прехедера</div>

11. Используем кодировку UTF-8:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

13. Желательно background и bgcolor использовать только для тега table.

14. Электронную почту и телефон оборачиваем сами в ссылку <a href=" ... ">...</a> и задаем стили, чтобы почтовики свои стили не использовали.

Важно! Не используем JavaScript, Flash, , SVG.

15. Для решения проблемы с автомасштабированием писем в iOS 10 и iOS используем (не даёт устройствам на iOS изменять контент письма для удобства чтения):

<meta name="x-apple-disable-message-reformatting">

или CSS:

-webkit-text-size-adjust:none; -ms-text-size-adjust: none;

16. Используем стандартные шрифты, типа Arial, Verdana, Tahoma, Times New Roman.

17. Не используйте относительные ссылки (/path) и ссылки без протокола (//site.ru/path), ссылки должны содержать протокол и имя хоста (https://site.ru/path), так как в них протоколом по умолчанию может быть file://.

18. Отказываемся от http:// в пользу httрs://.

19. Не используем внешние сокращатели ссылок типа vk.cc, bit.ly и подобные.

20. Указываем у ссылок атрибут target="_blank", чтобы ссылка всегда открывалась в новом окне или вкладке. Поведение на разных ОС и сервисы которыми открываются ссылки могут быть разными и непредсказуемыми.

21. Прописываем атрибут title у всех ссылок.

22. Сокращаем длину кода, чтобы размер не превышал 102 КБ и 100 КБ, т.к., например, веб-интерфейсы Gmail и Yahoo обрезают письмо.

23. Используем одну колонку.

24. Колонка желательно должна быть не шире 500–600 пикселей, иногда делают до 700 пикселей.

25. Область кнопок и ссылок — 44 x 44 пикселя.

26. минимальный отображаемый на iPhone шрифт — 13 пикселей.

27. Используем display: none; для скрытия необязательных элементов.

28. Для мобильных используем отдельные медиа-запросы (media queries), они сейчас вполне поддерживаются:

<style type="text/css">
    @media only screen and (max-device-width: 480px) {
        /* сюда пишутся стили для мобильных платформ */
    }
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { … }
    /* сюда пишется CSS для десктопа */
</style>

Используем больше запросов в случае необходимости:

@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... }

29. ширина дисплея предыдущих моделей iPhone 480px (портретный режим)

30. Вариант для двух колонок может быть таким:

<table width="640" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
    <table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
      <tr>
        <td><p>Column Left Content</p></td>
      </tr>
    </table>
    <table width="320" border="0" cellspacing="0" cellpadding="20" align="right">
      <tr>
        <td><p>Column Right Content</p></td>
      </tr>
    </table>
    </td>
  </tr>
</table>

Добавляем медиа запрос для мобильных с классом:

<style type="text/css">
    @media only screen and (max-device-width: 480px) {
        table[class=contenttable] { 
            width:320px !important;
        }
    }
</style>
<table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable">

31. На мобильных устройствах скрываем под кат элементы — «progressive disclosure» (рус. — «прогрессивное раскрытие»). Примерное использование ниже:

<td>
   <h4><a href="http://yourdomain.com" class="link">First heading</a></h4>
   <a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>
   <div class="article">
      <p class="bodytext">
         <img src="kitten.jpg" style="float: left;" >Pellentesque habitant morbi...
      </p>
      <a href="http://yourdomain.com">Read more...</a> 
   </div>
</td>

Стили:

a[class="mobileshow"], a[class="mobilehide"] {
    display: none !important;
}

@media only screen and (max-device-width: 480px) { 
    a[class="mobileshow"], a[class="mobilehide"] { 
        display: block !important; 
        color: #fff !important; 
        background-color: #aaa; 
        border-radius: 20px; 
        padding: 0 8px; 
        text-decoration: none; 
        font-weight: bold; 
        font-family: "Helvetica Neue", Helvetica, sans-serif; 
        font-size: 11px; 
        position: absolute; 
        top: 25px; 
        right: 10px; 
        text-align: center; 
        width: 40px;
    }
    div[class="article"] {
        display: none;
    }
    a.mobileshow:hover { 
        visibility: hidden;
    } 
    .mobileshow:hover + .article, .article:hover {
        display: inline !important;
    }
}

32. Фоновые изображения нужно по возможности избегать.

33. Изображения лучше всего использовать разные под разную ширину устройств, или использовать такой вариант.

CSS:

@media only screen and (max-device-width: 480px) {
    td[class="headercell"] {
        background-image: url(images/header-325.png);
        width: 325px !important;
        height: 115px !important;
    }
    td[class="headercell"] img { 
        display: none; 
    }
}

HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="headercell">
        <img src="images/header.png" border="0" width="600" />
    </td>
   </tr>
</table>

34. Под Retina-дисплеи мы используем изображения, которые изначально в два раза больше, чем отображаемые. Как пример, при размере изображения 650 на 230 пикселей мы используем:

@media only screen and (max-device-width: 480px) {
    td[class="headercell"] {
        background-image: url(images/header-650@2x.png) !important;
        background-size: 325px 115px;
        width: 325px !important;
        height: 115px !important;
        }
    td[class="headercell"] img { 
        display: none; 
        }
    }
}

35. Для Retina можно использовать с большой осторожностью:

@media all and (min-device-pixel-ratio : 1.5) { … }

36. Используем метатег viewport, чтобы не было неконтролируемого зума.

<meta name = "viewport" content = "width = device-width, user-scalable = no" />

37. Разрыв строки желательно делать через 60–65 символов текста.

38. Для писем используем свой DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

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