Верстка html-писем. Полезные советы

Форма поиска

Coding-Html-128Большинству тех, кто занимается email-маркетингом, в том числе и новичкам, так или иначе приходится вникать в кухню html-верстки.

Мы часто используем готовые html-шаблоны, но несмотря на свою предполагаемую универсальность, всегда надо уметь правильно вставлять и подгонять картинки, вставлять их в рамочки, менять стили заголовков, фон, шрифт, размер. И уже начиная с этих базовых знаний о CSS(атрибуты стиля), мы начинаем копать глубже и начинаем понимать из чего на самом деле состоит html-верстка.

Даже если вы не профессионал, не web-девелопер и не web-дизайнер и используете чужие шаблоны, вам все равно придется их адаптировать под свои нужды, а это значит — копаться в уже созданном коде.

Не все html-шаблоны, которое вы встретите на просторах интернета будут учитывать все особенности и универсально хорошо отображаться во всех почтовых ящиках и email-клиентах. Мы собрали для вас несколько рекомендаций для html-верстки писем, которые вам надо будет иметь в виду и, по необходимости, добавлять. Будьте готовы к экспериментам!

 

Но для начала, небольшое отступление.

На то, как будет видеть шаблон ваш подписчик, влияет в первую очередь устройство, с которого он его читает — это ПК или мобильное устройство. Если это ПК — то почтовый клиент (десктопное приложение) или веб-почта (вход в почту через веб-браузер). Если это смартфон или планшет, то и тут может быть родной почтовый клиент, другой почтовый клиент или отдельное приложение от любимого email-провайдера (например Gmail App или приложение Yandex.Mail).

И теперь все эти факторы помножьте на существующее количество почтовых провайдеров, почтовых клиентов, девайсов и приложений. В общем вы поняли,html-верстка — то еще развлечение.

Сегодня мы рассмотрим html-верстку писем для ПК. Он пока все-таки еще преобладает. Адаптивная верстка писем для мобильных устройств — отдельная тема, требует отдельного поста.

 

mobile-vs-deskop-mailru-980-520

 

Начнем с главного.

Структура

Верстку html-писем рекомендуется осуществлять на табличной основе. Если для web-разработки этот прием устарел, то для email он оптимален именно из-за этого самого разнообразия девайсов, почтовых клиентов и email-провайдеров, где каждый — со своими фишками и настройками.

Нечто похожее, кстати, было с браузерами лет 10 назад, когда они вели яростную войну за долю рынка и не желали сотрудничать друг с другом. Приходилось из кожи вон лезть, чтобы сайт одинаково хорошо выглядел и в Интерент-Эксплорере, и в Опере. Благодаря Web Standards Project и совместным усилиям программистов, удалось создать и внедрить универсальные стандарты. Будет ли у email-писем такая же судьба?

Не отходя от кассы — что такое табличная структура:

 

<table width=«100%» border=«0» cellspacing=«0» cellpadding=«0»>
<tr>
<td align=«center» bgcolor=«#ffffff»>
<table width=«600» border=«0» cellspacing=«0» cellpadding=«0»>
<tr>
<td align=«center»>
<p>Первая строка</p>
<p>Второя строка</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

 

Блочная структура, популярная в web-верстке использует тэг <div>.

 

Размер шаблона

Ширина письма не должна превышать 680px. Иногда вполне уместно использовать и 700px, но не более. И тут дело не только в современной эстетике.

Уже доказано на многочисленных экспериментах, что для быстрого, поверхностного чтения (а именно так и читают/просматривают свою почту читатели), оптимальный размер горизонтальной строки — это около 65-75 символов. Если учесть пробелы, пунктуацию, отступы и стандартный шрифт в 14px, то это как раз 600-680 пикселей.

 

Поля и отступы

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

Сначала обнулить

Одно из основных правил табличной верстки — это добавление свойств, которые обнуляют лишние отступы и рамки, добавляемые очень многими почтовыми клиентами и провайдерами web-почты (Gmail, Yandex, Outlook и т.д.).

 

<table width=«100%» border=«0» cellspacing=«0» cellpadding=«0» style=«margin:0; padding:0»>

 

Эти свойства (border, cellpadding, cellspacing, margin) должны вставляться под каждым тэгом <table>.

