0,0
рейтинг
6 ноября 2012 в 11:24

Разработка → Верстка рассылок — что мы имеем? tutorial

Доброго дня.

Изображение честно позаимствовано с Dribbble.com

Прошло немногим менее два года с момента публикации моего первого топика по теме. Что за это время произошло? Mail.ru, Rambler, Yahoo и Яндекс дружно перелопатили свои почтовые интерфейсы, и как следствие — парсеры писем, что доставило приятных эмоций, т.к. было исправлено много противных багов. Gmail стал поддерживать фоновые изображения. Ну а благодаря развитию рынка мобильных платформ к нам на помощь приходят media queries.

Смысл поста — подытожить методику верстки писем под сегодняшние реалии, при этом не забывая про ископаемые клиенты.

И да, в посте картинок почти нет. За картинками прошу в обзоры css3 фич.

На данный момент занимаюсь версткой писем, скорей как хобби, поэтому времени на тестирование opera mail, sparrow и прочих «вроде как популярных» клиентов не было. Речь пойдет о следующих:

— Все версии MS Outlook
— Mail.ru
— Rambler почта (в новом интерфейсе не исключены баги)
— Яндекс почта
— Gmail
— Yahoo!
— Thunderbird начиная с версии 2.0
— Hotmail
— Windows Live Mail
— Apple Mail начиная с третьей версии
— AOL Mail
— Lotus Notes 8-8.5.
— theBat! дотошно не тестировал, но и нареканий особенно не было


Wrapper(обертка письма)


<table width="600" align="center" bgcolor="#eeeeee" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
// письмо
</td>
</tr>
</table>

При задании фиксированной ширины для таблицы используем атрибут align для необходимого выравнивания. Никаких margin: auto; не пройдет.

Далее задание цвета. Цветовой фон указываем через атрибут bgcolor и в полном шестнадцатиричном формате, не обрезая его до трех символов после решетки. Можно, конечно, задать цвет и с помощью атрибута style, но зачем же отсекать совсем уж древнеюзерские клиенты.

На графический фон я по прежнему настоятельно рекомендую забить. Ведь всегда можно нарисовать макет письма так, чтобы выполнить красивые элементы вставкой тега img в соответствующую ячейку таблицы.

Коллапс лечит пробелы между ячейками в Outlook Express, поэтому указываем это значение для всех таблиц в верстке.

Отступы


Так как хедерные стили по прежнему высекаются многими почтовиками мы используем только инлайновые. Но и тут не все так просто. Про padding и margin забываем.

Cellspacing


Работает крайне коряво в яндекс почте и thunderbird. Другие клиенты даже проверять не стал. Всегда задаем этому атрибуту значение равное нулю.

Cellpadding


Вот он — лучший друг верстальщика. Работает как часы везде!

Распорки


Если сellpadding'a не хватает для реализации и таблица более сложна, на помощь приходят распорки. Для этого берем прозрачную гифку 10 на 10 пикселей. Хотя если вас волнуют старые версии theBat!, то цвет распорки должен совпадать с цветом фона ее размещения, потому что theBat! умеет закрашивать прозрачные пиксели черным цветом.

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

Приведу пример рабочего кода с распорками и без.

<table cellpadding="10" cellspacing="0" style="border-collapse:collapse; border:#cc 1px solid;">
<tr>
<td width="100" height="100">Картинка</td>
<td width="100" height="100">Картинка</td>
<td width="100" height="100">Картинка</td>
</tr>
<tr>
<td width="100" height="100">Картинка</td>
<td width="100" height="100">Картинка</td>
<td width="100" height="100">Картинка</td>
</tr>
<tr>
<td width="100" height="100">Картинка</td>
<td width="100" height="100">Картинка</td>
<td width="100" height="100">Картинка</td>
</tr>
</table>

В этом случае мы получаем зазор в 20px между картинками и в 10px между крайними изображениями и внешними стенками таблицы.



