Верстка e-mail рассылок — «подводные камни». Часть вторая

    Верстка e-mail рассылок — «подводные камни». Часть вторая
    Здравствуйте, уважаемые хабравчане!
    Буквально пару дней назад мы опубликовали первую часть топика, посвященного верстке 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.

    Якоря в e-mail рассылках

    Третий камень — Границы и выравнивание в таблицах


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

    Рассмотрим ситуацию: у таблицы задается только нижняя горизонтальная граница.

    Прописываем это так:
    
    <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 внутри таблицы отображаются все границы, что некорректно.

    Границы в таблицах в e-mail рассылках

    В онлайн-сервисах проблема с границами видна только в письме из Outlook 2007 — у таблицы прорисовывается контур полностью, а не только нижняя граница.

    При пересылке через Outlook 2007 в сочетании с получением через TheBat! работает принцип: если у таблицы прописана хотя бы одна граница, то отображаться будут все границы, включая внутренние. При получении через онлайн-сервисы ситуация аналогична в yandex.ru. В gmail.com и в mail.ru ситуация похожая, только внутренние границы не отображаются.

    Что касается выравнивания в таблицах — есть одна особенность при получении писем в программе TheBat!.. Если в начале у таблицы стоит выравнивание align=«center», то ВСЁ внутри вложенных таблиц будет по центру. Чтобы этого избежать — нужно у любой вложенной таблицы прописывать align=«left».

    Сводная таблица

    Границы в таблицах в e-mail рассылках

    Четвертый камень — Отступы


    При пересылке через Windows Live или Outlook Express отступы отображаются корректно в различных почтовых программах и сервисах. При пересылке через Outlook 2007 возникает следующая проблема:
    Outlook 2007 содержимое любой ячейки в таблице (а рассылка верстается таблицами) оборачивает в
    <p class="MsoNormal" style=""></p>
    При получении письма в почтовом сервисе yandex.ru наблюдается увеличение всех отступов в письме. Объясняется это просто: в скомпилированном стиле у
    <p class="MsoNormal" style="">
    проставляются margin-top: 15px и margin-bottom: 15px. При верстке это нужно учитывать.

    Отсутупы в абзацах в e-mail рассылках

    Сводная таблица

    Отсутупы в абзацах в e-mail рассылках

    Пятый камень — Стиль текста и ссылок


    Как правило, корпоративные рассылки оформляются в соответствии с фирменным стилем, что подразумевает использование определенных шрифтов и цветов в том числе у текста и у ссылок. И здесь мы обнаружили 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 «переносится» над таблицей.

    Стиль текста в e-mail рассылках

    Решение проблемы: использовать тег span и прописывать цвет, размер и гарнитуру шрифта через атрибут style. В статьях Верстка почтовых рассылок: взгляд изнутри и Верстка почтовых рассылок уже сказано об этом. Так что «поломка» шрифта при наличии вложенных таблиц — это ещё один аргумент в пользу span.

    2. Форматирование ссылок

    Цвет и шрифт текста ссылки принудительно поменять можно (прописав стили у ссылки и font внутри ссылки, либо обернув ссылку в span, что правильнее), подчеркивание — увы, не всегда. Внешний вид рассылки от этого портится. Прикручивание своих стилей было замечено при пересылке через Outlook 2007 и получении в gmail.com, mail.ru, yandex.ru (ниже примеры с подчеркиванием, которого по стилю быть не должно):

    Стиль ссылок в e-mail рассылках

    Сводная таблица

    Стиль текста и ссылок в e-mail рассылках



    Резюме


    Верстка рассылок — задача не самая простая. Вполне возможно, что есть и другие «камни», на которые мы просто не натолкнулись. Будем рады, если вы поделитесь какими-то проблемами и решениями. Чем больше информации, тем меньше ошибок в будущем ;)

    И на последок, мы сделали общую сводную таблицу по найденным «подводным камням». Посмотреть её вы можете здесь.
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 15

      +4
      Библиография.
      habrahabr.ru/blogs/webdev/106387/ Грабли при верстке HTML писем 18 октября 2010
      habrahabr.ru/blogs/css/112163/ Верстка почтовых рассылок 19 января 2011
      habrahabr.ru/blogs/css/112307/ С версткой почтовых рассылок все не так уж плохо 21 января 2011
      habrahabr.ru/blogs/css/114119/ Верстка почтовых рассылок: взгляд изнутри 20 февраля 2011
      habrahabr.ru/blogs/css/114234/ Верстка почтовых рассылок: разбор полетов 21 февраля 2011
      habrahabr.ru/company/sibirix/blog/114472/ Верстка e-mail рассылок — «подводные камни». Часть первая. Картинки
        +1
        Собрали бы сводный хабра-индекс, как здесь, было бы хорошо.
          +2
          Судя по минусам в карму — посты про верстку почты за последние пару недель многих достали. Есть еще материал, но подождем, пока устаканится :-)
            +3
            Ну это глупо я считаю, минусить за достойный материал с ясными выкладками.
              +2
              Интересно узнать кого материалы по верстке рассылок достали, учитывая тот факт, что до недавнего времени этих материалов просто практически не было. А если ознакомиться с приведенной «библиографией», то такой напор материала как то слабоват для того, чтобы «надоесть».
                0
                Такой полноты картины я вообще нигде не встречал. Авторы колоссальную работу ведь проделали
                  0
                  Спасибо, что оценили, обязательно напишем еще :)
        • UFO just landed and posted this here
            0
            Решение хорошее, но не всегда к сожалению возможное.
              0
              Кто сказал такую глупость? Какая серьезная компания в регулярных рассылках будет слать plain/text?
                +1
                а разве google не присылает френдленту в plain/text? аа… гугл не серьёзная компания. я понял. оке.
                  0
                  А зачем мне фирменный стиль гугла в вебинтерфейсе гугла? 0_0
                  Да и кстати у гугла стиля то по сути нет, который можно было бы отразить в рассылках. Лого разве что, хотя его и так все знают.
              0
              Спасибо, что дали ссылку на мои замечание в сторону font и span.

              Насчет якорей в письмах: они просто не нужны! Никогда не делайте огромных писем! Сделайте рассылку с анонсами того, что вы хотите преподнести и дайте ссылку в сеть на подробную информацию. Если письма превышает 1.5 экрана по высоте, я как и многие тупо шлют это в спам. Об этом писал еще Якоб Нильсен. Пруфлинка к сожалению сейчас привести не смогу.

              Насчет границ в таблицах: необходимо указывать отдельно border для каждой стенки td(я об этом не писал потому что большинство виз. редакторов проделывают это за вас), при этом указывать границы для самих таблиц и колонок и вовсе нежелательно. И не стоит забывать о коллапсировании таблиц (border-collapse:collapse;)
                0
                Основной минус html в письме — больше шансов попасть в папочку «Спам». Точно грешил Outlook Express 2003, проверяли.
                  +1
                  Для этого в водном письме отсылается как html, так и plain/text версия. Антиспам-системы в таком случае спокойно относятся к письму.

                Only users with full accounts can post comments. Log in, please.