А потом добавить

В 2013, Outlook.com (бывший Hotmail) стал вырезать внешние отступы, или поля — margin — из кода емэйлов. Поэтому, для того чтобы горизонтальные отступы отображались корректно, необходимо прибегнуть к внутренним отступам — padding. С другой стороны, тот же Outlook, только уже почтовый клиент не поддерживает padding, когда он прописан inline (подробнее об этом ниже). Т. е. когда данное свойство прописано непосредственно в тэге <p>. Поэтому, чтобы уравновесить отступы, можно прибегнуть к следующим трюкам.

Вариант 1: Отказаться как от padding, так и от margin

Для горизонтального отступа использовать вложенную таблицу меньших размеров чем основная ширина блока. Т. е., получается табличка в табличке. А для вертикального отступа использовать пустой блок/контейнер с заданной высотой строки. Например:

 

<div style=«height: 10px; line-height:10px; font-size:10px;»>

 

Вариант 2: Отказаться от тэга <p>

В таком случае, вписывать текстовые блоки непосредственно в тэге <td>, предварительно прописав в каждом тэге <td> ВСЕ свойства, от шрифта до отступов. А для разбивки абзацев использовать тэг <br/>. Например:

 

<tr>
<td style=«font-weight:normal; font-family:Helvetica, Arial, sans-serif; font-size:14px; color:#757575; line-height:145%; text-align:left; -webkit-text-size-adjust:none; padding-left:40px; padding-right:40px;»><span style=«font-weight:normal; font-family:Helvetica, Arial, sans-serif; font-size:14px; color:#757575; line-height:145%; text-align:left;»>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</td>
</tr>

 

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

 

<tr>
<td width=«100%» height=«40» style=«-webkit-text-size-adjust:none;» bgcolor=«#ffffff»>
</td>
</tr>

 

Второй вариант будет означать очень много кода.

 

Фон и цвет

Обычно, html-шаблон предполагает белый фон для основного письма (текстовые блоки) и более темный, контрастный — для основного контейнера самого html-шаблона. Обычно это разновидности серого, но сегодня им никто не ограничивается. Например — это может быть бордовый, темно-коричневый, лазурный или даже черный.

Важно помнить — всегда необходимо использовать полный, шестизначныйhex-код оттенка, например #2a7fb8 или #b6b6b6, и не укорачивать его. Например, правильно писать белый цвет как #ffffff, а не сокращенно как #fff. Иначе, многие почтовые клиенты его просто не распознают.

Также, сейчас в качестве фона можно использовать изображения или паттерн, т. е. повторяющийся мотив.

 

pattern-smart-894-380

 

Ниже приведен пример кода для фонового паттерна.

Добавьте этот кусок после открывающего тэга <body>, до первого открывающего тэга <table>:

 

<body>
<div style=«background-color:#7d7d7d;»>
<!—[if gte mso 9]>
<v:background xmlns:v=«urn:schemas-microsoft-com:vml» fill=«t»>
<v:fill type=«tile» src=«https://smartresponder.ru/user/files/1538809/1019715350/pattern-7d7d7d-6...» color=«#7d7d7d»/>
<![endif]—>
<table>height=«100%» width=«100%» cellpadding=«0» cellspacing=«0» border=«0»>
<tr>
<td valign=«top» align=«left» background=«https://smartresponder.ru/user/files/1538809/1019715350/pattern-7d7d7d-6...»>
<table border=«0» cellpadding=«0» cellspacing=«0» style=«margin:0;padding:0»>

 

И этот кусок — до закрывающего тэга </body>:

 

</table>
</td>
</tr
</table>
</div>
</body>

 

Обязательно укажите цвет фона, для страховки. Есть почтовые провайдеры иemail-клиенты, которые в обязательном порядке будут блокировать фоновые изображения и тогда, взамен, придется отображать именно указанный цвет фона.

 

Текст, ссылки и CSS

С CSS-стилей многие и начинают свой путь в изучение html-верстки. Когда дело доходит до оформления самого текста внутри шаблона, начинают возникать проблемы, так как у CSS-стилей есть много подводных камней.

Первое правило, которое стоить помнить при верстке писем — всегда использовать inline-css.