Но что, если нам необходим отступ в 10px как между ячейками, так и на границах? Cellspacing в классическом HTML справляется с этой задачей, но не тут то было. Я не буду бить пяткой в грудь, доказывая, что конкретно в этом случае будут баги, но в подобных они наблюдались и поэтому я предлагаю следующее решение.

<table cellpadding="10" cellspacing="0" style="border-collapse:collapse; border:#cccccc 1px solid;">
<tr>
<td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;" alt=""></td>
<td width="100" height="100">Картинка</td>
<td></td>
<td width="100" height="100">Картинка</td>
<td></td>
<td width="100" height="100">Картинка</td>
<td></td>
</tr>
<tr>
<td></td>
<td width="100" height="100">Картинка</td>
<td></td>
<td width="100" height="100">Картинка</td>
<td></td>
<td width="100" height="100">Картинка</td>
<td></td>
</tr>
<tr>
<td></td>
<td width="100" height="100">Картинка</td>
<td></td>
<td width="100" height="100">Картинка</td>
<td></td>
<td width="100" height="100">Картинка</td>
<td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;" alt=""></td>
</tr>
</table>


Изображения


Картинки в письма вставляются двумя способами: пересылка вместе с письмом во вложении либо картинки лежать где то на удаленном сервере, а в верстке просто указывается путь к ним. Разница в том, что на сколько мне известно, приаттаченные картинки прогружаются в клиенте автоматически, даже если были отключены в настройках. Могу ошибаться. Если это так, то это дурной фон, я считаю. Это как минимум неприятно, когда происходит не по твоему(со стороны получателя), ну и трафик.
Если же картинки лежат где-то далеко и у пользователя в настройках они отключены, нужно следовать нескольким простым советам:

— Если картинка несет смысловую нагрузку(например это логотип или важное изображение), то ему надо задать ширину через атрибут width, высоту соответственно через height, title — на ваше усмотрение, alt — для того, чтобы дать описание непрогруженному изображению, и заинтересовать пользователя прогрузить ее.

— Если же картинка смысла не несет, а является украшением(тень, ленточка), то ничего вышеуказанного просто не задаем. Пользователь не увидит ее пока не включит все изображения в письме. Применимо при условии, что отсутствие размеров не порушит верстку. Иначе размеры стоит указать.

Есть еще один момент. Если картинка располагается внутри ячейки таблицы, то у нее может появиться нижний отступ в несколько пикселей. Лечится двумя способами:

— обернуть изображение в блок
— установить атрибут style для картинки со значением display:block;

Этот костыль делает изображение блочным элементом. Можно расценить как минус. Но в моей практике это боком не вставало. Иногда этот отступ не мешает.

Чисто теоретически блок-обертку для картинки можно заменить на span с нулевым line-height, но это еще не тестировалось.

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


Как я уже писал, использование тегов абзаца — не лучшее решение для точного отображения во всех клиентах. Хотя можно использовать, если пара лишних отступов не критична. Некоторые старые клиенты выставляют дефолтные отступы для абзацей по своему, а margin и padding режут. Именно поэтому ниже привожу два варианта реализации абзацей.

Абзацы с четким интервалом в пикселях


<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>Текст абзаца</td>
</tr>
<tr>
<td height="20"><img src="blank.gif" width="20" height="20" alt="" style="display:block;"></td>
</tr>
<tr>
<td>Текст абзаца</td>
</tr>
<td height="20"><img src="blank.gif" width="20" height="20" alt="" style="display:block;"></td>
</tr>
<tr>
<td>Текст абзаца</td>
</tr>
</table>

Абзацы с интервалом в line-height


<span style="line-height:1.5em;">
Текст абзаца
<br><br>
Текст абзаца
<br><br>
Текст абзаца
</span>

Свойство line-height сработает не во всех клиентах, но в этом нет ничего страшного. Полуторный интервал выглядит очень хорошо для текста и адекватно воспринимается «нормальными» почтовиками. Ну а если какой либо клиент вырежет это свойство, то ничего. Вот вам причины выбрать тот или иной способ. Количество кода или одинаковое отображение.

