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