Пользователь
0,0
рейтинг
25 мая 2009 в 21:40

Разработка → 10 рекомендаций по html-верстке электронных писем

Рекомендация первая: забудьте про блочную верстку. Весь лэйаут должен быть на таблицах. При этом, без крайней необходимости — их тоже лучше не использовать. Также следует выкинуть из головы представления о семантике, сокращенных css-правилах, валидации, плавающих блоках — и прочее. Самый распространенный в РФ почтовый сервис на данный момент (mail.ru) вообще не понимает стили (css). Любые тэги/атрибуты style заменяются на xstyle и не работают. Вообще все.

Так что, фактически, при вёрстке html для почтовой рассылки надо мысленно переместиться в 90-ые годы прошлого века и смело использовать все распространенные приёмы того времени.

Для тех, кто с ними не знаком (как я был) — напомню:

1) layout


ещё раз — лэйаут на таблицах (никакого позиционирования средствами css, никаких float'ов, clear'ов и пр.), причём, mail.ru автоматически добавляет довольно внушительные padding'и для всех td, это также надо учитывать (например, если одна картинка порезана на куски и распихана по разным ячейкам — добиться их бесшовного соединения будет невозомжно)… но, хвала богам, мы можем использовать класс из стилей самого mail.ru, обнуляющий паддинги, он так и называется — pad_null! спасибо, rybyakov!;

2) css


для тех случаев, когда стили всё-таки будут поняты — существует ещё одно ограничение: все стили должны быть инлайновыми (т.е. находиться в атрибутах style):
<div style="...">...</div>


3) padding-left, padding-right


горизонтальные отступы, по идее, делались в былые времена при помощи дополнительных ячеек таблицы… однако! нормальные веб-сервисы (типа gmail, yandex и rambler) не поймут любимой многими в прошлом конструкции:
<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td width="10" nowrap></td>
    <td width="100%"></td>
    <td width="10" nowrap></td>
  </tr>
</table>


серединная ячейка растянется на все 100% (несмотря на nowrap), а левая и правая ячейки — исчезнут (т.е. их ширина будет равна нулю), поэтому горизонтальные отступы «придётся» задавать при помощи css (а для сочетания «mail.ru + резиновый дизайн», видимо, вариантов нет — только фиксированные размеры всех ячеек);

была мысль использовать для создания левого отступа средствами чистого html соответствующий тэг, имеющий левый отступ «по умолчанию» — dd… однако! outlook 2007, осуществляющий рендеринг html-страниц при помощи движка от microsoft office word (!), начинает при этом страшно глючить, так что вариант отпадает;


4) padding-top, padding-bottom


для создания вертикальных отступов надо использовать, как ни странно — картинки (!), т.е., действительно, сделать «пустую» картинку (лучше не 1×1, а хотя бы 10×10, чтобы письмо не оказалось вдруг в папке со спамом) и путём задания для неё нужной высоты формировать соответствующий отступ (также мы помещаем картинку в div, понятно, думаю, зачем):
<div><img src="padding.png" alt="" border="0" height="10"></div>

следует помнить, что единицы измерения (px) в значении атрибута не указываются — в соответствии со стандартами (спасибо, alemiks);

5) font


чтобы поменять гарнитуру/размер/цвет шрифта придётся каждый раз задавать ВСЕ эти параметры при помощи архаичного тэга font (каждый раз — вообще для любого текста внутри любых блочных тэгов и все):
<font face="tahoma,sans-serif" color="#000000" size="2">текст ссылки</font>

если нужно поменять цвет ссылки, тэг font располагается внутри a;

6) ссылки


ещё по ссылкам — следует не забывать добавлять атрибут target (да-да, невалидный) со значением _blank (чтобы ваш сайт не пытался открыться прямо в окне почтового клиента) и если вы привыкли ставить «до поры до времени» в пустые ссылки решетку (#), не удивляйтесь, что gmail и yandex такие ссылки за ссылки не посчитают — проще говоря, лучше сразу задавать реальные адреса;

7) цвета