Шрифт, размер и цвет


Раньше я использовал чистую html конструкцию с тегом font и атрибутами face, color и size. Это работает. Но отказался по следующей причине. Отправка писем в системе рассылки использовала редактор tinyMCE для исходного кода письма. Этот пресловутый редактор перебивал все font на span с кривыми стилями.

Так я пришел к тому, что нужно использовать span вместо font, и задавать инлайновые css стили через атрибут style.

Все прекрасно кроме одного мизерного НО. Древнющие клиенты, а так же настраиваемые на отключение css, не видели всей нашей красоты. Да и черт с ними. Если человеку не нужно оформление, незачем его навязывать.

Тут, собственно все. Напомню лишь об указании полного шестнадцатиричного формата цвета для задания в css. Хотя можно обойтись и его прямым названием, например black.

Ссылки


Кратко и просто.

— Задаем атрибут target со значением _blank для всех ссылок кроме mailto:(для них не критично).
— Обнуляем border для изображений-ссылок
— Указываем important! цвет для ссылок во избежание смены цвета на hover и active(этим грешит Яндекс почта, по крайней мере)

Мобильные платформы


Да, использовать media_queries можно, и даже нужно! Как правило это используется для жесткого задания ширины обертки нашего письма. Ведь с резиновыми макетами все достаточно плохо, т.к. max-width, например работает далеко не везде. Многие мобильные почтовые клиенты исправно поддерживают media_queries, поэтому смело экспериментируйте.

Что почитать


Если кто пропустил, привожу ссылки на предыдущие публикации по теме.