Inline-css — что это такое

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

Все дело в том, что в верстке html-письма мы используем табличную структуру, в то время как слишком большое количество почтовых клиентов и почтовых провайдеров игнорируют/вырезают все стили, находящиеся между тэгами <head> и </head>, а также стили, прописанные в заглавных ячейках.

Именно поэтому, все стили для текста применяются не только в заглавной ячейке, но и дублируются в тэге <span>, в каждой новой строчке <p> или в каждой новой ячейке <td>. Пример:

 

<tr>
<td style=«background-color:#ffffff; padding-left:70px; padding-right:70px; padding-top:20px; font-weight:normal; font-family:Helvetica, Arial, sans-serif; font-size:14px; color:#757575; line-height:145%; text-align:left;-webkit-text-size-adjust:none;»><span style=«font-weight:normal; font-family:Helvetica, Arial, sans-serif; font-size:14px; color:#757575; line-height:145%; text-align:left;-webkit-text-size-adjust:none;»> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</td>
</tr>

 

Важно помнить: цвет, шрифт и размер — font-family: Helvetica,Arial,sans-serif;font-size: 14px; color: #757575; line-height: 145%; — ВСЕГДА применять в инлайне (inline). Иначе почтовые клиенты будут добавлять к этим свойствам свои собственные значения.

Не стоит писать данные свойства шрифта в сокращенном виде, так как в некоторых почтовиках и email-клиентах, сокращенный вариант вполне сработает, а вот например в Outlook-е — уже нет. Правильно будет указывать каждое свойство отдельно, например:

  • font-family: Helvetica, Arial, sans-serif; font-style:italic, font-size:14px; color:#757575;

А так уже будет не правильно: font: Arial italic 14px #757575;

Высота строки — line-height — ее можно указывать как в пикселях, так и в процентах. Например line-height:145%; или line-height:24px; Когда высота указывается в пикселях, значение должно быть минимум на 8px больше, чем размер шрифта. Например, если размер шрифта 14px, высота строки — минимум 22px.

Стоить еще отметить что Outlook.com игнорирует высоту строки, если она вписана в тэг <span>. Поэтому позаботьтесь о том чтобы, она присутствовала в тэге <td>.

-webkit-text-size-adjust:none — данное свойство используется для решения проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. На этих устройствах, по умолчанию, минимальный размер шрифта 13px. Поэтому, если у вас где-то встречается шрифт меньше 13px, используйте это свойство.

 

Шрифты

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

Без засечек (sans serif):

  • font-family: Arial, Helvetica, sans-serif;
  • font-family: ‘Arial Black’, Helvetica, sans-serif;
  • font-family: ‘MS Sans Serif’, Geneva, sans-serif;
  • font-family: Tahoma, Geneva, sans-serif;
  • font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
  • font-family: Verdana, Geneva, sans-serif;

С засечками (serif):

  • font-family: Georgia, serif;
  • font-family: ‘Times New Roman’, Times, serif;

Названия шрифтов, состоящих из двух или более слов стоит брать в ординарные кавычки, например ‘Trebuchet MS’, обозначая таким образом единое значение/название. Иначе, некоторые почтовые программы или почтовики автоматически будут разбивать все значения через запятую и название шрифта будет выглядеть так — Trebuchet, MS, Helvetica, sans-serif;Это будет засчитано как ошибка и вместо ‘Trebuchet MS’ будет отображаться дефолтный Times New Roman.

 

Ссылки

Стиль ссылок также желательно дублировать тэгом <span>. Как минимум для цвета, шрифта и размера.

Если хотите, чтобы при нажатии на ссылку, страница открывалась в новом окне, добавляйте атрибут target=«_blank».

Если хотите, чтобы при наведении курсора на ссылку, появлялся текст-подсказка (text-hover), добавляйте атрибут title=«ваш текст».

Следует также учитывать, что почтовики и почтовые клиенты (не все, конечно) имеют привычку подчеркивать ярко синим все ссылки в тексте. Поэтому, если хотите чтобы текст НЕ подчеркивался (например в заголовке) — указывайте значение text-decoration:none;

