0,0
рейтинг
2 апреля 2013 в 08:01

Разработка → Верстка писем. Снова баги

Автор изображения Eva Galesloot

Привет!

Прежде всего хочу принести извинения в адрес mail.ru и лично Андрею Сумину AndrewSumin за пост, написанный сгоряча. Проблема верстки писем изрядно наболела, но местами все не так плохо как казалось. Присутствуют и проблемы.

Касательно mail.ru на данный момент претензий почти не имею. Верстать письма под эту вебморду так же приятно, как и для гуглопочты. Очень приятно видеть, что русские вебморды стали поддерживать фоновые изображения.

Знаете чего очень не хватает? Фичлиста от разработчиков почтовых клиентов и вебморд. Было бы очень здорово узнавать из первых рук, какие фичи ввели в обращение, а какие наоборот — урезали. Это облегчило бы головную боль верстальщика, да и пользователь перестал бы получать кривые письма. Да, это очень важная информация.

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

Mail.ru


Как я уже сказал, у этих ребят все здорово, кроме одного маленького НО. Если мы указываем в письме номер телефона(просто текстом), этот самый номер трансформируется в псевдоссылку, синего цвета, при нажатии на которую, мы совершим звонок через mail.ru веб-agent.
<span class="js-phone-number highlight-phone" title="Позвонить через Веб-Агент">+7(952)123 45 67</span>

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

Яндекс почта


Тут куда больше расстройств. По порядку:

1. Рамки таблиц

<table width="400" cellpadding="0" cellspacing="0" style="border-collpase:collapse;">
<tr>
<td width="50%" style="border-bottom:#999999 1px dashed;">текст</td>
<td width="50%">текст</td>
</tr>
</table>

Что мы ожидаем увидеть? Все просто. Левая ячейка таблицы должна получить пунктирную(dashed) нижнюю границу. Что мы получаем на самом деле? Левая ячейка получает solid границу, а правая — dashed. Почему? Не ясно.

2. line-height Приведу пример сверстанной кнопки:
<table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;">
<tr>
<td><a style="color:white !important;" href="#">ссылка</a></td>
</tr>
</table>

Все почтовики кроме я.почты отпарсят кнопку как и задумано. В случае же нашего героя, line-height будет ощутимо завышен. Все дело в том, что дефолтный line-height в я.почте изначально задан большим:
.b-message-body {
line-height: 1.4;
}

, чем это принято в браузерах(1.2em). Но и тут не все так просто.
<table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;">
<tr>
<td><a style="color:white !important; line-height:1.2em;" href="#">ссылка</a></td>
</tr>
</table>

Не решает проблему. А вот так сработает:
<table bgcolor="green" width="150" cellpadding="10" cellspacing="0" style="border-collpase:collapse;">
<tr>
<td style="line-height:1.2em;"><a style="color:white !important;" href="#">ссылка</a></td>
</tr>
</table>


3. cellspacing
Тут все интереснее. Ранее этот атрибут в я.почте работал криво. Таблица просто разваливалась. Разработчики поступили очень интересно :) Они просто отключили его вот так:
.b-message-body__content TABLE {
border-collapse: collapse;
}

Это очень здорово, но решение плохое. Если нам не нужны отступы между ячейками мы можем просто указать cellspacing=«0» и все будет хорошо. Но не тут-то было. Ребята из майкрософта как всегда особенные. Именно для десктопного outlook необходимо коллапсировать таблицу во избежание однопиксельного зазора между ячейками таблицы. Поэтому у меня убедительная просьба к разработчиткам я.почты: «Пожалуйста, исправьте это недоразумение». Я буду рад, если этот пост заметит Роман Комаров kizu, т.к. мне не удалось с ним связаться по этим вопросам.

Мелочи жизни


Тут просьба к вышеуказанным разработчикам: Не могли бы вы ввести поддержку хедерных стилей хотя бы для ссылок? С учетом псевдоклассов: :link, :hover, :visited. Дело в том, что ссылки в письме выглядят мертвыми. Было бы здорово менять цвет ссылки при наведении на нее, или убирать text-decoration;

