Найти

Верстка html-писем - советы

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

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

Верстка html-писем

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

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

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

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

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

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

Верстка html-писем - советы

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

Структура



Верстку 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: Отказаться от тэга



В таком случае, вписывать текстовые блоки непосредственно под тэгом 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. Иначе, многие почтовые клиенты его просто не распознают.

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

Верстка html-писем - советы

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

Добавьте этот кусок после открывающего тэга 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-68-34.png» 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-68-34.png»>
<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:newsletter@smartresponder.ru» target=«_blank» style=«color:#2a7fb8; text-decoration:none;»> newsletter@smartresponder.ru </a>


Изображения


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

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

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

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

У изображения также может быть собственный фон — 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-шаблоне свойства необходимо будет тестировать, и по нескольку раз, прежде чем определиться с самым оптимальным вариантом. Подгон шаблона под все перечисленные параметры может занять некоторое время и к этому надо быть готовым. Тестируйте!

С уважение, Дмитрий Арсеньев!



Теги: Верстка SmartResponder

Рубрика: Веб-дизайн


Подпишитесь на новые статьи

Вы можете отписаться в любой момент
  • seoonly.ru8 апреля 2016 07:23

    Спасибо за советы-)
Оставить свой комментарий

Обязательно ознакомьтесь с правилами комментирования!!! СПАМ будет удален!