Здравствуйте, уважаемые хабравчане!
Буквально пару дней назад мы опубликовали первую часть топика, посвященного верстке e-mail рассылок, а конкретнее — использованию изображений. Вторая часть посвящена ещё четырем «подводным камням» верстки, которые нам удалось обнаружить.
Второй камень — «Якоря»
Если рассылка большого объема на несколько страниц, появляется необходимость навигации внутри рассылки. Как известно, для такой навигации на html-странице используются «якоря».В нужном месте прописываем — ставим якорь, ставим ссылку на этот «якорь»: .
Рассмотрим пересылку письма через Outlook Express, Windows Live Mail и Outlook 2007.
Outlook Express
- В онлайн-сервисах якоря не работают:
- gmail.com — в принципе отключает переключение по «ссылкам-якорям»;
- mail.ru – по якорям переходы на страницу с ошибкой (адрес ссылки преобразуется к win.mail.ru/cgi-bin/#anchor);
- yandex.ru – по якорям переходы на несуществующие страницы (адрес ссылки преобразуется к mail.yandex.ru/neo2/#anchor, перебрасывает на страницу mail.yandex.ru/neo2/#404).
- В Outlook 2007 переходы также не работают.
- В TheBat! переходы работают.
Windows Live Mail, Outlook 2007
- В онлайн-сервисах mail.ru и yandex.ru якоря не работают (переходы аналогично Outlook Express);
- В сервисе gmail.com переходы работают;
- В Outlook 2007 переходы работают;
- В !TheBat переходы работают.
Сводная таблица
Добиться корректной работы якорей во всех почтовых сервисах нам не удалось. Возможно, решение проблемы есть — будем благодарны, если кто-то подскажет. В остальном для якорей в качестве программ пересылки писем лучше использовать Windows Live Mail или Outlook 2007.
Третий камень — Границы и выравнивание в таблицах
Иногда в рассылке необходимо поставить разделитель — горизонтальную или вертикальную линию. Поскольку рассылки верстаются с помощью таблиц, то и разделителями, как правило, служат границы ячеек. Однако есть особенность распознавания таких границ в зависимости от того, с помощью какой почтовой программы делается пересылка, и через какую программу просматривается полученное письмо.
Рассмотрим ситуацию: у таблицы задается только нижняя горизонтальная граница.
Прописываем это так:
<table cellspacing="0" cellpadding="0" border="0" width="210" style="width: 210px; border-width:0 0 1px 0; border-style: solid; border-color: #e2e2e2;">
Пересылаем через Outlook Express, Windows Live Mail и Outlook 2007.
Результат получаем в TheBat!:
- В письме из Outlook Express граница выглядит нормально — видна только нижняя граница;
- В письме из Windows Live Mail границы у таблицы сверху и снизу отображаются не совсем корректно;
- В письме из Outlook 2007 внутри таблицы отображаются все границы, что некорректно.
В онлайн-сервисах проблема с границами видна только в письме из Outlook 2007 — у таблицы прорисовывается контур полностью, а не только нижняя граница.
При пересылке через Outlook 2007 в сочетании с получением через TheBat! работает принцип: если у таблицы прописана хотя бы одна граница, то отображаться будут все границы, включая внутренние. При получении через онлайн-сервисы ситуация аналогична в yandex.ru. В gmail.com и в mail.ru ситуация похожая, только внутренние границы не отображаются.
Что касается выравнивания в таблицах — есть одна особенность при получении писем в программе TheBat!.. Если в начале у таблицы стоит выравнивание align=«center», то ВСЁ внутри вложенных таблиц будет по центру. Чтобы этого избежать — нужно у любой вложенной таблицы прописывать align=«left».
Сводная таблица
Четвертый камень — Отступы
При пересылке через Windows Live или Outlook Express отступы отображаются корректно в различных почтовых программах и сервисах. При пересылке через Outlook 2007 возникает следующая проблема:
Outlook 2007 содержимое любой ячейки в таблице (а рассылка верстается таблицами) оборачивает в
<p class="MsoNormal" style=""></p><p class="MsoNormal" style="">
Сводная таблица
Пятый камень — Стиль текста и ссылок
Как правило, корпоративные рассылки оформляются в соответствии с фирменным стилем, что подразумевает использование определенных шрифтов и цветов в том числе у текста и у ссылок. И здесь мы обнаружили 2 проблемы:
1. «Поломка» шрифта
При пересылке через Outlook Express или Windows Live и получении писем в yandex.ru шрифт текста «ломается» в случае, если для форматирования текста используется тег font и в ячейке таблицы перед текстом есть другая таблица.
То есть при использовании конструкция вида:
<td><font color="#525252" size="2" face="Arial"> <table><tr><td><font color="#525252" size="4" face="Arial">текст1</font></td></tr></table> текст2 </font></td>
Шрифт блока «текст2» заменяется на некий стандартный. Если посмотреть получившийся код, можно увидеть:
<td><font color="#525252" size="2" face="Arial"></font> <table><tr><td><font color="#525252" size="4" face="Arial">текст1</font></td></tr></table> текст2 </td>
Фактически закрывающий тег font «переносится» над таблицей.
Решение проблемы: использовать тег span и прописывать цвет, размер и гарнитуру шрифта через атрибут style. В статьях Верстка почтовых рассылок: взгляд изнутри и Верстка почтовых рассылок уже сказано об этом. Так что «поломка» шрифта при наличии вложенных таблиц — это ещё один аргумент в пользу span.
2. Форматирование ссылок
Цвет и шрифт текста ссылки принудительно поменять можно (прописав стили у ссылки и font внутри ссылки, либо обернув ссылку в span, что правильнее), подчеркивание — увы, не всегда. Внешний вид рассылки от этого портится. Прикручивание своих стилей было замечено при пересылке через Outlook 2007 и получении в gmail.com, mail.ru, yandex.ru (ниже примеры с подчеркиванием, которого по стилю быть не должно):
Сводная таблица
Резюме
Верстка рассылок — задача не самая простая. Вполне возможно, что есть и другие «камни», на которые мы просто не натолкнулись. Будем рады, если вы поделитесь какими-то проблемами и решениями. Чем больше информации, тем меньше ошибок в будущем ;)
И на последок, мы сделали общую сводную таблицу по найденным «подводным камням». Посмотреть её вы можете здесь.