для того, чтобы сделать прямоугольный блок с текстом, залитый каким-нибудь фоновым цветом, придётся делать таблицу, в ней строку, в ней ячейку и для ячейки — атрибут bgcolor, больше вариантов нет… кроме того, при задании любого цвета в шестнадцатеричном формате нельзя использовать сокращенную запись (например, #FFF вместо #FFFFFF) — заданный таким образом цвет автоматически трансформируется в чёрный;

8) картинки в тексте


несмотря на то, что в любом самоучителе по html тех самых прекрасных времён рассказывалось, как можно сделать обтекание текста вокруг картинки (без всякого css) — при помощи атрибутов тэга img, а именно align, vspace и hspace — воспользоваться этим нам тоже нельзя :) некоторые почтовые клиенты (и среди них, например, the bat) эти атрибуты проигнорируют, при этом, float:left будет работать в них также криво (или не работать вообще) — вывод: опять спасаемся таблицами;

9) картинки в оформлении


т.к. в background адреса картинок мы прописывать, фактически, не можем — все оформительские рисунки придётся включать при помощи тэга img и лучше обнулить межстрочный интервал, чтобы предотвратить возникновение нежелательных (и непонятных) отступов в том же the bat:
<div style="line-height:0;"><img src="border.png" alt=""></div>

и знайте, что прозрачные картинки (даже gif'ы) the bat заливает чёрным;

10) программы и инструментарий


… точнее его отсутствие — для тестирования рассылки я, к моему сожалению (и удивлению), ничего лучше outlook express не нашёл — он позволяет легко создавать html-письма на основе шаблона (Сообщение → Создать с использованием → Выбор бланка...), но буду благодарен хабрасообществу за советы по этой части… да и вообще по всем :)




Статья моя — первая. Т.е. первая моя статья на Хабрахабре, но, конечно, не первое исследование в этой области, полезные ссылки — вот:



А то, что я написал, на роль исследования не претендует, но всё подкреплено личным опытом. Любые мнения и дополнения, как я уже сказал, приветствуются.