А если подчеркивание ссылки не только уместно, но и нужно, например в ссылках, привязанных к определенным словам текстового блока, указывайте значение text-decoration:underline; В этом случае подчеркивание будет того цвета, который указан в тэге <span>. Например:

 

<a style=«font-style: normal; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #085c9c; text-decoration: underline;» title=«Читать далее» href=«#» target=«_blank»> <span style=«font-style: normal; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #085c9c; font-size: 14px;»>Читать далее</span></a>

 

Почтовые адреса и номера телефонов

Опять же, некоторые почтовики и почтовые клиенты (особенно мобильные), находя сочетание цифр, похожее на номер телефона или почтовый адрес, заменяют их на ссылку, используя цвета по умолчанию, обычно ярко-синий, часто все это дело подчеркивают. Это, к сожалению, обойти нельзя, но можно пойти навстречу. Например, сразу сделать это ссылкой нужного цвета и добавить соответственные стили.

 

Для телефона:

 

<a href=«tel: 495 664 22 74» value=«+74956642274» target=«_blank» style=«color:#2a7fb8; text-decoration:none;»> +7 (495) 664-22-74 </a>

 

Для электронной почты:

 

<a style=«#2a7fb8; text-decoration: none;» href=«mailto:[email protected]» target=«_blank» style=«color:#2a7fb8; text-decoration:none;»> [email protected]</a>

 

Изображения

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

Подписчик может разрешить почтовику/клиенту отображать автоматически ваши картинки, а может и не разрешить, предпочитая, от раза к разу, загружать или не загружать изображения в ручном режиме. И в этом случае, открывая письмо, вместо изображений подписчик будет видеть пустое место. Разумеется, это пустое место можно как-то обозначить или дополнить по смыслу. Для этого существуют атрибуты alt, title и другие свойства.

Атрибут alt отображает текст, присвоенный изображению. Таким образом, если картинка заблокирована, подписчик сможет увидеть ее подпись. У этой подписи могут быть такие свойства, как шрифт, цвет шрифта, его размер, стиль. Подробнее об alt-тексте →

Атрибут title отображает всплывающий текст-подсказку и может быть отличным от alt-текста.

 

alt-text-smart-800-340-2

 

У изображения также может быть собственный фон — background-color(такой-же как и общий фон шаблона или отличный от него), скругленные края — border-radius (к сожалению, нечитаемое некоторыми почтовиками и клиентами свойство — Yahoo, Outlook), а также просто рамки.

Насчет рамки — border — всегда стоит использовать полный, не сокращенный вариант этого стиля. Например, правильно будет указывать:

  • border-width:1px; border-style:solid; border-color:#999999;

А так будет не правильно: border: 1px solid #999;

display:block; — свойство изображения, позволяющее отображать его отдельным блоком, иначе, в некоторых клиентах оно может поплыть и уйти в другой ряд или угол. Также, это не позволяет email-клиенту Outlook добавлять к изображению нежелательные отступы.

Стоит также указывать line-height, когда высота изображения менее 19px. Это поможет избежать лишних зазоров между ячейками в Outlook 2013.

Также, всегда стоит указывать ширину и высоту изображения, в точных и реальных размерах, чтобы избежать некорректного изображения и позиционирования внутри самого шаблона. Например, если ваша изображение — размером 820х600px, не стоит его масштабировать и писать размеры как — 410х300px, так как Outlook будет отображать именно реальные размеры изображения, а не его уменьшенную версию. Такое изображение запросто сломает вам весь шаблон.

В итоге, код для изображения может выглядеть так:

 

<img src=«#» width=«510» height=«322» target=«_blank» alt=«Весенний букет» border=«0» style=«color: #467fab; font-family: Arial; font-style: italic; font-size: 15px; line-height: normal; background-color: #ffffff; border-radius:3px; border-width:1px; border-style:solid; border-color:#8e8e8e;» title=«Подари весну!»>

 

Как видите, есть с чем повозиться.

В итоге, какими бы проверенными не были данные советы, все установленные в html-шаблоне свойства необходимо будет тестировать, и по нескольку раз, прежде чем определиться с самым оптимальным вариантом. Подгон шаблона под все перечисленные параметры может занять некоторое время и к этому надо быть готовым. Тестируйте!

eMail Маркетинг