0,0
рейтинг
19 января 2011 в 20:08

Разработка → Верстка почтовых рассылок из песочницы tutorial

Привет, Хабр!

В этой статье я бы хотел поделиться своими познаниями в кроссбраузерной и кроссмейлерной верстке почтовых рассылок. Под словом кроссмейлерность подразумевается — корректное отображение верстки во всех почтовых клиентах. Я считаю, что статья вполне актуальна, в виду того, что на хабре эта тема несколько раз освещалась, но некоторые нюансы были неточными, а другие просто устарели. По долгу службы я долгое время занимался версткой html расылок по всему миру, и приведенные ниже правила будут касаться следующих почтовых клиентов и веб-интерфейсов: MS Outlook 2003-2010, mail.ru, rabmler почта, Яндекс почта, Gmail, Yahoo! Mail (Classic), Thunderbird 2.0-3.0, Hotmail, Windows Live Mail, Apple Mail 3-4, AOL Mail, Lotus Notes 8-8.5.

Основа


Блочная верстка? Прийдется об этом забыть. Раз уж мы нацелились на крайне широкую целевую аудиторию подписчиков, возвращаемся к лучшим традициям HTML 3.2, только немного хуже. В качестве "каркаса" нашего письма будет выступать таблица. "Внезапно!", скажете вы? Но это так. Теперь главная особенность, которая касается не только таблиц, а всех элементнов верстки: необходимо обнулять все внешние и внутренние отступы у таблиц, списков, абзацев — вобщем у всего, у чего могут быть отступы. Почему? Все из-за того, что у каждого почтового клиента свой взгляд на то, какие отступы по умолчанию имеют элементы. Но самое печальное то, что некоторые клиенты вовсе игнорируют margin и padding. Казалось бы, делов то — прописываем в head:
<style>
*{
padding:0;
margin:0;
}
</style>

Но и тут не все так просто. Некоторые разработчики почтовиков люди сообразительные, они понимают, что письма нужны для текста, а не для разноцветных рюшечек, и просто напросто отключили поддержку стилей, в приведенной выше конструкции. А это значит, что стили будет необходимо прописыать inline для каждого отдельно взятого элемента. Следовательно у каждой таблицы нужно обнулять атрибуты cellpadding и cellspacing, а так же коллапсировать таблицу. У абзацев и списков обнулять ничего не нужно, потому что мы их не будем использовать, мы будем их имитировать.

Что делать с отступами


Складывается малоприятная картина — мы обнуляем все отступы. Как быть дальше? Тут к нам приходит на помощь blank.gif — тот самый однопиксельный прозрачный .gif, благодаря которому мы и будем строить нашу верстку. Орудовать прийдется этим малым, а так же таблицами и еще раз таблицами. Дальше приведу пример двухколоночной верстки в абзацами и списками.
<table cellpadding="0" cellspacing="0" width="800" align="center" style="border-collapse:collapse;">
<tr>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- эта колонка выступает в роли отступа --> 
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
</table>
</td>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- эта колонка выступает в роли отступа --> 
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
</table>
</td> 
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- эта колонка выступает в роли отступа --> 
</tr> 
</table>

В результате этого кода получается таблица в две колонки. В первой колонке мы видим имитацию абзацев текста, в правой — имитацию списка типа ul. Все отступы в примере выполнены при помощи задания высоты/ширины ячейки таблицы, а также задания ширины/высоты прозрачного однопиксельного изображения. Этот blank дает нам "эффект подпорки", благодаря которому в верстке ничего не поедет.


Форматирование текста


Как уже было сказано, общие стили для всего файла не используются и оформление необходимо задавать inline для каждого отдельного элемента. О теге font нужно забыть вовсе. Причина кроется в том, что перед массовой рассылкой исходный код может попасть в руки коварного визуального редактора, который переломает все font на span, причем на свой лад, что неблагоприятно скажется на картине в целом. Правило с тегом font не критично, но обязательно в большинстве случаев, так как, например, в больших компаниях html-технолог лишь отвечает за конструкцию кода, но никак не за последующее его путешествие к адресату, где по пути нас и поджидают визуальные редакторы сервисов массовой рассылки.
Оформлять текст через атрибут style тега p так же нелогично, так как прийдется обнулять отступы абзаца, в то время как мы решили абзацы имитировать. Поэтому за стилизацию у нас отвечает span и только span. В атрибуте style нашего оформителя мы указываем такие параметры, как: font-family, font-size и color — обязательно в формате #xxxxxx или фактическом, например red. Не все почтовики адекватно воспринимают цвет типа #990, такие конструкции просто игнорируются.
Наклонность, начертание и прочее можно указывать через стили inline, но так же не будет ошибкой воспользоваться такими тегами, как b, i, u. strong и др. — тут разницы нет.


