- Сео Блог Эдуарда · Веб-дизайн · Верстка html-писем - советы
Верстка html-писем - советы
Эдуард
7-04-2016, 14:54
Большинству тех, кто занимается email-маркетингом, в том числе и новичкам, так или иначе приходится вникать в кухню html-верстки.
Мы часто используем готовые html-шаблоны, но несмотря на свою предполагаемую универсальность, всегда надо уметь правильно вставлять и подгонять картинки, вставлять их в рамочки, менять стили заголовков, фон, шрифт, размер. И уже начиная с этих базовых знаний о CSS (атрибуты стиля), мы начинаем копать глубже и начинаем понимать из чего на самом деле состоит html-верстка.
Даже если вы не профессионал, не web-девелопер и не web-дизайнер и используете чужие шаблоны, вам все равно придется их адаптировать под свои нужды, а это значит — копаться в уже созданном коде.
Не все html-шаблоны, которое вы встретите на просторах интернета будут учитывать все особенности и универсально хорошо отображаться во всех почтовых ящиках и email-клиентах. Мы собрали для вас несколько рекомендаций для html-верстки писем, которые вам надо будет иметь в виду и, по необходимости, добавлять. Будьте готовы к экспериментам!
Но для начала, небольшое отступление.
На то, как будет видеть шаблон ваш подписчик, влияет в первую очередь устройство, с которого он его читает — это ПК или мобильное устройство. Если это ПК — то почтовый клиент (десктопное приложение) или веб-почта (вход в почту через веб-браузер). Если это смартфон или планшет, то и тут может быть родной почтовый клиент, другой почтовый клиент или отдельное приложение от любимого email-провайдера (например Gmail App или приложение Yandex.Mail).
И теперь все эти факторы помножьте на существующее количество почтовых провайдеров, почтовых клиентов, девайсов и приложений. В общем вы поняли, html-верстка — то еще развлечение.
Сегодня мы рассмотрим html-верстку писем для ПК. Он пока все-таки еще преобладает. Адаптивная верстка писем для мобильных устройств — отдельная тема, требует отдельного поста.
Начнем с главного.
Верстку html-писем рекомендуется осуществлять на табличной основе. Если для web-разработки этот прием устарел, то для email он оптимален именно из-за этого самого разнообразия девайсов, почтовых клиентов и email-провайдеров, где каждый — со своими фишками и настройками.
Нечто похожее, кстати, было с браузерами лет 10 назад, когда они вели яростную войну за долю рынка и не желали сотрудничать друг с другом. Приходилось из кожи вон лезть, чтобы сайт одинаково хорошо выглядел и в Интерент-Эксплорере, и в Опере. Благодаря Web Standards Project и совместным усилиям программистов, удалось создать и внедрить универсальные стандарты. Будет ли у email-писем такая же судьба?
Не отходя от кассы — что такое табличная структура:
Блочная структура, популярная в web-верстке использует тэг div.
Ширина письма не должна превышать 680px. Иногда вполне уместно использовать и 700px, но не более. И тут дело не только в современной эстетике.
Уже доказано на многочисленных экспериментах, что для быстрого, поверхностного чтения (а именно так и читают/просматривают свою почту читатели), оптимальный размер горизонтальной строки — это около 65-75 символов. Если учесть пробелы, пунктуацию, отступы и стандартный шрифт в 14px, то это как раз 600-680 пикселей.
Создать email, в котором поля и отступы отображались абсолютно одинаково во всех почтовых ящиках и email-клиентах практически невозможно. Не только email-провайдеры, но и email-клиенты вырезают или добавляют те, или иные свойства.
Сначала обнулить
Одно из основных правил табличной верстки — это добавление свойств, которые обнуляют лишние отступы и рамки, добавляемые очень многими почтовыми клиентами и провайдерами web-почты (Gmail, Yandex, Outlook и т.д.).
Эти свойства (border, cellpadding, cellspacing, margin) должны вставляться под каждым тэгом table.
А потом добавить
В 2013, Outlook.com (бывший Hotmail) стал вырезать внешние отступы, или поля — margin — из кода емэйлов. Поэтому, для того чтобы горизонтальные отступы отображались корректно, необходимо прибегнуть к внутренним отступам — padding. С другой стороны, тот же Outlook, только уже почтовый клиент не поддерживает padding, когда он прописан inline (подробнее об этом ниже). Т. е. когда данное свойство прописано непосредственно под тэгом p . Поэтому, чтобы уравновесить отступы, можно прибегнуть к следующим трюкам.
Вариант 1: Отказаться как от padding, так и от margin
Для горизонтального отступа использовать вложенную таблицу меньших размеров чем основная ширина блока. Т. е., получается табличка в табличке. А для вертикального отступа использовать пустой блок/контейнер с заданной высотой строки. Например:
Вариант 2: Отказаться от тэга
В таком случае, вписывать текстовые блоки непосредственно под тэгом td, предварительно прописав в каждом тэге td ВСЕ свойства, от шрифта до отступов. А для разбивки абзацев использовать тэг br. Например:
В качестве дополнительного вертикального отступа, между блоками можно использовать пустые блоки/контейнеры с заданной высотой строки. Например:
Второй вариант будет означать очень много кода.
Обычно, html-шаблон предполагает белый фон для основного письма (текстовые блоки) и более темный, контрастный — для основного контейнера самого html-шаблона. Обычно это разновидности серого, но сегодня им никто не ограничивается. Например — это может быть бордовый, темно-коричневый, лазурный или даже черный.
Важно помнить — всегда необходимо использовать полный, шестизначный hex-код оттенка, например #2a7fb8 или #b6b6b6, и не укорачивать его. Например, правильно писать белый цвет как #ffffff, а не сокращенно как #fff. Иначе, многие почтовые клиенты его просто не распознают.
Также, сейчас в качестве фона можно использовать изображения или паттерн, т. е. повторяющийся мотив.
Ниже приведен пример кода для фонового паттерна.
Добавьте этот кусок после открывающего тэга body, до первого открывающего тэга table:
И этот кусок — до закрывающего тэга /body:
Обязательно укажите цвет фона, для страховки. Есть почтовые провайдеры и email-клиенты, которые в обязательном порядке будут блокировать фоновые изображения и тогда, взамен, придется отображать именно указанный цвет фона.
С CSS-стилей многие и начинают свой путь в изучение html-верстки. Когда дело доходит до оформления самого текста внутри шаблона, начинают возникать проблемы, так как у CSS-стилей есть много подводных камней.
Первое правило, которое стоить помнить при верстке писем — всегда использовать inline-css.
Inline-css — что это такое
Мы с вами знаем, что CSS — это набор атрибутов оформления элементов шаблона — шрифты, их размер, цвет текста, стиль написания — простой или курсив, выравнивание и т. д. При верстке шаблона в html-редакторе, кажется достаточно указать все стили в главном блоке или ячейке, но это, к сожалению, не так.
Все дело в том, что в верстке html-письма мы используем табличный структуру, в то время как слишком большое количество почтовых клиентов и почтовых провайдеров игнорируют/вырезают все стили, находящиеся между тэгами head и /head , а также стили, прописанные в заглавных ячейках.
Именно поэтому, все стили для текста применяются не только в заглавной ячейке, но и дублируются в тэге span, в каждой новой строчке p или в каждой новой ячейке td. Пример:
Важно помнить: цвет, шрифт и размер — font-family: Helvetica,Arial,sans-serif; font-size: 14px; color: #757575; line-height: 145%; — ВСЕГДА применять в инлайне (inline). Иначе почтовые клиенты будут добавлять к этим свойствам свои собственные значения.
Не стоит писать данные свойства шрифта в сокращенном виде, так как в некоторых почтовиках и email-клиентах, сокращенный вариант вполне сработает, а вот например в Outlook-е — уже нет. Правильно будет указывать каждое свойство отдельно, например:
А так уже будет не правильно: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):
С засечками (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. Например:
Почтовые адреса и номера телефонов
Опять же, некоторые почтовики и почтовые клиенты (особенно мобильные), находя сочетание цифр, похожее на номер телефона или почтовый адрес, заменяют их на ссылку, используя цвета по умолчанию, обычно ярко-синий, часто все это дело подчеркивают. Это, к сожалению, обойти нельзя, но можно пойти навстречу. Например, сразу сделать это ссылкой нужного цвета и добавить соответственные стили.
Для телефона:
Для электронной почты:
Блокирование изображений — частая проблема. Многие почтовики и email-клиенты блокируют изображения по умолчанию, лишая таким образом html-шаблон одного из самых главных своих преимуществ — картинок.
Подписчик может разрешить почтовику/клиенту отображать автоматически ваши картинки, а может и не разрешить, предпочитая, от раза к разу, загружать или не загружать изображения в ручном режиме. И в этом случае, открывая письмо, вместо изображений подписчик будет видеть пустое место. Разумеется, это пустое место можно как-то обозначить или дополнить по смыслу. Для этого существуют атрибуты alt, title и другие свойства.
Атрибут alt отображает текст, присвоенный изображению. Таким образом, если картинка заблокирована, подписчик сможет увидеть ее подпись. У этой подписи могут быть такие свойства, как шрифт, цвет шрифта, его размер, стиль.
Атрибут title отображает всплывающий текст-подсказку и может быть отличным от alt-текста.
У изображения также может быть собственный фон — background-color (такой-же как и общий фон шаблона или отличный от него), скругленные края — border-radius (к сожалению, нечитаемое некоторыми почтовиками и клиентами свойство — Yahoo, Outlook), а также просто рамки.
Насчет рамки — border — всегда стоит использовать полный, не сокращенный вариант этого стиля. Например, правильно будет указывать:
А так будет не правильно:border: 1px solid #999;
display:block; — свойство изображения, позволяющее отображать его отдельным блоком, иначе, в некоторых клиентах оно может поплыть и уйти в другой ряд или угол. Также, это не позволяет email-клиенту Outlook добавлять к изображению нежелательные отступы.
Стоит также указывать line-height, когда высота изображения менее 19px. Это поможет избежать лишних зазоров между ячейками в Outlook 2013.
Также, всегда стоит указывать ширину и высоту изображения, в точных и реальных размерах, чтобы избежать некорректного изображения и позиционирования внутри самого шаблона. Например, если ваша изображение — размером 820х600px, не стоит его масштабировать и писать размеры как — 410х300px, так как Outlook будет отображать именно реальные размеры изображения, а не его уменьшенную версию. Такое изображение запросто сломает вам весь шаблон.
В итоге, код для изображения может выглядеть так:
Как видите, есть с чем повозиться.
В итоге, какими бы проверенными не были данные советы, все установленные в html-шаблоне свойства необходимо будет тестировать, и по нескольку раз, прежде чем определиться с самым оптимальным вариантом. Подгон шаблона под все перечисленные параметры может занять некоторое время и к этому надо быть готовым. Тестируйте!
С уважение, Эдуард!
Мы часто используем готовые html-шаблоны, но несмотря на свою предполагаемую универсальность, всегда надо уметь правильно вставлять и подгонять картинки, вставлять их в рамочки, менять стили заголовков, фон, шрифт, размер. И уже начиная с этих базовых знаний о CSS (атрибуты стиля), мы начинаем копать глубже и начинаем понимать из чего на самом деле состоит html-верстка.
Даже если вы не профессионал, не web-девелопер и не web-дизайнер и используете чужие шаблоны, вам все равно придется их адаптировать под свои нужды, а это значит — копаться в уже созданном коде.
Не все html-шаблоны, которое вы встретите на просторах интернета будут учитывать все особенности и универсально хорошо отображаться во всех почтовых ящиках и email-клиентах. Мы собрали для вас несколько рекомендаций для html-верстки писем, которые вам надо будет иметь в виду и, по необходимости, добавлять. Будьте готовы к экспериментам!
Но для начала, небольшое отступление.
На то, как будет видеть шаблон ваш подписчик, влияет в первую очередь устройство, с которого он его читает — это ПК или мобильное устройство. Если это ПК — то почтовый клиент (десктопное приложение) или веб-почта (вход в почту через веб-браузер). Если это смартфон или планшет, то и тут может быть родной почтовый клиент, другой почтовый клиент или отдельное приложение от любимого email-провайдера (например Gmail App или приложение Yandex.Mail).
И теперь все эти факторы помножьте на существующее количество почтовых провайдеров, почтовых клиентов, девайсов и приложений. В общем вы поняли, 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. Иначе, многие почтовые клиенты его просто не распознают.
Также, сейчас в качестве фона можно использовать изображения или паттерн, т. е. повторяющийся мотив.
Ниже приведен пример кода для фонового паттерна.
Добавьте этот кусок после открывающего тэга 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;
А так уже будет не правильно:
Высота строки — 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;
А так будет не правильно:
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-шаблоне свойства необходимо будет тестировать, и по нескольку раз, прежде чем определиться с самым оптимальным вариантом. Подгон шаблона под все перечисленные параметры может занять некоторое время и к этому надо быть готовым. Тестируйте!
С уважение, Эдуард!
Рубрика: Веб-дизайн
Подпишитесь на новые статьи
Вы можете отписаться в любой момент