0,0
рейтинг
14 февраля 2012 в 21:52

Разработка → Верстка HTML писем: думай как баг tutorial

CSS*
Всем привет!

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

Cellspacing


Как я уже писал более года назад, стОит обнулять все отступы для таблиц, и там где нужны отступы — добавлять новые ячейки с прозрачной .gif распоркой. Я решил упростить себе задачу и поиграться с базовыми отступами для таблицы.

Задача: расположить четыре картинки в таблице — по две на каждой строке. Между картинками должен быть зазор в 10px.

Экспериментальное решение:

<table cellpadding="0" cellspacing="10" style="border:#666666 1px solid;">
<tr>
<td>Картинка</td>
<td>Картинка</td>
</tr>
<tr>
<td>Картинка</td>
<td>Картинка</td>
</tr>
</table>

Итог: провал! В gmail и Яндекс.почте (другие даже не стал проверять) отступы ведут себя как психопаты. Везде и по разному.

Рабочее решение:

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

Примечание: Ширину и высоту необязательно задавать для пустых ячеек — они сами подстроятся благодаря .gif распоркам и ячейкам с шириной и высотой. Для картинок разумеется надо много чего задавать, но это я опустил в данном примере, т.к. это не по существу. Все необходимое есть в предыдущих топиках.

Примечание №2: Для картинок установлено свойство display:block для того, чтобы не появлялся лишний отступ под картинкой. Так же это лечится оберткой картинки в

<div style="line-height:0;">картинка</div>

Но этот вариант не всегда подходит. Почему? В этом виноват mail.ru. Но об этом будет дальше.

Cellpadding


А вот тут нас ожидает хорошая новость. Можно, порой, не городить лишние распорки и использовать для отступов классический Cellpadding — багов замечено не было. Рабочий пример по принципу предыдущей задачи:

<table cellpadding="10" cellspacing="0" style="border:#666666 1px solid;">
<tr>
<td>Картинка</td>
<td>Картинка</td>
</tr>
<tr>
<td>Картинка</td>
<td>Картинка</td>
</tr>
</table>


Почему не использовал этот вариант в предыдущей задаче? Все просто. Cellpadding дает двойной отступ внутри таблицы относительно ее внешней части.

Mail.ru и банальная проблема


Ребята определенно молодцы. Не только переписали интерфейс почты, но кодировочку в UTF перегнали. И правильно, долой KOI-8! Но и тут не обошлось без происшествий. Появился маленький баг, которого раньше не было.

Задача: расположить картинку(или ссылку с картинкой) в ячейке, которая шире картинки. Отцентрировать картинку. Не допустить появления небольшого отступа между нижней границей ячейки и самой картинкой.

Раньше решалось так:

<table width="600" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;">
<tr>
<td align="center">
<div style="line-height:0;"><img src="1450823215153325277735" width="200" height="100" alt="описание"/></div>
</td>
</tr>
</table>


Пробовал так:
<table width="600" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;">
<tr>
<td align="center">
<div style="line-height:0; text-align:center;"><img src="1450823215153325277735" width="200" height="100" alt="описание"/></div>
</td>
</tr>
</table>
Не работает.

Если картинку центрировать не нужно, то еще проще:

<table width="200" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;">
<tr>
<td align="center">
<img src="1450823215153325277735" width="200" height="100" alt="описание" style="display:block;"/>
</td>
</tr>
</table>

Раньше первый вариант работал везде. Теперь работает везде кроме mail.ru почты. Общался на эту тему с Андреем Суминым — руководителем разработки клиентской части в mail.ru, и он порекомендовал использовать тег center для выравнивания. Пока не успел протестировать этот способ во всех клиентах, но ничто не мешает использовать этот вариант вместе с вышеуказанными одновременно. Так же Андрей сообщил, что парсер очень сильно кушает css в верстке, но бояться нечего. Все описанные мной приемы работают.

«Gif распорки зло! Попадешь в спам!» — Это не так


Не раз был разговор о том, что использование .gif распорок плохо воспринимается gmail. Якобы он считает это спамерским ходом. Товарищ rednaxi в этом обсуждении так же об этом говорил, приводя выдержку из официальных рекомендаций гугла.
Некоторые отправители вставляют в свои сообщения пустые пиксели слежения, позволяющие им узнать, когда получатель открыл сообщение. Мы настоятельно не рекомендуем включать такие пиксели в сообщение по двум причинам. Во-первых, Gmail по умолчанию не показывает изображения, поэтому пиксели слежения не смогут достоверно сообщить вам о том, что пользователь прочел ваше сообщение. Во-вторых, пиксели слежения часто применяются спамерами, поэтому их использование может привести к отправке вашего сообщения в спам.