PS: если кого-то заинтересуют точные (и современные) данные по отдельным почтовым клиентам и веб-сервисам — могу продолжить в дальнейших публикациях.
Aralot @Aralot
карма
35,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • +108
    Первое правило верстки писем в HTML — не пишите письма в HTML.
    • +7
      честно говоря, сам никогда в жизни не писал :) (поэтому и возникло столько неожиданных трудностей)

      а вот для корпоративной рассылки — понадобилось
    • +2
      Речь идет не об обычных письмах, а о «рассылках». Такой «спам» подразумевает картинки и более-менее оформленный текст.
    • +2
      когда-то пришлось по требованию заказчика отправлять письмо с подтверждением заказа в виде красиво оформленного HTML письма с картинками. намучался я тогда очень много, пока не добился адекватного отображения этого письма в почтовых клиентах и в вебовых почтовых ящиках.
      желание заказчика — закон
      • –1
        А если заказчик пожелает рассылать по почте файло по 100 мегабайт? Тоже под козырек возьмете, или все же обнаружите в себе специалиста, и попробуете разъяснить заказчику, в чем именно он не прав?
        • +4
          Года через четыре эта фраза будет звучать так же, как сейчас прозвучала бы «а может вы в письме историю переписки не удаляете и еще аттачи по 500 кБ прикладываете? „
          • 0
            Нет, через четыре года так еще не будут делать.
            • 0
              Даже через шесть лет…
        • 0
          У меня заказчик рассылает по 5-6 тыс. писем, в каждое письмо кладет картиночку в жпеге весом 200 — 300 кб (подсчитать объем трафика можете?), а в картиночках почти сплошной текст.
          Я им уже 150 раз говорил, чтоб делали картиночку в гифе, не а, не понимают :(

          ЗЫ. спамом не занимаюсь. все по подписке.
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Вы пробовали? В RFC на относительные URL`ы говорится ясно: для multipart/* частей базовый URL — это сам контейнер, т.е. //host/path в них работать не должен. Только с указанием схемы. А Болк писал про https:/http: URLы.

          P.S. Впрочем, в рассылках, ориентированных на web-мэйлы, это, возможно, сработает. Но идея вставлять ссылки на картинок вместо самих картинок — плоха.
          • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Почему?
      • 0
        Полно ответов в комментариях.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    следует помнить, что единицы измерения (px) в значении атрибута лучше не указывать — почему-то почтовым клиентам это не нравится

    Может потому, что по стандартам px не указывается?
    • 0
      ваша правда, сейчас поправлю в тексте…
  • +17
    11) Если делаете письмо в HTML, то обязательно(!!!) шлите вместе с ним письмо в тексте.
  • –4
    о ужас. оказывается, когда я верстал письмо для рассылки в хтмл, я сделал почти все неправильно. хотя при этом письмо корректно отображалось в аутлуке.
  • +2
    по поводу 3 пункта — вообще-то в былые времена в правую и левую колонки вставлялись 1-пиксельные прозрачные гифы, а ширина (или высота) изображения делалась равной 10, иначе все и так сбивалось обычно (как в пункте 4).

  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      идеологически я с вами согласен, но…
  • 0
    На счёт картинок в письме. Как известно они часто режутся почтовиком (если ссылки внешние), а без них письмо обычно очень страшное. Так что их лучше кодировать в base64 и отправлять в самом письме. В таком случае они нормально открываются. Только это большой гемморой.

    Виидел спорный, но интересный вариант решения этой проблемы. На серверной стороне по запросу к скрипту генерится картинка. Всё письмо соответственно представляет из себя одну эту картинку и ссылк в духе «Нажмите, если письмо отображается некорректно». Главный плюс в том, что можно не заморачиваться с вёрсткой и с помощью графической библиотеки скриптом на сервере накидать поверх картинки-шаблона текст. Кстати, ссылки можно делать как map на картинку. В целом получается неплохо. Для сайтов с малой и средней нагрузкой вариант достаточно привлекательный.
    • 0
      ну это уже дело программистов — как на сервере это письмо генерировать, чтобы картинки показывались… вроде как у нас как раз в base64 кодируется :)
      • +1
        Ну это смотря чем вы занимаетесь. Если просто верстаете основной шаблон, то это действительно не ваша проблема.

        Программистам же могу посоветовать почитать что-то типа этого: www.spravkaweb.ru/php/sovet/mail/image
        Коротко и корявенько, но по делу. Суть в том, чтобы пришивать файл к самому письму, а в аттрибуте src тега img cid-идентификатор. Суть в том, что т.к. такая картинка не берётся из внешнего источника она скорее всего не будет порезана почтовиком как возможно небезопасная. Так что письмо сразу отразится по-человечески.
        • 0
          Вот здесь достаточное количество информации по письмам. Делали рассылку с вложенными изображениями, работает нормально, только на mail.ru отображается немного иначе, на остальных сервисах и в почтовиках отображается как и задумывалось. На mail'е добавляются только отступы большие, в остальном письмо такое же…
          • 0
            возможно отступы у вас были вот в связи с чем:

            на mail'е добаляются отступы из-за табов в структурированом коде.

            тоесть если в коде было:

            <table>
               <tr>
                  <td>
                     какая-то фигня
                  </td>
               </tr>
            </table>

            то при просмотре письма в веб-интерфейсе будут отступы.

            А если в коде будет:

            <table>
            <tr>
            <td>
            какая-то фигня
            </td>
            </tr>
            </table>

            то отступов не будет
            • 0
              насколько я понял, отступы там добавляются попросту из-за перекрывания стилей — попробуйте посмотреть фаербагом
            • 0
              Да не, с табами всё нормально
              В изначальном шаблоне письма они есть, но зачем их слать в письмах :) шаблон обрабатывается и лишнее всё удаляется при формировании письма. Отступы появляются из-за мэйловских стилей…
        • 0
          Да, так и есть, сделал только что.
          Спасибо!
  • –1
    Для меня тема весьма актуальна, так что буду рад новым публикациям, спасибо за эту.
    Изучил приведенные в конце поста ссылки, увидел, что сервис по рассылкам получает статистику об открытых, forwarded и даже помеченных как спам письмах из рассылки — как они это делают? На ум приходит только картинка-счетчик и сбор авто ответов о прочтении (), но эти цифры не дадут точной картины… А уж forwarded и помеченные как спам… Просветите меня, а?
  • +9
    Мы для себя установили правило: письма — только в plain text. Даже редкие рассылки.
  • –4
    есть мнение, что в письмах нужно посылать гипертекст, а не вэб-страницы…
  • 0
    Реально 90-е. А в чем интересно проблема, поддерживать стиль, css?
    Кстати Mail Apple читал css вложенную.
    • 0
      Web-интерфейсы многих почтовых сервисов режут стили.
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Для веб-интерфейсов почтовых сервисов существует такая штука, как фрейм, исключающая конфликты стилей письма и обвязки веб-интерфейса.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Скрипты перед отображением в рамках фрейма, разумеется, следует удалять; задача банальная.
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Код письма перед отображением можно отфильтровать как угодно, вырезав из него что угодно и заменив на что угодно.
                • НЛО прилетело и опубликовало эту надпись здесь
                  • 0
                    В каком фрейме? Во фрейм выводится то, что посчитает нужным вывести программист веб-интерфейса. Никакого JS там не будет, а всем ссылкам в письме можно автоматически проставить какой угодно target.
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • 0
                        Или я вас не вполне понимаю, или вы не вполне понимаете, о чём говорите.
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • 0
                            фрейм, как не ухищрайся, может содержать в себе потенциальный риск
                            Жесть.
                        • 0
                          Вы, видимо, ещё ни разу не сталкивались лично с другой расшифровкой аббревиатуры CSS: XSS.

                          Поясните, каким образом вы собираетесь создавать фрейм? iframe?
                          • 0
                            Фрейм или не фрейм, в плане безопасности в рамках веб-интерфейса почты не играет никакой роли: и страница, и фрейм, в неё включённый, генерируются средствами одного и того же сайта, и код их сколь угодно безопасен вследствие сколь угодно строгой фильтрации исходного кода письма.
                            • 0
                              Сколь угодно строгая — это отключение большинства стилей вообще для предотвращения фишинга? Так об этом и тред.

                              Но вот в том, что скрипты легко обрезать, не обрезая при этом кучу сторонней функциональности, вы не правы, мне кажется.
                              • 0
                                Речь в ветке только и именно о том, чтобы сохранить стили и не провоцировать применение нарочитого old-school-HTML в HTML-письмах.

                                Фрейм нужен только для исключения конфликтов со стилями «обвязки» веб-интерфейса почты. Скрипты (элементы script и обработчики в атрибутах) вырезаем (с использованием DOM-парсера задача простейшая). По-прежнему что-то неясно? ;-)
    • 0
      А в чем интересно проблема, поддерживать стиль, css?

      • 0
        (Хм. Продолжение:)
        В горе-программистах, пишущих почтовые сервисы.
  • НЛО прилетело и опубликовало эту надпись здесь
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Что-то в последнее время мне попадаются почтовые клиенты, которые как один скрывают картинки, загружающиеся с удаленных серверов. Так что если сообщение важно, то лучше его внедрить в сообщение как отдельную секцию.
  • –8
    Ужас просто! Все кто выводит эти «советы» на главную, подумайте головой, блин.

    Если какой то UA не поддерживает CSS, но и не надо фигню всякую писать в HTML! Не вашего ума дело, почему у меня в МОЕМ клиенте отключены стили. Я так сделал специально, и ваши позорные рассылки идут туда, куда им и дорога- в спам.

    Как раз для ситуаций подобных mail.ru (неправильная трактовка HTML в письмах) люди и придумали стандарты. Это mail.ru должны решать проблемы с некорректным отображением HTML, а не вы. Вы просто делайте по стандартам, не тратьте свое время попусту.
    • 0
      сказали бы вы это заказчику
      • 0
        Именно это я и говорил своему шефу. Ничего страшного не случилось, а мой авторитет лишь только вырос. Надо хотя бы попробовать сказать.
        • 0
          А статистику по читаемости расылки у клиентов собирали?
        • 0
          Речь не про шефа, а про заказчика. Заказчику говорили? Он после этого не пожал плечами и не пошёл к другому подрядчику, который не встаёт в позу, не говорит — «а пусть эту проблему решают мейл.ру и гымейл.ком», а просто делает то, что требуется? :)
    • 0
      Да бы избежать всяких наездов не в тему. Да, у меня большой опыт создания верстки как для сайтов так и для писем. Из всех «советов» использовал только таблички для создания layout. Да и то только потому что шеф был непробиваем в этом вопросе полностью.
    • 0
      так я и подозревал, что будут такие гневные комментарии, т.к. им оказался ваш — вам и отвечу :)

      а) я руками и ногами ЗА веб-стандарты;
      б) в данном случае, статья — просто попытка облегчить жизнь тем, кто столкнулся вдруг с такой задачей;
      в) с другой стороны:
      — посмотрите на буржуйские интернеты: все рассылки приходят в формате HTML (причём, обильно сдобренные css'ом, видимо, динозавров типа mail.ru там не осталось);
      — думаю, всем понятно, что красиво оформленное письмо «продаст» эффективнее и лучше (я не спам сейчас имею ввиду)
      — это я не с потолка взял, а наткнулся в процессе гугления на иностранную статью-исследование (сейчас не могу ссылку найти, потом, возможно, повешу).
      • 0
        я как-то запутался и ответил вам на то, что вы не писали :)

        пункты б) и в) — это по поводу plain текста
    • –1
      пральна! двачую)
  • –1
    а зачем семантика в html-письмах?
    • 0
      Затем же зачем и на сайтах. Я извиняюсь но вы мне информацию шлёте в письме или порноспам? Я хочу видеть заголовки, нормального размера текст, а не жалкие потуги неизвестного дизайнера.
      • 0
        надо понимать, что html-письмо это не страница и не все правила для него работают, как уже было сказано выше
        хотя я с вами согласен — лучше слать plain, чем кривой html
  • 0
    У меня во время приёма на работу в одну из контор были именно такое задание. Их и гемору я натерпелся тогда, потому что пришлось верстать практически чистым html
    • 0
      Так работодатели хотели показать, как рационально использовать время своих сотрудников?
      • 0
        Нет. Там проэкт был, который занимается разными дизайнерскими графическими решениями для больших заказчиков типа Philips (было тестовое задание сделать пару очень оптимизированных банеров), KLM ( для них и верстал письмо это) и других крупных предприятий
  • 0
    Письма в HTML — это как обычные письма на ватмане.
  • +2
    Имхо, стоит отграничиться минимальным набором: h1-h6, p, ul, ol, dl, img, a и не пытаться превратить письмо в веб2.0 страницу.
  • 0
    Aralot, а вы, случайно, не в cpeople.ru работаете?
    • 0
      нет, а откуда такие выводы? :)

      (место работы у меня в профиле указано)
      • +1
        Aralot, пардон

        Просто этот пост мне напомнил недавнюю историю.
        Я делал один фриланс и в рамках работы нужно было создать email-рассылку, а дизайн письма делали ребята из вышеупомянутой компании. Так вот они повторяли все пункты описанные в статье :) В начале мне прислали html-шаблон, в котором все сверстано на дивах, после того как я протестировал его и понял, что нужно делать все в таблицах, они переделали в таблицы. Затем ошибка с выносом css в файл (об этом я даже не говорил им, проще было самому включить css в документ) и т.д. по списку в указанном вами порядке :)
        Эта эпопея с переслыкой мне невалидного шаблона длилась недели две, пока терпение мое не кончилось и я набросал для них программу на C# через которую можно было отправлять html-письмо, скопировав код шаблона в поле ввода. Отправил прогу со словами :«Пока не протестируете не прислылайте шаблон». Ребята пропали месяца на два… и вот буквально два дня назад объявились, прислали письмо с протестированным шаблоном :) и тут этот пост…
        Совпадение :)
  • –2
    Гайдлайны для спамеров?
    • +3
      Вы что, те сплошной картинкой шлют )
  • 0
    Отличная тема и спасибо за подробный рассказ про возможные грабли — надеюсь, что другие меньше из-за этого потратят времени.
    Пишите ещё по этой теме — думаю, не только я прочитают с удовольствием.
  • +1
    По п. 3 — задание padding-left, padding-right. В комментариях уже было, я лишь подтверждаю, что в mail.ru работает так:

     <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td><img src="spacer.gif" width="10" height="1"></td>
          <td width="100%"></td>
          <td><img src="spacer.gif" width="10" height="1"></td>
        </tr>
    </table>
    


    По п. 9) картинки в оформлении. Я использую такой смешанный вариант (подходит для mail.ru, yandex, rambler, gmail.com):

    <td background="http://www.moysite.ru/bg.gif" style="background:url(http://www.moysite.ru/bg.gif);">
    <img src="spacer.gif" width="50" height="1">
    </td>
    


    p.s. В почтовых клиентах не проверял, что является упущением, конечно. Было бы интересно узнать статистику, сколько процентов пользователей ими пользуется. Как теперь вижу по комментариям — есть проблемы с отображением внешних изображений в почтовых клиентах.
  • +1
    Пропустил заголовок и думал речь идет о вэб верстке. Сильно испугался. :)
  • –2
    красиво спамим
  • –1
    Разметка в письмах не нужна совсем.
  • 0
    >Самый распространенный почтовый сервис на данный момент (mail.ru)
    Так уж самый распространенный?
    • 0
      Ну а какой еще с ним по популярности сравнится? В России по крайней мере…
      • 0
        Ну так… Автор не писал про РФ а про «Самый распространенный почтовый сервис на данный момент»…
        • 0
          меня самого просто раздражает, когда статья начинается с многочисленных уточнений и «оправданий», вместо того, чтобы побыстрее к сути вопроса перейти — предпочитаю полагаться на здравый смысл читателей…

          впрочем, в данном случае, возможно, вы правы :)
  • –1
    Сейчас занимаюсь вёрсктой для мобильных телефонов (xhtml mp) — та же ерунда, back to 90s.
  • 0
    полезно! спасибо.
  • 0
    «10) программы и инструментарий … точнее его отстутсвие — для тестирования рассылки я, к моему сожалению (и удивлению), ничего лучше outlook express»

    Я когда шаблоны для рассылки верстал, делал сообщение в виде обычного HTML, открыть в Опере или ИЕ и сохранял «как веб-архив», затем менял расширение с mht на msg, а уже msg-файлы замечательно импортируются в почтовые клиенты.
    • 0
      … открывал…
  • +1
    Насчет паддингов на mail.ru, у них есть класс pad_null, если его поставить всем используемым тегам table — паддинги обнуляться.
    Это свойство в css файле mail.ru помечено «для партнерских рассылок»…
    • 0
      только вот как поставить класс, если стили режутся? :)
      • 0
        а вы попробуйте написать так:, увидите сами, это останется не тронутым. На mail.ru вырезается атрибут style (переименовывается в xstyle, как уже писали выше) и вырезается тег
      • +1
        Сорри. атрибут class в тегах не режется, режется тег style, который пишется в шапке HTML и содержит стили для используемых на странице классах. Поэтому использовать классы, которые определены в CSS файлах mail.ru можно, но лично я не нашел в них ничего полезного, кроме pad_null, который обнуляет отступы…
        • 0
          ой, точно, торможу :)

          обязательно попробую, спасибо!
        • 0
          ура, работает! сейчас добавлю в текст статьи :)
          • 0
            пжлста)
  • 0
    Блин, мне аж поплохело.
  • –1
    Почтовики находят текст, похожий на ссылку, и обрамляют его в теги a, прописывают href.
    Есть ли способ запретить это делать?
    • 0
      Мой Nokia Е60 распознает ip-адреса в сообщениях как номер телефона :-0.

      Имхо, лучше хороший (оттипографленный и выверенный) plain, чем корявый html.
  • 0
    Отличная статья, спасибо!

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