0,0
рейтинг
18 октября 2010 в 21:21

Разработка → Грабли при верстке HTML писем

Довольно часто наши клиенты устраивают регулярные рассылки с новостями. Почти всегда их не устраивают текстовые рассылки или простое оформление HTML рассылок. Наши дизайнеры вовсю креативят, а мы потом набиваем шишки при верстке их макетов с корректным отображением во множестве почтовых клиентов.

Ниже список встретившихся нам особенностей и способы их разрешения (как то упорядочить их мне не удалось, поэтому всё идет единым списком)

  • Чтобы не было проблем с кодировками — верстаем в UTF-8, в HEAD нужно указазываем <meta http-equiv=«Content-Type» content=«text/html; charset=utf-8»>;
  • Mail.ru, почты Яндекса и Рамблера вырезают весь css, поэтому верстать надо с помощью HTML3.2;
  • Mail.ru делает большие отступы у элементов, чтобы их не было надо обернуть письмо в <div id=«mailsub»>;
  • Mail.ru (и похоже что и Яндекс) превращает отступы(\t) в коде в &nbsp; поэтому код не должен отбиваться табами;
  • В текстовой версии нельзя использовать html entities, потому что это текстовая версия, а не HTML. Также, в текстовой версии нельзя использовать unicode символы, которых нет в windows-1251, т.к. mail.ru зачем то перекодирует письмо в эту кодировку;
  • Outlook 2007 не дает использовать фоновые картинки. Мы правда нашли 1 хак — можно указать background-image для body. Тогда этот Outlook покажет фон. Но хак не работает, если мы используем background-position или background-repeat. В web клиентах этот фон не будет показан, поэтому нужно дублировать его указание — в style у body для Outlook, и в background у «корневой» table для веб клиентов;
  • Outlook 2007 делает поля сверху у элементов типа «div». У «table» с «cellpadding=0 cellspacing=0» таких полей нет;
  • В последних рассылках Диснея нам пришлось полностью отказаться от использования фоновых картинок, т.к. при этом были проблемы с позиционированием картинок поверх фона и делать основной макет состоящим из набора картинок внутри таблицы. Текст при этом тоже включается в картинки, ссылки расставляются с помощью areamap areamap использовать нельзя, т.к. в Gmail по таким ссылкам нельзя кликнуть. Надо нарезать письмо на картинки и сохранять их таблице;
  • В Gmail если у картинки, которая является единственной в ячейке таблицы, появляется 3px отступ снизу, его можно устранить, указав style=«display:block» этой картинке;
  • В Рамблер картинки, указанные в теле письма, сливаются на их сервер с подменой ссылок, соответственно если смотреть рассылку отправленную со своих серверов, закрытых извне http авторизаций, то картинки не будут отображаться;
  • В Яндексе если тело письма поместить внутрь {strip} (при этом вырезаются все переносы строк), то иногда в теле письма появлятся непонятные переносы, которые могут попасть на значение аттрибута src или href. При этом картинки могут не отображаться, а ссылки — не открываться;
  • Чтобы в IE6 внизу картинок не отображался 3px отступ, надо, чтобы между тегом картинки и тегом закрытия ячейки не было пробельных символов (при этом допускается использование для переноса строки комментария вида:
    <td>
    <img src="" alt="" /><!--
    --></td>
  • Outlook 2007 иногда не ресайзит растянутые картинки. Надо использовать картинки один к одному как указано в макете;
  • Иногда бывают в Outlook 2007, когда картинка, помещённая внутрь какого-то td, у которого задан colspan или rowspan, обрезается вдоль продолжения линии границы соседних ячеек, которые объединяет colspan или rowspan. В этом случае отображается часть целого изображения-картинки. Проблема не решалась без разрезания объединённой ячейки на несколько одиночных и дробления проблемной картинки на несколько частей, каждая из которых занимала бы одну простую ячейку таблицы;
  • На некоторых инсталляциях Outlook письмо без переносов строк начинает корежить очень странным образом. Можно делать без переносов отдельные таблицы, но очень длинных строк надо избегать;
  • В The Bat! при использовании прозрачных гифов прозрачные точки заменяются чёрными.Поэтому «прозрачные» распорки должны заполняться цветом фона, на котором они расположены


Когда я упоминаю название какого то хостера почты, то имеется в виду его веб-интерфейс, а не POP/IMAP

Второй пункт из этого списка более обстоятельно описан в топике «10 рекомендаций по html-верстке электронных писем»
Туговиков Станислав @latrekc
карма
31,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (77)

  • 0
    Полезно. Спасибо.
    • +6
      наиболее показательное «спасибо», это более 200 добавлений в избранное )
      • –2
        уже 393 )
  • +3
    Уже была похожая подборочка: habrahabr.ru/blogs/webdev/60420/
    • +2
      спасибо. поставил на этот топик ссылку в тексте
  • 0
    Спасибо большое за хак для картинке в Gmail — очень помогло.
    Делал шаблон рассылки для «Бигуди шоу» и была проблема стыковки двух картинок, думал, что с версткой что-то не так. Оказывается грабли в Gmail'е были.
  • +2
    Как это относится к блогу «Спам (и антиспам)»?
    • +12
      Так ведь спамеру это тоже будет полезно!
      • +9
        Аккуратненький спам куда больше радует душу и глаз, чем неаккуратный с неопнятными циферками)
    • +1
      перенес
  • +3
    Полезная сравнительная таблица для популярных почтовиков www.campaignmonitor.com/css/
    • –1
      Эти почтовики популярны где угодно, но только не у нас)
    • –1
      Добавил в закладки, спасибо.
  • +3
    Не нашел про цвет фона vs. цвет текста.
    Очень часто люди жестко устанавливают цвет письма и забывают про установку цвета фона. И у людей типа меня, у которых по дефолту белый текст на черном фоне, получается совершено нечитаемый текст. Негры ночью крадут уголь. Кстати этой проблемой болеют и очень большие компании типа асуса.
    • +11
      Эта проблема свойственна не только HTML письмам, но и обычным сайтам
      Лечится это только принудительной сменой цвета фона на салатовый в браузерах верстальщиков
  • +3
    Я смотрю никто не придерживается стандартов, поэтому и такой бардак.
    Я понимаю, безопасность, но не до такой степени, чтобы игнорировать стандарты.
    • –1
      Конечно, не до такой же степени. Кому нужна эта безопасность. Лучше пусть запустится какой нибудь эксплойт чем картинка неправильно отобразится.
      • +4
        Если придерживаться стандартов безопасности и верстки, эксплойт не запустится, а вот картинку ты посмотришь :)
        Согласитесь, то что сейчас — это бардак, причем я подозреваю пробои все равно есть.
        • –1
          Разумеется 100% безопасность недостижима. Но это не значит что надо её игнорировать ради соблюдения стандартов верстки. Безопасность — компромис. Для почтовых систем закрытие ничтожной вероятности уязвимости, гораздо важнее чем правильное отображение навороченных писем. И для меня тоже, я буду выбирать именно безопасного почтового клиента, а не того в котором картинки красиво показываются. Собственно в моем почтовом клиенте по умолчанию вообще не отображаются картинки и разумеется съезжает верстка. И у меня к этому никаких притензий.
          • –2
            Поставьте сторонний os движок отображения верстки (для малых проектов — выход).

            Я понимаю, что в картинке можно подложить свинью, но есть много методов проверки картинка это или эксплойт.

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

            Вообще большим организациям, надо соблюдать стандарты и спецификации, иначе это просто не уважение к пользователям.
            Вам нравится когда вас не уважают (мягко говоря) ;)?
            • –1
              «есть много методов проверки картинка это или эксплойт» классно. Интересно почему бы их не использовать и не обезопаситься навсегда от эксплойтов?

              Мне не нравятся стандарты ради стандартов.
              • –1
                Это не стандарты ради стандартов.
                Стандарты придумали не для этого.

                Кстати стандарты и придумали для безопасности в первую очередь. Вы просто или меня не поняли или вам нудно от них.
                • 0
                  Нет, я понял. Вы знаете какие то универсальные методы проверки является ли картинка эксплойтом :)

                  Мне не нудно, мне скорее неприятно позиционирование стандартов отображения картинок в почте, выше чем требований безопасности в вашем исходном сообщении.
                  • –1
                    Вы программист, должны знать, что есть, если бы не было, не было бы не граф редакторов, ни просмотрщиков и т.п.

                  • –1
                    Универсальный метод — сделать ресайз картинки или изменение качества. Сами знаете, что при этом будет с эксплойтом, а с картинкой ничего не случится.
                    • +1
                      Ну началось. Тот кто минус поставил — аргументируйте его.
                      Потому, что другие люди будут думать, что это не метод.
                      Минус без причины — признак дурачины.
                      Или кто-то хочет сказать, что уменьшив качество картинки, с кодом эксплойта ничего не случится?
                      Или картинка при этом будет другая?
                      Ну, аргументируйте.
                      • 0
                        В большинстве случаев ваш вариант будет работать очень хорошо. Но любое DKIM подписанно письмо не будет проходить проверку или с S/MIME подписью т.к. контент был изменен.
                        Это если мы говорим о том случае когда картинка изменяться прежде чем попадет к получателю т.е. гдето здесь MUA->MTA->(body change)MTA->MUA.
                        • +1
                          А мы и говорим о web интерфейсах в первую очередь, во вторую, при получении юзера почтовиком. Или при отправлении — сразу изменять, при создании письма. Это уже другой алгоритм.
                          Меня спросили — про проверку картинки на эксплойт ;)
                          Этот метод универсален, правда есть недостаток — ресурсоемкость на больших проектах. При них тоже есть алгоритмы определения, я просто предложил самый простой и универсальный.
                          Я вообще не понимаю (не к вам) — это опять тролль завелся? Все мои комменты- минусуют, причем везде, в не зависимости от контента.
  • 0
    в мемориз
    сам верстал довольно много макетов, намучился
    • 0
      Да, работа проведена кропотливо и долго. Спасибо за топик.
  • +1
    стоило еще рассказать про lotus notes, так как куча корпоративных клиентов сидит именно на нем.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Ещё бы кто-нить объяснил, почему вдруг яндекс втыкает переносы строк в заголовках, в результате чего получатель видит абракадабру. Причем как раз при строках длиной макс 70 символов и сабжем, разбитым на несколько строк, а вот если ограничение убрать — вроде всё ок.
      • 0
        А можете привести пример, когда так сработало? Интересно разобраться. Он втыкает при отправке через себя или при получении?
  • +1
    Какая у вас замечательная коллекция граблей. Спасибо.
  • +1
    Обожаю программировать сервисы связанные с рассылкой и разбором почты. Обожаю почтовые протоколы как таковые и в особенности каждого мейл-агента со всей их отсебятиной обожаю. Веселое это дело. Веселее браузерных граблей.
  • 0
    Это объясняет, почему так часто встречаются рассылки ввиде нарезки из картинок-ссылок вообще без верстки. :)
  • +13
    HTML письма должны умереть.
  • 0
    По опыту верстки писем, самое слабое звено — аутлук 2007. У него вордовский движек.
    Предложил дизайнерам рисовать макеты писем в ворде, обещал сделать все что они смогут там нарисовать:)))
    • 0
      двИжек, крЮчек, дЕвченки, да? :)
  • +1
    А если у клиента (как у меня) по дефолту стоит не отображать HTML? Какие предложение вы внесете?
    • 0
      Обычно такие письма высылаются в html и в plaintext, и человеку показывается письмо в соответствии с его настройками.
      Кстати, об этом есть упоминание в топике:
      В текстовой версии нельзя использовать html entities, потому что это текстовая версия, а не HTML. Также, в текстовой версии нельзя использовать unicode символы, которых нет в windows-1251, т.к. mail.ru зачем то перекодирует письмо в эту кодировку;
  • +2
    > В Gmail если у картинки, которая является единственной в ячейке таблицы, появляется 3px отступ снизу, его можно устранить, указав style=«display:block» этой картинке;

    Ну еще бы, строчный элемент, выравнивается видимо по базовой линии, это скорее не особенность Gmail, а особенность HTML.

    • 0
      Подтверждаю, отступ появляется не только в Gmail.
      Только что столкнулся с тем же отступом в Outlook Express 6.
  • 0
    Интересно, учитывают ли эти нюансы сервисы массовых рассылок вроде MailChimp и сотоварищи?
  • +3
    • +1
      «Джеффри Зелдман не работал во внутренних коммуникациях» ©
      • 0
        «Внутренние комуникации» — это такое гиблое место, где на комп. установлен только Outlook Express, а все приложения к письмам (Word,pdf,jpg) убиваются фаерволом?
        Если так, то воистину «Джеффри Зелдман не работал во внутренних коммуникациях»
        • 0
          Нет, это такое гиблое место, где принято думать о том, как эффективно (и красиво) подать получателю большие объемы важной информации.
          • 0
            >где принято думать
            Тогда там не занимаются версткой в мыле и читают Зельдмана.
  • 0
    Вот поэтому я и пользуюсь ThunderBird, который корректно показывает HTML-письма :)
    • 0
      Он не позволяет использовать HTML-формы в письмах.
      https://bugzilla.mozilla.org/show_bug.cgi?id=542325

      Главное, фикс на одну строчку, но всем мейнтейнерам пофиг, с января баг открыт.
      • 0
        не знал этой особенности, спасибо.

        для меня HTML-письма это в первую очередь не сабмиты, а внешний вид писем
  • +1
    Вы все еще отправляете письма в HTML? Тогда мы идем к вам. (с) ваш plain-text
    • 0
      Нет на вас юзабилистов… Попробуйте отправить по сотрудникам крупной компании информационный дайджест за две недели (10-15 новостей) в plain text — и посмотрите сколько из них прочитаю его дальше поля Subject.
      • +1
        А смысл его слать в теле письма? Шлите его нормально в PDF, не издевайтесь. Вот мне еженедельно почти приходит дайджест от MS — поубивал бы на хрен тех, кто решил это впихнуть в письмо.
        • +1
          Спасибо за совет, как-то не приходило это в голову… В этом есть свою плюсы, подумаю теперь есть ли минусы.
          • +1
            В этом есть минусы, во многих случаях pdf будет излишне громоздок с точки зрения времени просмотра. Тут нужен баланс. Но я уверен, что в 99% случаев можно обойтись без html-почты, тем более ничего кроме головняка обеим сторонам это не несет. И, да, в этом виноваты онлайн и оффлайн почтовые клиенты в том числе.

            Вот так, к примеру, выглядит половина корреспонденции от MS в моем оффлайн клиенте.
            • 0
              Ну у меня немного попроще ситуация — я ориентируюсь исключительно на получателей с корпоративным Outlook 2007. Поэтому даже довольно сложный дизайн нашего новостного дайджеста получается передать на 100%. А для рутинных писем-рассылок мы используем сверстанный в Word HTML с минимумом графики и разметки, что тоже упрощает жизнь.
              • 0
                Расскажите про свою ЦА. Откуда уверенность в наличие корпоративного Outlook и именно 2007 версии? Я знаю достаточно много крупных компаний (100+), который используют TheBat / GMail.com / Thunderbird (редко). В целом же да, инфраструктура Windows в компании — практически гарантия использования Outlook.
                • 0
                  У нас в компании на всех рабочих ПК стоит единый образ ОС с единым и одновременно обновляемым дистрибутивом Office. Если кто-то предпрочитает пользоваться сторонним ПО — это его дело и его риск получать внутренние коммуникации в перекошенном виде, в таком случае (хоть я и тестировал свои шаблоны писем в разных клиентах — везде в целом все хорошо).
              • 0
                Может быть, если вы точно знаете что находится на машинах вашей ЦА (а это, как я понял, свежая платформа MS) использовать XPS, к примеру? Ниже вы писали, что PDF громоздок (на самом деле для 1.5 страниц, пожалуй, будет не лучший вариант), возможно XPS сможет заменить его полноценно.

                Какого рода контент? Мне действительно интересно, возможно, я не прав в столь категоричном своем отношении к html-письмам в ряде случаев.
                • 0
                  Контент — картинка 800 на 200 в хедере, 6-8 картинок 145 на 110 в дайджесте новостной ленты, несколько килобайт текста с выдержками новостей и ссылками на полные версии текстов на внутреннем сайте. У меня все заверстано в тупую таблицу, вообще без CSS. Вот, собственно, как выглядит последняя рассылка:

        • +1
          PDF долго открывается, а html показывается сразу любой программой и веб-интерфейсом. Если нужно переслать документацию, результаты исследования, отчет или еще что-то большое — конечно PDF хороший вариант. Но рассылать в нем ежедневные новости или предложения — нереально, это не будут читать.
          • 0
            Постойте, но мы живем в 2010 году. То что кто-то шлет ежедневные новости в виде гигантского html-контента с помощью электропочты — это понятно. Но нужно ли это в таком виде на самом деле? В чем соль? И это все еще происходит в век, когда популярен RSS, доступен Интернет & etc. Конечно html показывается быстро, но для «крупной» информации есть браузер и контент на сайте, мелкие новости спокойно усваиваются plaint-text'ом.

            И, да, plain-text тоже можно оформить читаемо, чтобы не возникало жаления просить читать сразу же после заголовка.
          • 0
            Нет, речь идет о рассылке раз в две недели. Информации там — примерно на полтора листа А4.

            Попробовал перевести это в PDF — получилось вполне прилично. Но вы правы — открывается медленно. Я попробовал на трех обычных рабочих компьютерах, которые используются у нас в компании, такой документ в PDF открывается до 15 секунд, что чертовски долго для современного пользователя.
  • +4
    Любители заверстать все в один gif смотрят на этот пост с недоумением :-)
  • +1
    При тестировании HTML в Windows Live обнаружил, что не работают ссылки с якорем #comment
  • 0
    В Outlook есть еще такой занятный параметр у тега — NOSEND. Он нужен для того, чтобы получателю письма приходило письмо без картинок, а картинки он мог по желанию подгрузить с сервера через контекстное меню. Пример:

    <img src="внутренний_сервер_картинок/img1.jpg" width="145" height="110" NOSEND="1" />

    Еще недавно этот прием у меня работал на ура, когда нужно было уместить в узкий лимит письмо с картинками общим объемом 150-200 Кб. Но пару месяцев назад работать перестало — картинки все равно шлются вставленными в тело письма.

    Может кто-нибудь знает что с этим делать и как вернуть счастье?
    • 0
      И вот представьте, в силу какого-либо рода обстоятельств (настройки почтового клиента, брандмауэра или еще сотни вариантов) у человека получившего письмо картинки не подгрузились с внешнего источника. Как это выглядит? А отсюда уже идет масса казусов.
      • 0
        Опять же, как писал выше, мои получатели все сидят на одном и том же клиенте с едиными настройками по-умолчанию и за одним и тем же корпоративным фаерволлом. Когда я однажды открыл для себя NOSEND — это было событие дня для меня, потому что реально сделало задачу проще в три раза. А теперь счастье ушло… Наверное снова закрутили гайки безопасности. Или тоже подумали о совместимости клиентов, как вы говорите.
        • 0
          Понял, теперь ясно что значит «внутренний_сервер_картинок», мои извинения, не усмотрел частный случай.
  • +7
    Кто почтовые дизайны верстал, тот в цирке не смеется.
  • 0
    Еще фееричный момент mail.ru:
    сочетание ">0<" заменяется на полный текст письма. Правится заменой на "> 0 <".
    Пример: «Скидка: 0 руб.» в интерфейсе mail.ru отображается как
    «Скидка: Скидка: 0 руб. руб.»
  • 0
    Тут просто необходимо вспомнить Email Standards Project. Цель этого проекта — улучшить поддержку веб-стандартов при верстке HTML-писем. Там, в частности, содержатся рекомендации по верстке писем и информация о поддержке HTML и CSS разными почтовыми сервисами и клиентами.
  • 0
    «Чтобы в IE6 внизу картинок не отображался 3px отступ, надо, чтобы между тегом картинки и тегом закрытия ячейки не было пробельных символов (при этом допускается использование для переноса строки комментария вида:
    <td> <img src="" alt="" /><!-- --></td>»
    Можно инлайном прописать line-height:0, тоже помагает решить проблему с 3px

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