Но проводя почтовые кампании на более, чем 300000 получателей проблем со спамом не было при использовании этих самых прозрачных .gif'ов. Единственное замечание относительно них — старые версии the BAT! окрашивают прозрачные пиксели в черный цвет. Если вам не плевать на этот почтовый клиент, то гифы вставляются нужного цвета, чтоб сливались с фоном.

Ну, раз такая пляска


Пользуясь случаем отмечу еще одно приятное явление, не касающееся верстки. Тема отписки от рассылок обсосана донельзя, и наконец работает! По крайней мере я это вижу. Если конкретнее, то я частенько регистрируюсь на различных сайтах и сервисах, и постоянно получаю кучу всевозможных рассылок в свой ящик. Так вот — если раньше для отписки половина сайтов требовала дополнительных авторизаций, то теперь это действительно редкость! Во сяком случае на сайтах, на которые я подписан, а их не мало. В качестве хромой кобылы под звуки оркестра выходит Molotok.ru. Это творение рунета по прежнему требует авторизацию для отписки. Но ничего он у меня уже год в спам попадает.

UPD: 1 February 2012 background-image is now supported in Gmail. С первого февраля этого года в gmail появилась поддержка свойства background-image. Ура!
Артур Кох @dudeonthehorse
карма
72,7
рейтинг 0,0
Email developer
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • +2
    Вместо прозрачного пикселя можно сделать в логике скрипта-логгера не вывод пикселя, а отдачу либо редирект урл-а картинки с сервера необходимой для того же email-a.
    Тогда, скажем логотип, будет иметь вид
    img src=«site.ru/email-logger? src=logo.gif &k=123». Гугл доволен, the bat не имеет поводов для беспокойства.
    • +1
      В качестве логгера именно так и делаю. Но распорки встречаются часто. Например в достаточно простом документе 8 раз
    • 0
      только лучше этот трюк проделывать не с логотипом, а с какой нибудь мало значимой картинкой (какой-нибудь разделительной чертой например), если они есть конечно, а логотип прикреплять к письму и вставлять используя cid: тогда в том же gmail, в котором по умолчанию картинки выключены, картинки из вложений все равно показываются.

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

      а однопиксельная картинка, вставленная через cid, очевидно не может являться пикселем слежения, и не вызывает попадания в спам.
  • +3
    HTML-письма в глубоком кризисе.
    Всё больше людей пользуются почтой на девайсах (comScore по первой ссылке в Гугле говорит об американской аудитории пользователей мобильной почты в 70 млн. человек и 36% прироста за год), а в ящих продолжают валиться письма с табличками на распорках. И никакого responsive design здесь, похоже, не предвидится.
    • –1
      Мобильная почта не так популярна в рашке. Если подумать, что к responsive design прийти не проблема, если изначально рисовать письма не в виде «сайтов», а в виде «фирменных писем». Сейчас в рассылку идет слишком много мусора. В полной мере решения для перехода не вижу, ибо в идеале поддержка js, но средствами резины определенного успеха добиться можно. С другой стороны нельзя давать поддержку js, ибо рассылки станут еще более ненавистными для получателей благодаря любителям «сделать крутую рассылку».

      Распорки используются для относительно «непростых» макетах. Если постараться, то простое письмо делается на чистом HTML без распорок, но могут быть погрешности в разных почтовых клиентах. По сути огрехи не критичные, но заказчик порой в ужасе из-за пары лишних пикселей в разных клиентах.
      • 0
        *«непростых» макетов
      • +1
        Что за марш несогласных? «Мобильная почта в рашке»? Могу перефразировать. Российский заказчик готов отказаться от мобильного клиента в пользу уменьшения бюджета.
    • 0
      К тому же тут вопрос изучения ЦА, дотошности и бюджета. Можно поставить в приоритет ископаемые почтовики или наоборот новые мобильные платформы. Одно другое исключает. Был опыт верстки писем под айфон. По своему увлекательно.
    • 0
      Вы меня кстати навели на новые мысли. Есть над каким материалом подумать. Главное найти время. Если тему развивать, можно много постов написать.
  • 0
    Отступ снизу убирается тэгом <br> после картинки.
    • 0
      В свое время от этого решения отказались. Где-то не работало. С ходу не скажу.
  • 0
    Комрад, а почему бы тебе не сделать reset.css для писем? Раз уж ты такой подкованный. Это было реально очень круто.
    • +1
      Наверное потому что большинство CSS просто не переваривается почтовыми парсерами? :)
      • 0
        Именно
        • 0
          А есть какая-то статистика, где не работает? По-моему яндекс, gmail и mail.ru неплохо понимают CSS.
          • 0
            есть такое. И что интересно: 1 February 2012 background-image is now supported in Gmail.
            • 0
              Спасибо за ссылку!
              • 0
                Пожалуйста.
          • 0
            Насчет mail.ru — Андрей Сумин, упомянутый в топике сообщил, что CSS они режут.
    • 0
      Командор! Тут такая тема — в чистом виде ресет там наверное не заюзаешь + многие элементы делать придется таблицами. Последний раз я занимался этим в ноябре. Но задачу так и не закончил. Наверное придется скоро вернуться к этому вопросу.

      Самое лучшее что я придумал — использовать HAML разметку в которой нужно задать ресетные хеши, которые я потом подставлял в элементы, которые этого требовали.
      • +1
        Получалось что-то типа:

        - table_reset = { :style => 'cellpadding="0" cellspacing="0"' }
        ... 
        
        %table{ table_reset }
          %tr{ tr_reset }
            %tr{ td_reset }
        
        • 0
          Капрал! Верно мыслим. Не раз собирался написать что-то вроде редактора, который бы автоматом подставлял нужные стили но как то не дошли руки. Да и в регулярках я не силен.

          Кстати помимо cellpadding и cellspacing нужно вставлять style:border-collapse:collapse; в случае нулевого cellspacing
          • 0
            Э-э-эм… А такие штуки не подойдут для ваших задач?

            premailer.dialect.ca/
            inlinestyler.torchboxapps.com/
            • 0
              Фасовка стилей из head в инлайн это лишь малая часть того, что хотелось бы.
              В иделале вместо
              <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"><tr><td>текст</td></tr></table>
              Вбивать просто
              <wrapper>текст</wrapper>
              а редактор бы это конвертил. Это всего лишь один малый пример. Таких комбинаций в голове очень много.
              • 0
                Уже есть такое — MJML
  • 0
    Хочу примеров-картинок
    • 0
      Не вижу смысла. Яне показываю новомодные фичи CSS3. А уж таблицу в 4 картинки без оформления фантазия может представить.
  • 0
    А нельзя прозрачный гиф вставлять в тело письма, чтобы не загружать его со стороннего сервера? Тогда и оснований для отправки письма в спам нет.
    • 0
      Можно вставлять как с внешнего сервера, так и вложением(cid). В любом случае оснований для попадания в спам нет.
  • 0
    Жестоко. Ни за что не стану верстать электрописьма.
    • 0
      Это проще, чем кажется. Сношания с IE хуже.
      • 0
        А как на счет сношений с Outlook 2010 и фоновыми картинками? Вот где писец во все своей пушистой красе. IE6 после этого лапочкой кажется.
        • 0
          А тут не сношания. Они просто не поддерживаются. Уже давным давно даю указания дизайнерам рисовать макет так. чтобы фоновое оформление можно было реализовать вставкой тега img.
          • 0
            Правильно что даете такие указания. Но вообще-то, аутглючные шаблоны намекнули нам что фоновые изображения поддерживаются. Через задницу vml, но поддерживаются.
            • 0
              Заморачиваться с vml не стОит того.
  • 0
    mail.ru поддерживает box-shadow в html-письмах.
    Наверное, еще какие-нибудь css3-свойства.
    • 0
      Что не дает повода это использовать. Ни один виндовый десктоп клиент это не поддерживает.
      • 0
        Виндовые не увидят, пользователи мейлрушечки могут порадоваться.
        • 0
          Если от чего-то отказываться то — везде. Если нужна тень, то везде — следовательно — картинка. Есть спорные моменты в том, чем можно порадовать юзера, но я придерживаюсь высказывания в начале этого каммента.
  • 0
    • 0
      Это, в принципе, неплохо. Даже отлично! Но практически все это не прокатит для российских веб-морд и старых версий десктоп клиентов.
    • 0
      А вот media queries для писем это интересно. В любом случае спасибо за ссылку.

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