Небольшой материал с основными правилами, которые мы учитываем при верстке писем для различных 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>
и задаем стили, чтобы почтовики свои стили не использовали.
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">
Comments
НЛО прилетело и оставила комментарий