Практические советы по верстке писем для e-mai рассылок

1. Кодировка и meta-данные

Электронные письма верстаем в UTF-8:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

2. Верстка макета

2.1. Надо использовать только табличную разметку.

2.2. Ширина макета должна укладываться в 600 px, а высота может варьироваться в широких пределах. Высота должна растягиваться, т.к. часто текст может меняться на этапе загрузки письма в систему email-маркетинга, и он может не уместиться в установленную высоту ранее.

2.3. Чтобы стили были поняты большей частью почтовых клиентов, надо использовать inline style:

<td style=”...”>...</td>

Нельзя!

—  применять сокращенные CSS-правила;

—  внедрять «плавающие» блоки;

—  позиционировать средствами CSS.

2.4. Ограничивайтесь минимальным набором тэгов: h1-h6, div, ul, ol, img, a, font, table и не пытайтесь превратить письмо в web 2.0 страницу.

3. Отступы

3.1. При верстке для русских рассылок (для русских ESP, типа mail.ru) необходимо задавать фиксированные размеры для высоты и ширины ячеек.

<td width=”150” height=”85” >

3.2. Для создания вертикальных отступов надо использовать картинки.  Сделать «пустую» картинку (лучше не 1×1 px, а хотя бы 10×10 px, чтобы письмо не оказалось вдруг в папке со спамом,  т.к. маленькую картинку ESP может оценить, как трекинг-пиксель) и путём задания для неё нужной высоты формировать соответствующий отступ:

<div>

<img src=”padding.png” alt=”padding” border=”0” height=”10”>

</div>

3.3. Используйте атрибут  “padding” для контроля отступов в ячейках, “margin” в этом случае не работает.

3.4. Единицы измерения (px) в значении атрибута не указываются — в соответствии со стандартами.

При тестировании было выявлено, что конструкция, описанная ниже, также вполне адекватно воспринимается большинством почтовых клиентов и сервисов:

<td style=”padding:20px;”>...</td>

3.5. Если нужны границы вокруг ячеек, нужно использовать дополнительный тэг <div>, в котором прописать значения границ, так как назначение границ напрямую тэгу <td> не будет работать в Google Mail.

3.6. Выставлять отступы по 10 px вокруг контента, что бы текст не “заезжал” на границы.

4. Текст и ссылки

4.1. Гарнитура, цвет и размер шрифта задается с помощью тэга <font>.

<font face=”tahoma,sans-serif” color=”#000000” size=”2”>Текст</font>

4.2. Если нужно изменить цвет ссылки, тэг <font> располагается внутри <a>.

Если задать для ссылки атрибут  “text-decoration:none;” и цвет с помощью <font>, например:

<a href=”http://example.ru” style=”color:#FFA500; text-decoration:none;” target=”_blank”><font color=”#FFA500”>http://www.example.ru</font></a>

то ссылка будет нужного цвета (иначе, если написать без “text-decoration:none”, то невзирая на <font>, она будет синей и подчеркнутой).

4.3. Обязательно добавить атрибут “target” со значением “_blank” ко всем ссылкам, чтобы сайт не пытался открыться прямо в окне почтового клиента.

4.4. Необходимо избегать искажения дизайна skype-плагином для стилизации номеров телефонов.

Вот тут чел хорошо описал.

Особенно это свойственно GMAIL ESP.

Нельзя!

—  использовать тэг для разрыва строк <p> (нужно использовать <br />);

—  вписывать стили в тэг <body>;

—  использовать red font и любые другие оттенки на основе красного;

—  использовать большие размеры шрифтов (от 16 pt и выше);

—  применять выделение полужирным.

5. Цвета

5.1. Чтобы сделать прямоугольный блок с текстом, залитый каким-нибудь фоновым цветом, придётся делать таблицу, в ней строку, в ней ячейку. И для ячейки прописать атрибут “bgcolor”.

Нельзя!

Использовать сокращенную запись (например, #FFF вместо #FFFFFF) при задании любого цвета в шестнадцатеричном формате — заданный таким образом цвет автоматически трансформируется в чёрный.

6. Изображения

6.1. У изображений всегда должен стоять атрибут “alt” – альтернативный текст,т.к. пользователи часто отключают загрузку изображений по умолчанию. Также обязательно надо указать атрибуты “height” и “width” внутри тэга <img>.

Для значимых картинок нужно использовать отформатированный alt-текст с помощью css.

<img src="pizza.jpg" alt="Try our Bacon Lover's Pizza" width="220" height="200" style="color: #C30; font-weight: bold; font-size: 16px;"/>

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

Это хорошо работает в Yahoo!Mail, iPhone, Gmail, Apple Mail и Thunderbird. В Outlook Express доступно только редактирование цвета текста.

6.2. Многие почтовые клиенты игнорируют следующие атрибуты тэга <img>: “align”, “vspace” и “hspace”.  Поэтому обтекание изображений делается с помощью таблиц.

6.3. Сохраняем картинки при нарезке, как для web.

6.4. В атрибут “background” адреса картинок прописывать, фактически, нельзя — все оформительские рисунки придётся включать в письмо при помощи тэга <img>.

Для Outlook, правда, есть один хак.

6.5. Обнуляем  межстрочный интервал, чтобы предотвратить возникновение нежелательных отступов в некоторых почтовых клиентах:

<div style=”line-height:0;”><img src=”border.png” alt=”border”></div>

6.6. Дублировать фоновые изображения похожей по цвету заливкой.

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

7. Видео

Сейчас видео воспроизводится напрямую только в почтовых клиентах Apple, но новая кодировка HTML5  позволяет улучшить ситуацию для других почтовых клиентов.

Для ESP или OS устройств, не поддерживающих формат HTML5, гарантируется отображение previw-картинки либо анимированного видео, путь для которых нужно указать в коде.

Вот пример кода без лишних параметров

<video width="640" height="360" poster="fallback.jpg" controls="controls">

<source src="http://mysite.com/videoname.mp4" />

<a href="http://mysite.com/"><img src="fallback.jpg" width="640" height="360" /></a>

</video>

8. JavaScript

Клиентский язык JS использовать категорически запрещено. Он все-равно не сработает, и при этом письмо может попасть в SPAM.

9. Валидность

Каждое письмо нужно проверить на валидность кода с помощью validator.w3.org/. Если письмо не валидно, ESP будет выдавать ошибку. Из-за корявого кода, письмо может оказаться в SPAM-фильтре.

10. Тестирование в почтовых клиентах и мобильных ОС

10.1. Сделайте себе несколько тестовых email-адресов в  самых популярных почтовых провайдерах: mail.ru, gmail.com,  yandex.ru, rambler.ru, aol.com, yahoo.com, hotmail.com. Отправьте на них верстку и проверьте, что все одинаково и  корректно отображается.

10.2. Проверьте, как выглядит верстка в ключевых мобильных устройствах: Android, BlackBarry, iPad, iPhone.

10.3. Проверить, как выглядит верстка в основных почтовых клиентах: Outlook, Thunderbird.

Везде все должно отображаться по максимум одинаково с включенными и отключенными картинками, а также полезные советы по верстке писем.

Llelbr