Pull to refresh

Comments 32

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ну и спасибо, что хоть кто то пишет об этой узкой и ограниченной теме.
Для мобильных девайсов можно. Media_queries понимаются хорошо.
вопрос не сколько в том, чтобы понимались, а в том, чтобы не отрезались/изменялись
anyway, думаю что можно попробовать сделать стиль на два способа отображения на десктопах и мобилках. И написав это, я почти сразу с тихой грустью осознал, где мне это придется проверить =(
UFO just landed and posted this here
Конечно пробовал. Опечатки они такие, иногда закрадываются. И вообще никогда не поздно. Материал актуален уже минимум два года. Достойной альтернативы пока не видел.
Было бы хорошо сопровождать примеры скриншотами.

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

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

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

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

Articles