И еще одна деталь. Как насчет css свойства max-width? В основном именно из-за его отсутствия чаще всего приходится писать media_queries.

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

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

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

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

  • 0
    Яндекс почта.Рамки таблиц — вы теги td не закрыли
    • 0
      Лишь опечатка при подготовке материала.
  • +2
    Привет. Спасибо за конкретные примеры :)

    1. У меня не получилось это воспроизвести — быстро переслал себе через визивиг копипастом такую таблицу и получил то, что нужно — только пунктирную границу слева. Не могли бы вы мне переслать на kizu@yandex-team.ru конкретный пример, который у нас не работает? Посмотрим, разберёмся.

    2. Ну, тут довольно спорный момент. Если не менять дефолтный лайн-хейт, то текст будет гораздо менее удобно читать. 1.2em — далеко не самая оптимальная высота строки для чтения. Тут уж или всем улучшать, или, в редких случаях, кому-то что-то по мелочи ломать. Так уж можно и ожидать, что пользователи везде будут ожидать дефолтного серифного 16px шрифта. Но в любом случае буду рад посмотреть на примеры писем, которые ломаются из-за большого лайн-хейта.

    3. Разработчики писем, почему-то, чаще верстают так, что отсутствие коллапсирования всё ломает. После его добавления я не помню жалоб на то, что он у нас есть — так что, пожалуйста, пришлите конкретные примеры писем (+ скриншоты из десктопного аутлука с проблемой), чтобы можно было посмотреть что да как.

    4. Нам самим хочется добавить возможность использовать хедерные стили, но там кроется очень много подводных граблей, на обхождение которых всё никак не может найти время :( Надо очень жёстко санитайзить такие стили, убирая или экранируя опасные стили, что не совсем банально и может сказаться на производительности. Альтернатива — использовать айфрейм для сендбоксинга — также имеет очень много проблем. В общем, мы думаем над этим, но пока времени нет на то, чтобы добраться до решения этой задачи — она довольно большая. Делать полумеру вроде поддержки только стилей для ховера также опасно — для этого всё равно надо парсить стили, санитайзить содержимое соответствующих блоков деклараций и т.д.

    И да, ещё раз — можно мне пересылать на почту kizu@yandex-team.ru конкретные письма, которые ломаются в нашем веб-интерфейсе. Будем разбираться :)
  • 0
    1. Отправил.

    2. Тут неприятен момент, что завышенный лайн-хейт наблюдается только у яндекса, и соответственно только для яндекса нужно проводить фиксы. Я согласен, что 1.2 — не самый приятный интервал, и устанавливаю 1.5 в своих письмах. Я привел в топике пример с кнопкой, которая сверстана таблицей. Для нее — только для яндекса нужно делать обнуление лайн-хейта. Не то, чтобы баг — просто дополнительные усилия, которые не нужно прилагать для других почтовиков.

    3. Коллапсирование поставить не трудно в ручную, да нужно далеко не всегда. А вот атрибут cellspacing очень нужен в некоторых случаях. А вы его просто отрезаете. Только и всего.

    4. Понимаю. Буду ждать результатов. К вопросу о фичлисте. Не могли бы публично(или ограниченно) вести логи введения/урезания возможностей при верстке? Было бы здорово избавиться от долгих регулярных экспериментов с версткой. Или боитесь, что фишеры будут сильно бдить за этим? :)
  • 0
    3. Хмм, вот сейчас сам себе отослал письма с таблицей, ни border-collapse:separate ни cellspacing не вырезались. Как раз во встречающихся у простых пользователей письмах чаще нужно коллапсирование, чем его отсутствие.

    4. Мы подумаем об этом, конечно, но ничего обещать не могу.
    • 0
      Как я понял ваш
      .b-message-body__content TABLE {
      border-collapse: collapse;
      }
      

      имеет приоритет над Cellspacing, и поэтому им невозможно пользоваться.
      • 0
        Это свойство просто «выключает» cellspacing, если прописать таблице инлановый стиль border-collapse:separate, то мы его не вырежем и после этого cellspacing будет нормально работать.
        • 0
          Это уже много лучше. Не догадался, спасибо.
          Помнится мне ранее cellspacing рушил таблицу по неясным причинам. Потестирую это направление.
  • +1
    про телефон в mail.ru — идея на уровне бреда, но возможно стоит проверить: разбейте номер на отдельные спаны. Понимаю, что костыль, но по идее ломаться должно перестать
    • 0
      Костыль :)
      С другой стороны — это нормально, ибо этим агентов люди вероятно пользуются.
      Но в таком случае разработчикам было бы логичнее оформить кнопку звона как скайповый плагин для браузеров.
      • 0
        Мы искали вариант, который точно не сломает письмо.
        А именно, выделение должно не менять геометрию блока.

        Скайп меняет геометрию и ломает письма.
    • 0
      Ломать структуру номера плохо. Например iOS тоже распознаёт номера и даты и делает из них линки. Для мобильных девайсов это не заменимо.
      • 0
        Вот незадача =( да, на эту тему не подумал, постепенно все больше отвыкаю от звонков.
        Я ведь правильно понимаю, что на уровне этих писем писать разные стили для разных девайсов нельзя, так как парсеры их будут чаще всего выкидывать?
        • 0
          Как писал автор в письмах вообще не рекомендуется использовать хедерные стили, то есть всё, что выше не будет нормально работать, поэтому стили для разных девайсов, думаю, не возможны.
          • 0
            Хедерные стили не работают в большинстве случаев. НО. Они успешно используются для написания хаков в некоторых вебмордах. Например год назад назад при их помощи можно было управлять псевдоклассами ссылок в Yahoo! почте. Но я не фанат хаков для единичных случаев, следовательно не использую.

            Мобильные устройства вынесенные правила прекрасно понимают, по крайней мере в случае описания medua_queries
            • +1
              Особенность выделений телефонных номеров и дат в iOS в том, что как раз лучше воспринимаются дефолтовые синие ссылки. Потому как только тогда, привыкший к этому юзер, сможет понять, что при нажатии номера телефон сразу предложит позвонить.

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

              Как пользуются этим на других телефонах я не знаю.
              • 0
                Я согласен со сказанным. Но, как-то, подчеркнутая ссылка на номере телефона — не очень очевидна как звонок. Вешали бы чтоли иконку звонка для полного счастья и дефолтное выделение цветом.

                Хотя, тут еще как посмотреть. Как быть с письмом, у которого синий фон? :) Пример абстрактный, но имеет место быть.
                • +1
                  Ну если регулярно читать почту на айФоне, то к линкам на номерах и датах привыкаешь и понимаешь для чего они. Особенно когда в письме кроме номера телефона больше никаких линков нет. Думаю у обычного человека обычных текстовых писем большинство.
                  Самый частый случай — текстовое письмо с подписью человека, в которой содержится номер телефона.

                  Задача подобных статей и есть в том, что бы донести людям, что писем с синими фонами быть не должно :)

                  Ну и спасибо, что хоть кто то пишет об этой узкой и ограниченной теме.
        • 0
          Для мобильных девайсов можно. Media_queries понимаются хорошо.
          • 0
            вопрос не сколько в том, чтобы понимались, а в том, чтобы не отрезались/изменялись
            anyway, думаю что можно попробовать сделать стиль на два способа отображения на десктопах и мобилках. И написав это, я почти сразу с тихой грустью осознал, где мне это придется проверить =(
  • 0
    Я может поздно, но…
    <table width="400" cellpadding="0" cellspacing="0" style="border-collpase:collapse;">
    
    вы не пробовали писать border-collapse:collapse?
    • 0
      Конечно пробовал. Опечатки они такие, иногда закрадываются. И вообще никогда не поздно. Материал актуален уже минимум два года. Достойной альтернативы пока не видел.
  • 0
    Было бы хорошо сопровождать примеры скриншотами.

    • 0
      Что из описанного не может себе представить ваше воображение?
      • 0
        Если вдумчиво читать то всё. Если вскользь — то скриншоты помогли бы.
        • 0
          По поводу 3. bgcolor=«green», a style=«color:white
          Не бывает ли ситуаций, когда bgcolor=»green" где то не читается и белая ссылка становиться невидимой на белом фоне? Стараюсь избегать подобного, но точной уверенности за и против нет.
          • 0
            Задание цвета через bgcolor пуленепробиваемо. Ссылки окрашиваю через style !important во избежание радуги различных вебморд.
            • 0
              Я заметил, что «style !important» работает не всегда в Outlooke, просто игнорирует и красит в синий. Не на всех компьютерах. Виртуальные мультиплатформенные тесты Outlook показывают нормально, а вот на паре реальных машин все ссылки ломаются.

              Предполагаю, что у реальных пользователей такая ситуация тоже может быть. Стараюсь избегать делать кнопки HTML, особенно если кнопки должны быть фирменных цветов. Делаю кнопку картинкой и дублирую её ссылкой.
              • 0
                Кнопки — только картинками, разумеется. В том случае если это сложнее одноцветного прямоугольника с текстом.

                Насчет аутлука — не наблюдал. Хотя я давно конкретно за него не брался. Да и новая версия вышла не так давно. Мой старый коллега сейчас готовит материал приоритетно по аутлуку. Не исключаю, что и сам открою для себя что нибудь новое.
  • 0
    … номер трансформируется в псевдоссылку ....

    не только на mail.ru Но и других броузерах (напр в safari на iPad)
    Лечится разбивкой на несколько тэгов.

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