Гиперссылки


Прежде всего о форматировании ссылок. Каждую отдельно взятую ссылку необходимо обернуть в span, указав для него все необходимые стили, и в тоже время продублировать все те же самые стили в атрибут style самой ссылки. Ссылка так же может находиться посреди текста, и для того, чтобы не быть многословным, просто приведу пример того, как нужно оформить ссылку в тексте.
<span style="font-family:Arial; font-size:12px; color:#404040;">Neque porro quisquam est qui</span> <span style="font-family:Arial; font-size:12px; color:#0077c0;"><a style="font-family:Arial; font-size:12px; color:#0077c0;" href="%%url%%">dolorem ipsum quia</a></span> <span style="font-family:Arial; font-size:12px; color:#404040;">dolor sit amet, consectetur, adipisci veli</span>

Для всех ссылок устанавливаем значение _blank атрибута target, мы же не хотим открывать страницы в окне почтовика? Такое наблюдается далеко не везде, но лучше перестраховаться.


Изображения


Об изображениях скажу не много, но это также немаловажно. Для всех изображений необходимо установить ширину и высоту равной фактической. Это можно реализовать через атрибуты width и height, а так же через css в атрибуте style тега img — разницы нет. Искажения в размерах допускать не стоит, т.к. результат может оказаться плачевным для большинства почтовиков.
Хотелось бы заметить, что в том случае, если картинка является ссылкой, то для изображения нужно обнулить border через стили или атрибут border тега img, а для самой ссылки стоит установить text-decoration:none; иначе картинка может оказаться подчеркнутой.


Фон


Фон в виде цвета можно указывать для тела документа, таблицы и ее ячеек в формате #xxxxxx или фактически, например — red. Причина этого объяснялась выше. Фон в виде картинок — табу. Не железное, конечно, но все же рекомендую отказаться. Большинство клиентов и интерфейсов просто это не поддерживают. Тоже самое касается абсолютного позиционирования чего либо, а так же скриптов — забудьте об этом.


Итог


Подведя итоги к вышеописанному можно сказать, что верстка писем будет пострашнее всеми нами обожаемого Internet Explorer 6, хотя тут дело не в танцах с бубном, а скорей в дотошности и терпении. Следовательно если вы действительно любите верстать, вас не напрягает монотонная работа, вы не пренебрегаете внимательностью и соблюдаете приведенные в статье правила, ваши подписчики будут довольны. Удачи в работе и спасибо за внимание!