Верстка почтовых рассылок
Юзабилити почтовых рассылок
Верстка почтовых рассылок: взгляд изнутри
Верстка почтовых рассылок: разбор полетов
Костыли при верстке рассылок
Почтовые рассылки — немного о глупом
Почтовые рассылки: Долой костыли!
Почтовые рассылки: письменная кухня
FAQ по верстке рассылок
Красивый и эффективный email маркетинг
Верстка HTML писем: думай как баг
Артур Кох @dudeonthehorse
карма
71,7
рейтинг 0,0
Email developer
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • +22
    Вот где живет каменный век технологий )
    • 0
      Живёт? Они туда умирать приходят!
  • –11
    HTML-письма не нужны
    • +4
      Чего так мелко? html не нужен!
      • +4
        Не нужно передергивать ;)
        Мне кажется, HTML действительно избыточен для верстки писем, как по синтаксису, так и по возможностям. На мой взгляд, в письмах бы неплохо сыграло что-нибудь типа wiki- или md-разметки — ссылки аккуратно оформить, заголовки-абзацы и т.д.
        • +5
          Это в письмах которые вы друзьям пишите. А если интернет магазину нужно сделать рассылку своих новинок?
          • –3
            Покажите хоть одного человека, которому эта рассылка интересна ;)
            • +4
              Мне. Именно благодаря подобному письму от Нокии купил девушке новый телефон.
            • +1
              К примеру я подписался на рассылку от rozetka о поступлении в продажу Kindle Paperwhite.
              Также мне интересны оповещения о выходе новых фильмов с различных сервисов.
            • +3
              Только не говорите, что все эти рассылки не работают. Поверьте, все работает. Это я вам говорю и как получатель и как отправитель и как дизайнер.
            • 0
              Очень интересны такие рассылки. Например на сервисы типа групона подписаны, вы не поверите, миллионы женщин (да и мужики балуются, но реже)
    • +2
      Очевидно вы с директмайлом не работаете…
    • +2
      Знаете ли, оформленные письма и читать приятно, главное — суть текста, а потом лаконичный и приятный дизайн.
  • 0
    Занимаюсь версткой рассылок довольно часто. Уже было подумал, что и правда с переделкой интерфейсов и парсеров что-то изменилось. Ан нет, все по-старому :)
    • +1
      Ну как сказать. Багов стало меньше. А, собственно, почему прогресс стоит? Вебморды боятся предоставить легкую возможность фишинга для мошенников. Хотя для того же ГМыла можно, в принципе, и на дивах спокойно верстать.
      • 0
        Почты сделаны для передачи текста и файлов. Мне было бы спокойнее, если бы от магазинов приходила ссылка на сверстанную нормально страницу, где можно посмотреть инфу о новой продукции, в том числе и полные описание. А не страшная херня в виде резанных картинок и пестроты цветов. А так как у меня при открытии отключены картинки в дефолте, делает их рассылки совсем некрасивыми.
        • +1
          Можно сверстать письмо так, чтобы и без прогруженных картинок оно смотрелось аккуратно.
          • 0
            Это долго и обычно те, кто верстает красивое письмо, не задумываются о том, что картинки у многих по дефолту отключены)
            • 0
              Я задумываюсь. Именно поэтому не использую cid для картинок.
              • 0
                Есть удачные скриншоты примеров работ?
                • 0
                  Под рукой нет.

                  Принцип я описал в топике. Если изображение не несет смысловую нагрузку то не указываем для него размеры. А это приведет либо к тому, что изображение при опции отключения исчезнет, либо на его месте останется небольшой квадрат, символизирующий картинку, которую можно прогрузить щелкнув по ней.

                  При грамотном расположении верстка не едет. Глаз ничего (кроме разве что маленького кубика) не режет.
  • –1
    Оставлю тут ссылку на premailer.dialect.ca. Сервис конвертирует HTML в совместимый с почтовиками. Так же делает красивый альтернативный текстовый вариант письма.
    • 0
      Угу. А как насчет русских вебморд? Эта вещь htmlemailboilerplate.com/ тоже хорошая, но русские в пролете.
      • 0
        русские в пролете

        Вы имеете в виду айтишников, не знающих английского языка? Или говорите о шаблонах оформления писем, содержащих русские буквы?
        • +2
          Я говорю об отечественных почтовых сервисах. И их парсерах. За бугром не мало решений для качественных писем. Но они не берут в расчет российский рынок.
  • 0
    Спасибо за статью. Очень вовремя.
  • 0
    Посмотрел некоторые письма — часть отправителей кодирует всё в base64, есть ли в этом смысл?
    Я имею ввиду, что и text/plain и text/html части полностью закодированы, но непонятно зачем.
  • 0
    Смахивает на вёрстку под IE6
    • 0
      Смахивает на «лишь бы какнуть на IE»
      • +1
        Не, ну ведь и правда похоже. к тому же на IE6 грех не какнуть ;)
        • +1
          В IE6 прекрасно верстать дивами. Там есть то, чего мы добиваемся свойствами box-sizing. Он понимает хедерные стили, он не режет столько css сколько почтовики. Там нормально воспринимаются отступы в отличие от тех самых почтовиков. Не сравнивайте. Это похоже на HTML 3.2 с добавлением легкого CSS, не более.
          • 0
            кстати, если ещё и помочь IE, передав ему верный DOCTYPE и валидный код, можно, теоретически, получить то, что и хотели. Ну если не заострять внимание на всяких багах типа урезанного PNG и всего такого.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Haters gonna hate.

      Есть множество прекрасных рассылок. А еще помимо регулярных рассылок есть и другие. Приятно видеть аккуратные письма от linkedin, kickstarter, goodreads, твиттер, вк,, fb и многие другие.

      Хотя капитан мне подсказывает, что если не подписываться на рассылки, то да — будешь получать только спам.
      • 0
        Под «рассылки» ещё попадают письма подтверждения регистрации на сервисе, оповещения какого либо сервиса и тд.
        Например, получение оповещения о новом комментарии с habrahabr — это тоже рассылка.
        • 0
          письма от linkedin, kickstarter, goodreads, твиттер, вк,, fb и многие другие.
          От твиттера, ВК и линекдина приходят именно оповещения в большинстве своём.

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