Грабли при верстке 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-верстке электронных писем»
    • +264
    • 82,3k
    • 77
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 77
    • 0
      Полезно. Спасибо.
      • +6
        наиболее показательное «спасибо», это более 200 добавлений в избранное )
    • +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

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