Вопрос дня:
Использовать нативность, чудить или достучаться до разработчиков? Я не дам на него ответ, ибо сам нахожусь в замешательстве.
Возьмем номер:
8 (800) 888-88-88
И будем извращаться
Вариант №1: Нативность
a { color:#0077cc !important }
a[href^=tel] {
color:#000000 !important;
text-decoration: none;
border-bottom:#000000 1px dotted;
}
p { color:#000000; }
<p>Позвоните нам <b>8 (800) 888-88-88</b></p>
Что мы получаем:
— Популярные почтовые вемборды нам покажут номер телефона. Даже mail.ru ныне не преобразовывает номер в ссылку для звонка, хотя делал это ранее.
— Андроид честно тестировать не стал пока что.
— Gmail приложение не преобразовывает ссылку для звонка. Ссылка остается без изменений.
— iOS приложения: Mail, Outlook, Mailbox, Spark и Rambler преобразовывают номер и подхватывают стили a[href^=tel] тем самым стилизуя номер под псевдоссылку как мы и хотели.
— iOS приложения: Google Inbox, Yandex, Mail.ru, My.com преобразовывают номер для звонка и делают ссылку дефолтным блевотносиним цветом
— iOS приложение Yahoo преобразовывают номер для звонка и красит ссылку в #0077cc. То есть подхватывает оформление из CSS, но не понимает, что наша ссылка — это номер телефона.
— Все OSX десктопные приложения стилизуют номер под псевдоссылку.
— Десктопные Windows клиенты пока не тестировал, но уверен, что 90% не будут заниматься преобразованием ссылки.
Вариант №2: Чудим
a { color:#0077cc !important }
a[href^=tel] {
color:#000000 !important;
text-decoration: none;
border-bottom:#000000 1px dotted;
}
p { color:#000000; }
<p>Позвоните нам <b><a href="tel:+78008888888" style="color:#000000 !important; text-decoration:none; border-bottom:#000000 1px dotted;">8 (800) 888-88-88</a></b></p>
Что мы получаем:
— Вемборды: Gmail, Google Inbox, Yandex, Yahoo — Все хорошо. Рабочая звонящая псевдоссылка.
— Вебморды: Outlook.com и Mail.ru — Ссылка стилизована, но не звонит. Параметр href пуст.
— Вебморда Rambler — Ссылка стилизована. В параметре href следующий перл "/m/badurl".
— Все iOS приложения. Идеально. Кроме Mail.ru и My.com. Они по-прежнему подставляют блевотносинюю ссылку. Благо, звонит.
— Все OSX десктопные приложения стилизуют номер под звонящую псевдоссылку.
— Windows десктопные приложения и андроид приложения пока также не тестировались.
Вариант №3: Достучаться до разработчиков
— Яндекс, введите уже поддержку медиазапросов в мобильном приложении. В этом нет ничего катастрофичного.
— Mail.ru, они же My.com, пожалуйста введите поддержку медиазапросов, а также снимите жесткое форматирование телефонных номеров. Проверьте проблему неработоспособности tel-ссылки в вашей вебморде. Исправьте корявые переносы текста в мобильном приложении. Алгоритм переноса мягко говоря удручает. Ни в одном почтовом приложении такого бреда нет.
— С Рамблером все понятно. Обещали новую вебморду в следующем году. Приложение пока сырое, но нареканий к нему меньше всех.
— Яху. Выкатили свежее приложение. Нареканий нет. Разве что не понимает a[href^=tel] селектор. Да и кто тут меня услышит?
— Майкрософт. Я, в принципе, благодарен отделу разработки Аутлука, ибо секса в моей жизни стало в разы больше именно благодаря им. Но и тут есть мольбы в пустоту. Ладно, десктопные аутлуки. С этим все смирились. Но в чем проблема поставить одинаковые парсеры на все вебморды? Outlook.com, Office365, Live.com. Почему нельзя все их привести к виду Outlook.com? В котором кстати надо пофиксить работоспособность tel-ссылки.
Понятное дело, что всем плевать. Тикеты не обрабатываются. А если и обрабатываются, то приходят отписки типа: «Спасибо, примем меры» от безликих агентов поддержки. Попробуем по теории рукопожатий? Why not?
Комментарии (19)
m0sk1t
19.10.2015 09:54+3Что-то не понял, стилизует вы в первом примере тег
а в коде его нет…<a>
dudeonthehorse
19.10.2015 10:15+4Ссылка появляется автоматически после рендеринга письма мобильным почтовиком.
m0sk1t
20.10.2015 10:47Спасибо! А подскажите что почитать на эту тему? Думаю таких нюансов работы мобильных почтовых агентов достаточно для того чтобы осветить в отдельной статье, вы думали написать об этом?
dudeonthehorse
21.10.2015 04:29+1У меня только на iOS стоит 12 почтовых клиентов, которые являются наиболее популярными. Да, у каждого есть свои особенности, но они более-менее приемлемы и при подготовке письма всегда можно найти компромисс. Но случай с номерами телефонов весьма противен. Отсюда и родился топик.
В предыдущем топике был краткий список нюансов мобильных клиентов:
— Outlook (android) — неверный расчет процентов для ширины многоколоночных элементов. Погрешность около 0.2%. Мелочь, но противная.
— Yahoo! (iOS) — нет поддержки CSS3 (не хватает border-radius)
— Google Inbox (iOS, android) — еще более непредсказуемое поведение свойства width, нежели в gmail. В остальном принцип рендеринга схож. Нет поддержки медиазапросов.
— Gmail (iOS, android) — свойство width для блочных элементов и картинок в принципе не поддерживается. В асимметричных по колонкам письмах начинается фарш. Если вы шлете неадаптивное письмо, то клиент пытается его адаптировать по собственным алгоритмам. На Андроиде получается тоже фарш. На iOS есть возможность просмотреть неадаптированный оригинал. Нет поддержки медиазапросов.
— Mail.ru (android, iOS) — в целом ок. Отвратная реализация переноса текста. При трансформации номера телефона в ссылку(и вообще любая трансформация текста в ссылку) сама ссылка не подхватывает цвет оформления из css. Нет поддержки медиазапросов.
— My.com mail — движок идентичен приложению mail.ru
— Yandex mail (web, android) — нет поддержки медиазапросов. На андроид клиенте были замечены погрешности при расчете ширины многоколоночных элементов.
— Sparrow — был идеальным почтовым клиентом за исключением того, что его интерфейс не менялся еще со времен 4-го айфона. Ныне выпилен из эппстора.
— Apple Mail (iOS) — body имеет железобетонный margin:15px; Его никак не победить.
— Mailbox (iOS, android) — в целом прекрасен. Но базовые значения body равны нулю, как и у всех яблочных почтовых клиентов кроме Аутлка и Apple mail. Тем самым все еще уступает Аутлуку.
— Android Mail — Нареканий нет, за исключением рендеринга тех, картинок, исходный размер которых превышает указанный в верстке. Через мои руки прошел десяток телефонов на андроиде и везде, во всех почтовых клиентах на андроиде есть артефакты на таких вот картинках.
n000b
19.10.2015 14:02Если с обычными ссылками такой проблемы нет может можно использовать перенаправление на своём сайте?
Заодно посчитать клики.dudeonthehorse
19.10.2015 14:09+1Слишком адовый костыль. С другой стороны можно по клику на номер телефона отправлять получателя на страницу контактов на сайте, но это говнарство по отношению к пользователю. Я лучше смирюсь с дефолтным синим цветом.
n000b
19.10.2015 14:21В чём ад то, пользователь по идеи не должен заметить перенаправление.
<a href="phone.php">
<?php header("Location: tel:+123456789"); exit; ?>
consalt
19.10.2015 16:48+1Всегда пользуемся полными номерами вида +375 (29) 469 09 67. Что вам мешает делать +7 (800) 84 95 48?
navion
19.10.2015 17:31+1Ему не нравится цвет ссылок, когда устройство распознаёт номер в тексте.
А скобки тут не нужны — они используются для выделения местного кода, когда не указан код страны.
alexpp
Как же вам напекло-то — не звонят? Номер всегда можно скопировать и вставить в звонилку, было бы желание.
dudeonthehorse
Слабая попытка подкинуть уголька. Меня не устраивает вариант когда элемент выглядит как ссылка, но не звонит. Либо сильно выбивается из общего стиля, хотя я не оформлял его как ссылку, что кстати по принципу контраста повышает шансы на клик, но я преследую не эти цели. Если я могу влиять на оформление обычных ссылок, то хочу также и оформлять ссылки-звонилки. На циферки пускай теребят маркетологи. Меня интересует логичность поведения элементов интерфейса письма и какой-никакой, но контроль.
alexpp
Никакого троллинга и нет. Просто не считаю отображение телефона как текста — какой-то проблемой. Судя по тому, что преобразование в некую ссылку не возведено в стандарт — не один я такой.
dudeonthehorse
iOS приложения: Google Inbox, Yandex, Mail.ru, My.com НАСИЛЬНО преобразовывают номер для звонка и делают ссылку дефолтным блевотносиним цветом
И на это не повлиять без инлайн-вмешательства.