Pull to refresh
0
Pechkin.com
Новый инструмент для e-mail маркетинга

How-to: Типографика в дизайне email-писем

Reading time 4 min
Views 29K
Original author: Jason Rodriguez


Исследования показывают, что в почтовых программах до 43% email-подписчиков отключено отображение картинок. Это означает, что донести до них нужную информацию с помощью email-рассылки можно только если использовать реальный текст в HTML-версиях писем.

При этом, данный факт вовсе не означает, что можно использовать только Arial и Times New Roman. В сегодняшнем материале мы рассмотрим существующие возможности по работе с шрифтами в email.

Основы типографики


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

<td>Здесь какой-то текст.</td>

К ячейкам можно применять CSS-стили, описывающие цвет текста (color), используемый шрифт (font-family), его вес (font-weight) и высоту строки (line-height).


<td style=”color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Some copy goes here.</td>

Если объявить эти стили, то текст будет адекватно рендериться даже в самых «враждебных» почтовых клиентах. Если хранить каждую часть контента в своей ячейке, то эти компоненты можно стилизовать без необходимости заботиться о проблемах наследования. Если, например, нужно поработать с конкретным участком текста в большом блоке, то этот нужный текст можно завернуть в
 и использовать инлайн-стили:

<td style=”color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здесь какой-то текст. <span style=”font-weight: bold; font-style: italic;”>Привлекаем внимание к контенту</span> с помощью стилей шрифта</td>

В примерах выше мы использовали Arial (да-да), но ничто не мешает пойти дальше. Давайте посмотрим, как это можно сделать.

Использование веб-шрифтов


Данный метод хорошо описал дизайнер Пол Эйри (Paulr Airy). Его суть заключается в использовании веб-шрифтов, которые не установлены на устройстве пользователя. Делается это с помощью их включения в CSS. В вебе этот метод давно и успешно применяется, но среди email-дизайнеров только набирает популярность.

Существует несколько способов включения веб-шрифтов, но Пол рекомендует использовать внешний файл со стилями, который используется для «вытягивания» шрифтов с сайтов вроде Google Web Fonts.


<head>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 </head>

Затем в инлайн-стилях можно добавить нужный шрифт в декларацию font-family:


<td style=”color: #444444; font-family: ‘Open Sans’, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здесь какой-то текст.</td>

Теперь в почтовых клиентах, которые поддерживают веб-шрифты, текст будет отображаться с помощью выбранного заранее шрифта. В противном случае, будут использоваться перечисленные альтернативные шрифты — у нас это Helvetica, Arial или установленный шрифт без засечек.
Поддержка веб-шрифтов в почтовых клиентах через ссылку на внешний файл стилей
Apple Mail 6
check-green
Lotus Notes 8
check-green
Outlook 2000
check-green
Outlook 2011 on Mac
check-green
Thunderbird
check-green
iPad
check-green
iPhone
check-green
Android 2.3
check-green
Android 4.2
check-green

К сожалению, Outlook не станет отображать наши альтернативные шрифты (кто бы сомневался, конечно). Вместо этого, он проигнорирует все относящиеся к ним стили и отобразит текст с помощью Times New Roman. Но и с этим можно справиться с помощью специального CSS-класса — он будет выделять нужный текст через условные комментарии передавать Outlook информацию об используемом наборе шрифтов.


<!--[if mso]>
<style type=”text/css”>
.body-text {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->

<td class=”body-text” style=”color: #444444; font-family: ‘Open Sans’, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здест какой-то текст.</td>

Теперь вместо Times New Roman по-умолчанию письма будут отображаться с помощью Arial или другого установленного шрифта без засечек.

Многоколоночный вид без табличных ячеек


Пол также говорит о нежелательности использования для размещения текста несколько колонок-столбцов. Однако поскольку большинство писем верстают в табличном формате, в котором всегда есть столбцы, то напрашивается простое использование соседних ячеек для отображения текста. Но что, если нам нужно добиться «перетекания» текста из одного столбца в другой, вместо «хардкодинга» контента в конкретные ячейки?

Здесь на помощь приходит CSS-свойство column-count. Но важно помнить: с этого момента мы вступаем на дикие земли, в которых редко можно встретить приложение, поддерживающее column-count.

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


<td style=”-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; color: #444444; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 20px;”>Здесь какой-то текст.</td>

Теперь вне зависимости от объёма текста, он будет естественным образом разбит между двумя столбцами. В том случае, если почтовая программа, в которой открывается письмо, не поддерживает column-count, сообщение отобразится в одноколоночном виде.

Как сказано выше, с поддержкой как раз все не очень хорошо:
Поддержка почтовыми клиентами многоколоночности через column-count
Apple Mail 6
check-green
Outlook 2011 on Mac
check-green
AOL Mail (Explorer)
check-green
AOL Mail (Chrome)
check-green
iPad
check-green
iPhone
check-green
Android 2.3
check-green
Android 4.2
check-green

Иногда с помощью различных лайфхаков (например, применение стилей к тегу параграфа) удается заставить отображать письма с column-count и некоторые другие клиенты. В частности, в ходе тестов Полу удалось добиться этого, например, в Outlook.com в Firefox.

Читайте также другие материалы от «Печкина»:

Tags:
Hubs:
+13
Comments 0
Comments Leave a comment

Articles

Information

Website
pechkin.com
Registered
Founded
Employees
2–10 employees
Location
Россия