UPD: В опровержение этого комментария рекомендую к прочтению мой следующий пост.
Артур Кох @dudeonthehorse
карма
72,7
рейтинг 0,0
Email developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

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

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

  • 0
    Великолепная статья. Как раз недавно долго мучился с фоновой картинкой для MS Outlook 2003.
    • +3
      Спасибо!

      В почтовых клиентах фоновые картинки — дохлый номер. В некоторых веб-интерфейсах еще может быть и прокатит, но тут, как говорится, пальцем в небо. Фон для body срабатывает в бОльших случаях, но, как вы понимаете, тут речи о кроссмейлерности быть в принципе не может
    • 0
      У вас получилось?
      У меня получилось задать фоновые картинки в Outlook 2000 и выше через conditional comments и vml:
      snipplr.com/view/64348/applying-background-images-to-table-cells--blog--campaign-monitor/
      • 0
        Я тогда забил.
        Но поздравляю, что получилось. При случае попробую потестить
        • 0
          Спасибо,
          учтите только, что тестировать допустим из thunderbird такие письма у меня не получилось. При вставке html в тело письма громоптица съедает namespace у html и body (хотя думаю не только она). Так что нужно или через сервис тестировать, или через какой-то серверный скрипт отправлять.
      • 0
        А теперь повторите это в the bat! и thunder bird

        Хотя мне кажется это не стоит тех мучений.
        • 0
          В thunderbird 3, это конечно только догадка, подозреваю используется для рендеринга движок firefox или его часть.
          Поэтому там и с css свойствами это было достигнуто.

          Про ранние версии thunderbird и the bat сказать ничего не могу, ни под рукой нет, ни в litmus, ни в рамках моего текущего ТЗ этих почтовиков нет. Но верю конечно, 100% схожести во всех возможных клиентах не добиться.
          И тем не менее Outlook — это ощутимая доля.
  • 0
    Никогда, особо не заморачивался над вёрсткой писем… Стоит задуматься.
  • 0
    Чем бы еще быстро проверять кроссмейлерность?
    • +2
      сервисы отвечающие за массовую рассылку имеют инструментарий для быстрого тестирования.
      • 0
        кстати, не подскажете парочку годных сервисов таких?
  • +8
    На заметку — однопиксельную гифку «хавают» далеко не все почтовые программы, не говоря уже о веб-интерфейсовых сервисах, которые (большинство) просто вырубают картинки по-умолчанию и вся вёрстка, соответственно, ломается.

    Второе — стили. Их тоже не желательно использовать. Многие, особенно мейл.ру и гмейл, очень любят вырубать стили и ставить свои по дефалту.

    Ну и кстати, по тому же мейлру… Попробуйте создать нулевую (с border, padding, spacing — по нулям) табличку и посмотреть в веб-интерфейсе сервиса :) Там будут проставлены для таблиц здоровенные паддинги, от которых можно уберечься, только применив класс самого мейл.ру, который я обнаружил в их стилях — table.pad_null td{padding: 0 0 0 0}. Соответственно, применив данный класс к таблицам — получаем нулевой паддинг и можем спокойно верстать дальше.

    Таких «нюансов» много. Я их выписывал когда-то на своём форуме. Конкретно по вёрстке писем: forum.artof.ru/showthread.php?t=311.
    • +1
      Довольно много слышал о проблемах с mail.ru но по факту с ними не сталкивался. Для рассылки использовал этот сервис и с мэйлом мы жили дружно. Буду работать в этом направлении.

      На заметку — однопиксельную гифку «хавают» далеко не все почтовые программы, не говоря уже о веб-интерфейсовых сервисах, которые (большинство) просто вырубают картинки по-умолчанию и вся вёрстка, соответственно, ломается.
      Абсолютно согласен. Но даже в этом случае считаю, что blank.gif вполне справляется со своей задачей. Без подгрузки картинок любая верстка будет «не фонтан». А если можете отказаться от картинок, не верстайте письма ;) шлите текстовую версию.
      • 0
        Да не в том дело, с однопиксельной-то :) Вот взять к примеру, тот же гмейл. Он же многие письма пишет «картинки, прикрепленные к данному сообщению, были отключены (включить)»… И покааа пользователь додумается, что их включить-то надо для красоты… уже десять раз успеет посмотреть «кривое» письмо и выключить его )))) Как вариант — текст моноширинным текстом с цветом фона. Но это ваще ппц, хотя и решает проблему.
        • 0
          Я понял вас. Не сочтите меня идеалистом, но я считаю, что слать абы кому письма с рюшечками и хохломой не стоит. Красивые сверстанные письма в моем понятии ориентированы скажем на постоянных клиентов компании/сайта, для которых мы передаем послания обрамленные в фирменный стиль нашего сайта/компании. А постоянный подписчик имеет сообразительность включить адрес рассылки в список доверительных, что избавит его от получения кривых писем.

          Создание костылей для ровного отображения без картинк этого граничит с извратом :)
          • +1
            Все веб-разработчики извращенцы по-своему ©
            А вот письма постоянным клиентам… А если это социальный сервис с новостной рассылкой на сто тыщ человек… и тоже ведь имеет место быть дизайн письма. Хотя я за минимализм. Дизайн должен быть простым, не навязчивым и не отвлекать от сути текста. Ведь, в основном, письма нужны, чтобы читать, а не дизайнерской мыслью восхищаться.
            • 0
              Абсолютно с вами согласен.
      • НЛО прилетело и опубликовало эту надпись здесь
        • +1
          Хотя бы то, что я не имел проблем с mail.ru — уже является весомым плюсом.
          Работал с Ultimate версией, оперативный саппорт, отличная детальная статистика, файловый хостинг с сокращалкой ссылок, быстрое тестирование верстки практически по всем перечисленным в статье почтовикам/интерфейсам.
          Из минусов — отдаленность серверов. Порой сказывалось на скорости работы.
        • 0
          mailchimp не юзал
      • 0
        Если говорить о верстке под различное легаси, то надо вспомнить и более древние почтовые клиенты, такие как TheBat или Netscape Messenger, которые имели собственные движки для отображения HTML. Почтовый клиент — это не та программа, которую можно быстро поменять, у некоторых моих знакомых стоят версии 10 летней давности.

        Так как протестировать верстку на всем зоопарке невозможно, то можно использовать 2-3 браузера тех времен, скажем links или arachne. Стили они не поддерживают вообще, а те что поддерживают могут это делать некорректно.

        Я бы рекомендовал заменить style=«height: ___» на просто height="___" у картинок, это поможет такому браузеру как links отображать отступы корректно (все примеры из статьи я проверял на нем), поэтому с «Это можно реализовать через атрибуты width и height, а так же через css в атрибуте style тега img — разницы нет» я не согласен, это же относится и к тегу font вместо span.

        Лучше использовать width и height одновременно, тогда точно не возникнет артефактов загрузки, если картинка внешняя

        Вместо юникодных символов лучше использовать графические изображения, так как links по началу отобразил • как 3 символа из latin1

        Графический фон конечно нельзя, но никто не мешает сгенерировать пару заголовков уже с текстом и вставить в код как обычные картинки. Главное не переусердствовать и не оставить только 1 большую картинку, ибо некоторые почтовики вообще отключают картинки (спасибо спаммерам), в этом случае код письма должен содержать только текстовую версию.

        Кстате, links рисовал уголки у картинки, выглядело это как 1-пиксельные артефакты в размер распорки
        • 0
          у некоторых моих знакомых стоят версии 10 летней давности
          [занудство]А у моих некоторых знакомых до сих пор стоит ie6[/занудство]

          А по делу — вы все верно сказали, если принимать во внимание «ископаемые» почтовики.
      • –1
        А почему не
        <div style="width:20px"> </div>
        вместо blank.gif для отступов?
        <img src="blank.gif" style="width:20px;">
        • 0
          Хотя бы потому, что div — блочный элемент, и ширину для него устанавливать — нелогично. К тому же не вижу смысла мудрить с дивами, раз уж все делается на таблицах. В нашем случае минимум кода — не торт.
          • +1
            Т.е. если верстать таблицами, то использовать div — нелогично? А если верстать блочно, то нелогично использовать таблицы? По-моему чушь. А использовать img для отступов логично?
            Но вопрос не в этом. Каждый может верстать как ему нравится, главное, чтоб это доставляло ему удовольствие, было читабельно, коссбраузерно(в данном случае «кроссмейлерно») и т.д.
            Вопрос в другом — будет ли «кроссмейлерно» использование div вместо img, исходя из вашего опыта?
            • 0
              Не будет. Что такое div? Это блочный элемент. Гипотетически мы могли бы использовать его лишь для задания вертикальных отступов, потому как если мы замахнемся на горизонтальные отступы при помощи того же div, то нам придется лишать его фактической блочности посредством float'ов. А где float'ы, там и clear'ы. Мало того, что это приведет к еще большей сумятице кода, но дополняет картину тот факт, что эти самые float'ы, там и clear'ы так же далеко не всеми интерфейсами/клиентами воспринимаются.
              Ну и наконец, почему же не стоит использовать div с заданной высотой для вертикального отступа: парсер увидев пустой div с заданной высотой подумает — «А на кой этот див нужен? Он же пуст!», даже не обратив внимание на заданную высоту.
              • 0
                Причём тут clear и зачем лишать блочности? Вместо:
                <td style="width:20px;"><img src="blank.gif" style="width:20px;"></td>
                писать
                <td style="width:20px;"><div style="width:20px;"> <div></td>
                и никаких clear.
                А пробел можно заменить &nbsp;
                • 0
                  Я понял вашу мысль. Но вашим примером желаемого не добиться. Вы пытаетесь указать для div ширину в 20px. Но этого просто неправильно, т.к. у блочного элемента по умолчанию ширина равна 100%, и в вашем случае 20px = 100%, следовательно это тоже самое что вставить пустой див без параметров.
                  Я вижу, что вы хотите избавиться от вставки изображений, но blank как раз и обеспечивает нам железные отступы. Сможете привести железно рабочий пример без blank'a — я и еще 300 добавивших в избранное плюсанем вас.
    • 0
      Ваши доводы о мейл.ру немного не актуальны :)
      habrahabr.ru/blogs/css/112307/
      • +1
        Ура)) Я был не вкурсе т.к. уже с полгода не занимался вёрсткой писем. Но новость радостная :) Спасибо :)
  • +1
    Спасибо за статью. Есть несколько полезных моментов.
    Тоже мучался с рассылкой, и в первых вариантах использовал дивы, бекграунд и прочие радости css. Потом пришлось все переделывать в таблицы.
    Но все равно разные почтовые сервисы по разному режут стили. Если в gmail разрешено почти все, то mail.ru (которых большинство в моем списке рассылки) оставляет почти голый html без стилей и верстка разлезается куда попало.
  • +1
    • 0
      Да, я читал эту статью. Но, согласитесь она слегка сумбурна и поверхностна. При этом я не отрицаю факт ее полезности.

      Mail.ru, почты Яндекса и Рамблера вырезают весь css, поэтому верстать надо с помощью HTML3.2;
      Режутся общие стили в head. Инлайновые работают отлично.
      • +2
        Хотел бы отметить прекрасное решение для автоматического инлайна стилей — premailer.dialect.ca/
        Выполнен на руби, исходники есть на гитхабе. Используя подобные вещи, можно верстать письма с помощью CSS и инлайнить стили автоматически перед отправкой письма.
        • 0
          Так же есть еще вот это — inlinestyler.torchboxapps.com/

          Но этот сервис не очень хорошо дружит с переносами строк, так что ваш предпочтительнее.
          • 0
            тогда к чему приведенная ссылка?
            • 0
              К разнообразию. ;)
  • +6
    Хотя опыт верстки таких писем достаточно большой, всегда заглядываю в сравнительную таблицу www.campaignmonitor.com/css/
  • 0
    Не хватает пояснения по вставке рисунков, а так все правильно.
    Все рисунку нужно вставлять в тело письма, т.к. все современные почтовые клиенты в борьбе со спамом секут внешние рисунки типа src=«mysite.ru/blank.gif...».
    Про то как вставлять рисунки, multipart и про src=«cid:blank.gif» я думаю говорить особо не нужно, большинство библиотек это делают уже не криво.
    • 0
      На моей практике не было эксцессов с рисунками типа src=«mysite.ru/blank.gif...»
      Единственное, что могу добавить по этому поводу, количество текста в письме должно сильно превышать количество графики, иначе письмо попадет в спам. Алгоритм вычисления этого остается загадкой, но тестовые рассылки еще никто не отменял.
      • 0
        Картинки через мультипарт и cid: лучше тем, что, например, thundebird при открытии письма спрашивает «подгрузить содержимое со стороннего сайта»? и пока не подгрузишь письмо выглядит криво. А cid: картинки он показывает сразу. Мы используем полностью собственный инструмент для рассылок, там из картинок которые шлются не мультипартом только однопиксельная трекинг-картинка.

        А вот насчет графики и текста — ни разу с таким не сталивался.

        • 0
          Соотношение графики и текста — это уже из области работы алгоритмов спам-фильтров. С удовольствием бы об этом почитал.
          • 0
            ну я имею в виду что например на новый год мы делали рассылку состоящую фактически из 1 картинки- открытки, яндекс/мейл/spamassasin/тандерберд/the bat/outlook ее как спам не определили
            • 0
              А вот это уж странно. Я долго боролся с фильтром gmail и outlook 2003, чтобы пропустил письмо. Прошло после уменьшения картинки 600x400px в 2 раза.
              • 0
                Возможно это из-за того что вы картинки прилагаете через example.com/image.gif а я через cid:image_gif
                • 0
                  Как раз может быть. Но мой сервис не имеет такой возможности. Из популярных сервисов не подскажете поддерживающий подобное?
                  • 0
                    Не знаю, у нас самописное решение для орагнизации рассылок, специально заточненное под наши требования (трекинг переходов и путей по сайту после переходов и еще всякие мелочи :)
  • 0
    Спасибо, хорошая статья.
  • 0
    Могу добавить что MS Outlook 2007 поддерживает «растягивание» картинок, например того-же самого blank.gif, только до определенного размера (на вскидку что-то около 80 пикселей).
    • 0
      Растягивать blank вы можете везде. Я говорил о том, что растягивания неблагоприятно скажутся на визуальных качествах изображения.
  • +2
    Mail.ru — главный враг верстальщиков рассылок. Издеваются над поддержкой тегов и параметров только так. Извините, эмоция захлестнула.

    Статья хорошая очень, спасибо. Хочу добавить о необходимости прогонять весь текст через типограф и дотошном слежении за кавычками.
  • 0
    Спасибо, как раз вовремя пригодилась
  • +2
    Считаю, что в большинстве случаев для писем достаточно plain text.
    В остальных случаях статья будет полезна. =)
    Спасибо!
    • +1
      Согласен. В топку письменный HTML.
      • +1
        повод для холивара ;)
    • +1
      Достаточно, да, но великое и ужасно «хочу» от заказчиков слышали, наверное, все.
      На вскидку, HTML нужен когда необходимо послать письмо о том, что создан заказ в интернет-магазине. К примеру, на Амазоне очень много данных о заказе и форматировать его в plain-text, думаю, было бы безумием.
    • 0
      90% plain text достаточно
      • 0
        Не судите по своим нуждам.
  • –1
    Хорошая статья на тему — http://sdelaisait.com.ua/how-to-code-html-email/
    • 0
      Статья не первой свежести — как никак июнь 2008. То, что она прям хорошая так же не сказал бы, много букв и мало смысла. Некоторые замечания не верны. Расписано как нужно верстать туда, и как туда. Мне кажется подход «так надо верстать для всех клиентов» будет более правильным.
      • 0
        Спасибо, скриншотиков бы еще, с примерами
        • 0
          Я, конечно, понимаю, что «книжки с картинками» куда интереснее, но что тут показывать? Я лишь рассказал о том, как нужно верстать то, что мы уже давно привыкли видеть, и на картинках вы ничего нового не увидите.
  • +1
    Вы не могли бы рассказать, зачем вообще использовать HTML в письмах? Я стараюсь настраивать все клиенты так, чтобы отображался только простой текст, но иногда присылают только HTML. Совершенно не понимаю, какая может быть польза от него. Казалось бы, есть уведомление, подробности по ссылке, что может быть проще. Или ЦА активнее щелкает по цветным ссылкам?
    • 0
      Личное мое мнение — яркие расписные «елки-открытки» падающие в ящик — это ужасно!
      А вот скажем письмо от сайта/компании с логотипом в уголке и выполненное в фирменных цветах(2-3 цвета) — хороший тон и солидность.
  • +2
    Я теоретически знал, что с версткой в письмах всё плохо. Но чтобы НАСТОЛЬКО…
  • 0
    Спасибо, очень полезная и информативная статья. Как раз надо, пойду верстать рассылочку)
  • 0
    Интересно, спасибо!

    Скажите, а вы знаете что-нибудь о белых горизонтальных полосах поверх контента (~20px), которые появляются в длинных письмах в последних аутлуках? Где-то читал что это из-за разбивки письма на «страницы», но так и не справился с этой проблемой…
    • 0
      Не сталкивался с данной проблемой. Стараюсь не делать письмо > 1,5 высоты экрана. Все же не книгу шлем адресату.
  • 0
    Вопрос к знатокам в тему:

    Разбираясь на днях, как устроены рассылки у серьезных людей, наткнулся на весьма необычный код:

    <html>
    <style type="text/css">
    <!--
    body {
      background-color: #4A5767;
    }
    -->
    </style></head>
    <body  background="http://###/bg.jpg" ...


    Это какой-то специальный профессиональный хак, или тупо забыли открыть head?
    И есть ли вообще какие-то специальные хаки
    • 0
      Неоткрытый head — косяк верстальщика, другой причины никак не вижу.

      Хаков как таковых нет. Хотя автор этого каммента говорил об особенностоях mail.ru
  • 0
    По поводу вашего примера в статье. Конкретно в даном случае полагаю было бы проще сделать с отсупами в таком виде:
    • 0
      <table align="center" width="800" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" bgcolor="#cccccc">
      <tr>
      <td>
      <table width="760" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" bgcolor="#000000">
      <tr>
      <td width="370">smth</td>
      <td bgcolor="#cccccc"></td>
      <td width="370">smth</td>
      </tr>
      </table>
      </td>
      </tr>
      </table>
      • 0
        Согласен, это будет работать в большинстве случаев, но не во всех. Парсеры такие разные :)
        Нужно явно указывать все величины и ставить распорки-blank'и
        • 0
          Не могли бы вы уточнить в каких именно системах даная конструкция могла бы не сработать.
          • 0
            Наблюдалось в старых версиях lotus notes и apple mail. Парсер просто вырезал пустые ячейки.
  • 0
    Т.е. получается, что в качестве фона может быть только однотонная заливка?
    Текст поверх изображения исключается вообще?
    • 0
      Да, именно так. В gmail и apple mail это провернуть можно, но из-за остальных клиентов отказ от этой реализации.
    • 0
      Либо это решается текстом в растровой картинке, т.е. нарисованным. Например «Learn more» на баннере в письме.

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