Тулбар с напоминанием пользователям обновить их браузер

07 июня 2012
Тулбар с напоминанием пользователям обновить их браузер
Good news everyone! Сегодня мой коллега Алексей (mr.troll) сделал волшебную штуку: http://2s.ru/2012/t142_browser_suggest/demo1_ru.html
полноценный тулбар, который можно одной строчкой ставить на любой сайт.
```
Русский язык:
<script type="text/javascript" src="http://2s.ru/2012/t142_browser_suggest/browser_suggest_ru.js" charset="windows-1251"></script>
```
```
English:
<script type="text/javascript" src="http://2s.ru/2012/t142_browser_suggest/browser_suggest_en.js"></script>
```
Так что я предлагаю вам описание от автора. Которое правда весьма сумбурно, по сути это цитаты из логов скайпа. Я постаралась почти не цензурировать всю экспрессию, но оформить из этого нормальное описание. Плюс я помогла сделать пару demo и, главное, demo_bookmark, так чтобы можно было заранее примерить тулбар на любом известном вам сайте.

Avesome_Browser_Detection_And_Suggestion_Toolbar_Script

Я уже несколько лет читаю статьи с призывами "Остановим IE6", "Поместим кнопочку, чтобы апгрейдили" и т.п. Даже Microsoft сделала пару сайтов по этому поводу. Отдельные сайты протестуют против отдельного IE6. Везде пишут поучаствовать — но никто не предлагает как. В лучшем случае делают прямоугольные баннеры "stop ie" — большого размера. Причём страшные, что пиздец. А пользователи ie6 — не ходят на сайты посвящённые протесту ie6 — они ходят на сотни других интересных сайтов.

Я бы рад был поучаствовать раньше — но блин меня останавливало 3 момента:
1. Куда приткнуть злосчастный баннер, если нет места.
2. Если тулбар — то его надо самому верстать, и он точно сломает вёрстку тех элементов, которые абсолютно позиционированы от границ body.
3. Почему только ie? Мне вот недавно сказали, что у одного из сайтов едет вёрстка в Opera 9 — я даже отвечать не стал. Плюс, нельзя человеку советовать, например, обновить ie8 до ie9, если у него XP.
Ещё мне никогда не нравились ссылки, потому что по ссылкам "Скачайте новый браузер бесплатно" — всегда вирусы или реклама. Поэтому в тулбаре вместе со ссылкой я пишу кратко, как обновить браузер из самого браузера. Плюс тулбар сделан неброским.

Demo
- http://2s.ru/2012/t142_browser_suggest/demo1_ru.html — обычная страница с body margin:10px; и border-top. Можно видеть что тулбар не влияет на все внутренние отступы у body.
- http://2s.ru/2012/t142_browser_suggest/demo2_ru.html — demo, с футером, который всегда внизу =)
- http://2s.ru/2012/t142_browser_suggest/demo_bookmark_ru.html — демо, где вы можете добавить букмарк, на панель закладок и с её помощью примерить тулбар на любой сайт.
Тулбар будет показывать пользователю предложение обновить браузер, если у него старое говно.
В скрипте, для примера сейчас список стабильных версий специально завышен. Чтобы сейчас любом браузере можно посмотреть результат, в качестве стабильных в demo используются версии:
```
var stable_browsers={'Explorer':10,'Firefox':15,'Opera':12,'Chrome':22};
```
Если не задавать версии в ручную, то по умолчанию используется следующее:
```
var stable_browsers={'Explorer':8,'Firefox':4,'Opera':10,'Chrome':10};
```
Это вариант когда обновить предлагается совсем уж старое п.о. Все цифры, разумеется можно указывать дробно, например 'Opera':11.64.

Сложнее всего было сделать корректный тулбар под ie6+, так что под ie6-7 не так красиво как под ie8 и обычные браузеры.
Особенность тулбара — в том что он никак не херит существующую вёрстку:
http://2s.ru/2012/t142_browser_suggest/demo2_ru.html — пример — где вёрстка с абсолютно позиционированным блоком справа, и футером точно внизу страницы.

Тулбар подстраивается так — чтобы не затронуть никакие стили body — он как бы подвигает весь body и все его элементы вниз. Весь день на это потратил. На сайте игры (*название вырезано. прим. Елена, потому что пока сырая альфа.*) будет примерно этот же тулбар + не будет показываться блок входа вообще в случае IE. Вместо него ещё одно предупреждение.

Сам тулбар — в DOM лежит вне body. Т.е. он как бы прямой потомок <html>. А самому <html> задаётся paddingTop, а body - position:relative. Для ие6-7 к сожалению нельзя создавать элементы прямо в <html> приходится сувать в body. Но вёрстка от этого не сильно пострадает. В ие6-7 и без тулбара вёрстка страдает =)) Т.е. он всё равно ведь будет позиционироватся над body. Т.е. с отрицательным margin. А paddingTop у <html> работает и в ие6. (Прим. Елены: Вот например скриншот usabili из ie6, в тех местах где вёрстка поехала — тулбар не виноват. Замечу, что как раз тут видно что все абсолютно позиционированные элементы сверху — очень правильно сдвинуты тулбаром вниз).

Так же js содержит в себе png градиент, для ie8+ и нормальных браузеров. в ие 6-7 градиент делается через filther, поэтому я его красненький сделал. Сами иконки браузеров правда не вшил пока в код, а так бы совсем хорошо было.
Как-то распространить надо бы. Я залил это в открытый репозиторий на https://bitbucket.org/mr_troll/bs_toolbar/ может кто форкнет. А так же теперь добавлен репозиторий на GitHub — https://github.com/mr-troll/bs_toolbar

Так что в идеале, можно будет вбить список минимально допустимых версий и ставить этот скрипт вообще на каждый сайт.
Т.е. в самом мягком варианте — показывать тулбар только для ie6-7, firefox< 3, Opera< 10, Chrome <10 (владельцы интернет магазинов редко любят у себя лишние тулбары, но всегда можно договориться).
Если владелец сайта не против инноваций — то можно и для ie8 показывать и для FF<10, Opera<11.5, и Chrome<18.

Спрайты

Как уже говорилось, градиент тулбара уже вшит в js-код. Но спрайты браузеров пока нет. Вот они:

browser_logos-32.png для ie7+ и остальных, и browser_logos-32.gif для ie6, вы можете найти и заменить их в коде, если предпочитаете хранить их на своём сайте.

Послесловие

На всех страницах бложика — тулбар работает со стандартными настройками. Если перейти конкретно на страницу этой новости (не на главную) — то тулбар будет форсированно показан. Как он вам, дорогие читатели? Оставляйте комментарии, читайте код, присылайте правки, делайте переводы на другие языки или делайте свой форк. Ну, и самое главное, скачивайте и ставьте тулбар на свои сайты, давайте немножко ускорим исчезновение старых браузеров.

P.S. Добавилась поддержка Английского языка и гитхаб репозиторий.

Прокоментируй статью, хотя бы пару слов!

#1
SelenIT

14.06.2012 15:22:24

А вот новая остроумная «технология» для борьбы с IE7 :)
#2
Елена Лунная

14.06.2012 15:34:22

ну, я предлагаю не такое драконовское решение (а так есть ещё лучше вариант, см spasiboeva.ru в ie). Тулбар всё таки не сказывается на юзабилити и ценах. Ведь реально есть пользователи которые не могут обновить браузер.
#3
SelenIT

14.06.2012 17:31:52

По-моему, решение на spasiboeva.ru самое драконовское :). Всё-таки возможность хоть как-то завершить задуманное действие (хоть и с лишним кликом или небольшой переплатой) лучше для совсем-совсем обездоленного пользователя IE, чем та, кхм... переадресация :). К тому же банне... ой, прошу прощения, тулбар психологически может восприниматься как назойливая реклама, а вот апелляция к кошельку сразу придает пользователю личной заинтересованности (даже те, кто реально не может обновиться, начнут донимать своих админов, и дело хоть как-то сдвинется..:)
#4
Елена Лунная

14.06.2012 18:04:42

Я и говорю про то, что решение спасибоева и повышение цены - драконовские методы.
Нет. Тулбар априори психологически не воспринимается как способ заработать деньги, если он не мигает, не содержит стоп-слов "скачать бесплатно только у нас" и других эффектов на которые мозг давно выработал рекламные фильтры. А вот большой красный баннер "заработаем деньги на пользователях IE", не только подпадает под фильтр рекламы, но и являются способом заработать деньги. Это ж просто вообще нельзя сравнивать. Плюс, тулбар говорит как обновить браузер средствами самого браузера.
Суть данного тулбара - это скрипт, который любой владелец сайта (не обязательно профессиональный верстальщик) может за минуту поставить на свой сайт. Вы готовы поставить "большой красный баннер" на свой сайт?
Владельцы kogan.com тоже не готовы, поэтому этот баннер нигде кроме их блога не висит. (проверено в ie6-7).
А вот тулбар, я готова поставить, и поставила в своём блоге, а также он будет стоять на всех новых (и возможно старых) сайтах которые мы делаем. Призываю вас лично поддержать эту акцию. Через месяц я сделаю рекламный пост, где обещаю указать прямые ссылки всех сайтов использующих тулбар. Даже если сайт показывает его только для IE6. (присылайте ссылки мне на askme@usabili.ru, или коллеге на troll@2s.ru)
#5
SelenIT

14.06.2012 19:13:21

Идею я поддерживаю целиком и полностью! И инструкция, как обновить браузер силами самого браузера — великолепно.
Но вот насчет рекламы и т.п. я не совсем согласен. Лично для меня назойливая реклама в Сети — не то, что покушается на мои деньги (тут мне в чем-то проще, у меня онлайновых денег всё равно нет:), а то, что покушается на моё время. Будь то любой попап (лишнее движение, чтоб его закрыть), всевозможные непрошенные анкеты и т.п. Как ни крути, всё это — дополнительные действия, которые самому пользователю не нужны. Обновление браузера — не исключение ("что еще за глупости, икснадцать лет всё нормально показывало и еще столько же будет показывать, отстаньте уже").
Поэтому как-то мотивировать юзера на это усилие по смене привычного браузера на менее привычный нужно. И вариантов мотивации, имхо, не так уж много: убеждение (ссылка на отдельную страницу с ярким описанием страданий разработчиков и застоя отрасли в целом из-за засилья старых браузеров — и тут же краткая инструкция, как данный конкретный, уже заинтересовавшийся вопросом, юзер может внести личный трехкликовый вклад в спасение мира), запугивание (страничка с наглядной диаграммой кол-ва уязвимостей в текущей версии юзера и в последней, со ссылками, всё аргументированно...) и мотивация рублем. Последнее можно сделать не как у Когана, а аккуратнее: не штраф за неправильный браузер, а пользователям правильных — соблазнительная скидка :)
И насчет "мозгового фильтра на рекламу" — есть мнение, что юзеры с опытом, достаточным для его выработки, уже достаточно в теме для того, чтобы обновить браузер и без дополнительного напоминания :). А аудитория "динозавров" вполне может оказаться восприимчива именно к "яркому и мигающему". Впрочем, это тема для отдельного исследования (кстати, неплохо было бы добавить в скрипт возможность отслеживать реальные факты обновления — напр. запросы какой-то картинки с одной кукой, но разными версиями юзерагента — и процент их к кол-ву показов:), допускаю, что тут я могу быть в корне неправ.
Ну и пара замечаний по конкретному скрипту (всё относится к демо из статьи):
1) На узком экране (порядка 1000px — на нетбуках с чуть нестандартным шрифтом вполне реально) конец текста переносится на вторую строку и налезает на экран (так что вёрстка всё-таки чуть-чуть, но корячится);
2) У меня почему-то упорно не работает в IE9/Win 7 Pro x86 (во всех режимах). При загрузке демо с футером видно, как шапка страницы чуть "спрыгивает" вниз, но... больше ничего не происходит. Консоль чиста, JS-ошибок вроде как нет.
3) Для Оперы в демо пора обновить "современную" цифру — 12-я версия сегодня уже вышла, я уже пытался тестировать из-под нее :)
#6
Елена Лунная

14.06.2012 20:22:52

Да. Я тоже первым делом подумала, что вместо штрафа за ИЕ, нужно писать про скидки правильным браузерам. Вебмастер легко может поправить код написав про скидки в тексте тулбара.
Про отслеживание куксов, ip и рефёреров картинкой (иконками браузеров), всё не однозначно. Я могу собирать статистику с целью теста UX, но вебмастеры могут как-то, хмм, обидеться узнав что за их пользователями следят, кроме того счётчики по кликам иконок и контроль кукс можно встроить прямо в яваскрипт (при этом получив доступ к document.cookie сайта =) ). Так что лучше я официально заявлю, что следить за пользователями как-либо никто не будет, картинки можно скачать на свой сайт, а яваскрипт ничего никуда не посылает (это легко проверить в коде).
По замечаниям.
1) У меня монитор 1024px, так что я следила за этим, текст влезает. В случае если размер монитора меньше чем 1024, то для тулбара применяется

if(x < 1024){
toolbar.style.overflow='hidden';
}
Так что если вы не просто уменьшили окно после загрузки страницы - глюка быть не должно. (но при overflow пропадает приятное вылезание иконки на 2px за пределы тулбара).
2) ни у меня, ни у mr.troll - не стоит семёрка. так что в ie9 скрипт не протестирован, увы. Могу предположить, что ie9 не допускает не html5 совместимые теги. А для тулбара создаётся элемент browser (чтобы лишних стилей к нему не применялось). Попробуйте скачать код, и заменить на div эту строку
var toolbar = document.createElement("browser");
Но, поскольку ie9 по слухам довольно хорош, то пока не так актуально. Буду рада если вы сможете поправить код.
3) Код стабильных версий для конкретно этой страницы блога - обновила. Код демо, тоже попрошу сегодня обновить, спасибо за напоминание. (Опера всегда не вовремя =)).
Кстати свежая шутка про оперу, которую мы придумали http://ibash.org.ru/quote.php?id=15450
#7
SelenIT

14.06.2012 21:47:31

Насчет статистики — а нельзя ли открыто сделать ее отключаемой опцией? Пусть у вебмастера будет выбор — позволить хостингу иконок чуть последить за их пользователями во имя блага всей затеи, или отключить слежку, скачать картинки локально и т.п.
Баг в IE/Win 7, кажется, локализовал: она в юзерагенте подписана как NT 6.1, а скрипт "охотится" за NT 7.0 (подробнее про соответствие версий юзерагентам).
А вот насчет ширины... Да, моя промашка — я скукоживал изначально развернутое окно :). Но ведь эффективный размер окна может изменить не только ресайз, но и изменение zoom-а. Может, сделать совсем responsive — при уменьшении размера тулбара (можно, например, вписать в него iframe и ловить событие ресайза в его contentDocument-е) делать и шрифт поменьше, чтоб влезло с гарантией?
#8
Елена Лунная

14.06.2012 23:36:03
Всё не так просто. Задача собрать статистику пока не стоит, по нескольким причинам:
1) Мы можем посмотреть сколько человек со старыми браузерами, но мы не можем отследить если они обновили его, потому что скрипт должен сразу завершаться если у человека хорошая версия браузера. Нельзя подгружать лишние килобайты трафика таким людям (сам скрипт загруженный с gzip - 3.5 кб).
2) понятно, что можно легко сделать сотню опций к скрипту, вопрос за этим не стоит.
- Сохранять ли статистику о показах картинки пользователя (какой браузер, сайт, ip), а так же отправлять статистику кликов по внешней ссылке на сайт вендора.
- Настройку показывать ли тулбар повторно (и какое количество раз), count сохранять в куксе
- Убирать ли тулбар через какое-то время (замечу что сейчас его никак не убрать).
- Интегрировать ли картинки браузеров в яваскрипт (там есть кусок вшитого css кода, использовать data-url + способ для ие6-7, не помню уже какой).
- Настраивать цветовую гамму тулбара, его размер, градиент и т.п.
- Настраивать собственные сообщения вместо стандартных (локализация же).
- Волшебно настраивать стиль поведения по отношению к fixed элементам. Это не заметно сразу, но fixed элементы задаются всегда от краёв экрана, не зависимо от позиционирования родителей, так что отступы у body и html не влияют на них. При этом в случае если это какой-то тулбар сайта (facebook, twitter, lea.verow.me) их нежелательно двигать. Можно задать для js-тулбара отступ, так чтобы он был под тулбаром сайта (это не сломает UX). Можно чтобы тулбар переводил fixed элементы в absolute, а по событию document onscroll снова в fixed.
- Настраивать размер шрифта, и загружать другие иконки =).
Короче я могу много щас настроек придумать, тысячи их. Но надо помнить, что лучшее - враг хорошего. Задача тулбара - подстраиваться априори под любой дизайн, без настроек вообще. Единственная настройка которая оставлена - это stable_browsers, для веб-гиков которые хотят чтобы все пользователи сидели на nightly версиях чтобы могли смотреть свежие эксперементы с CSS , или наоборот не хотят досадовать заказчика у которого ie7 но когда хочется задать бой людям с ie6, и т.п.
Каждое препятствие выполнению действия пользователем (выбор настройки, загрузка картинок и т.п.) по мнению Дж. Спольски, уменьшает количество возможных пользователей вполовину. Вспомните ie6countdown.com, сайт майкрософт, который больше рекомендует писать в твиттер, чем ставить тулбары, а сами тулбары (которые год назад тоже появились, абсолютно страшные
http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0016_russian.jpg и весят аж 50кб!). При этом тот же сайт почему-то не пропагандирует борьбу с ie7 например. Нет сайтов которые говорят об устаревших Опере или FF.
P.S. Чтобы узнать событие zoom - не нужно ничего делать с ифреймами, событие прекрасно ловится в window.onresize. Если тулбар был в маленьком окне (<1024) и развернулся, то у него уже был overflow:hidden, ничего не изменится. Однако если уж человек решил изменить размер окна в меньшую сторону или увеличить масштаб, то это на мой взгляд очень редкий случай. Часто ли вы укрупняете масштаб страницы после открытия на реальном сайте? =)
P.P.S. Чтобы уменьшить размер шрифта, можно написать
toolbar.style.fontSize='13px';
как это сделано в тулбаре для оперы например.
P.P.P.S. Семёрка не NT 7? неожиданно же! Почитала статью от майкрософт. "Мы назвали Windows 7, потому что мы посчитали все версии и Vista была NT 6.0. Поэтому мы решили дать ей версию NT 6.1". *facepalm*. мне одной кажется что это похоже на?
#9
SelenIT

15.06.2012 14:36:07

Я говорил не о куче настроек, а об одной-единственной, а юзерам хороших браузеров можно спокойно выдавать 204 No Content и писать в базу запись об успехе:). Неужели неинтересно, насколько затея эффективна? Но это был лишь feature request на будущее, не настаиваю :)
Ифрейм мне был когда-то нужен для отслеживания изменения font-size в IE6 (window.onresize при этом не вызывается), для proof-of-concept'а эмуляции полностраничного зума в нем (в IE7 тоже работало). Без iframe так и не придумал, как отловить это событие, буду благодарен за наводку на правильный способ!
А насчет MS и ВП — да, есть такое. Дескать, менять мажорную версию в коде — "ломать совместимость", а не менять в маркетинге — "выглядеть лохами":). И ведь соблюли же! :)
#10
Елена Лунная

15.06.2012 15:20:26

Конечно статистика всегда интересна. (У меня кстати есть интересные данные, только нет времени выводы по ним написать, позже опубликую). Feature request'ы с удовольствием принимаются, надеюсь позже будут добавлены конечно. Но пока, насколько я вижу никто на постоянной основе на свой сайт не поставил скрипт (ну, кроме меня).
Скрипт http://silverflame.at.tut.by/ie.html у меня ничего особенного в ie6-7 не делает. По крайней мере parent.document.body.style.zoom у меня не изменяется. Это точно.
Правильный способ отлавливать и zoom и resize окна (что одно и то же) - использовать window.resize, работает в ie8. Под правильным способом, я конечно не подразумеваю поддержку ie6 (0.6%) и ie7 (2%) =). Чтобы они наконец умерли и создан тулбар.
Если протестируете тулбар в ie6-7, то там он как раз выглядит не очень красиво (об этом в статье упомянуто), за счёт того что он вставляется не в document.documentElement а в document.body. Надеюсь что в FF 3.5 он не развалится как-либо ещё.
Реквест-фич и багов у тулбара конечно много, но я надеюсь что преимуществ перед баннером всё таки больше. (Как минимум из него можно сделать абстрактный тулбар, а не только с уведомлением о браузерах).
Правки для Оперы и Win7 - внесли. Можете смотреть демо в них.
https://github.com/mr-troll/bs_toolbar/commit/cea9452f24447c87bbf06e167de871de1d2bcc98
#11
SelenIT

15.06.2012 17:05:03

Ясно, а то я как раз думал, что раз тулбар адресован пользователям архаичных браузеров — важно, чтоб именно там его текст был по-максимуму читаемым (чтоб инструкция достигла адресата :).
На silverflame.at.tut.by/ie.html zoom всего документа должен меняться при смене View - Text Size (единственный способ масштабирования, знакомый и привычный юзерам IE6). Реакцию на колесико мышки я туда не закладывал. У меня в IE9 as IE7 работает, настоящих "ископаемых" под рукой нет. А у Вас не реагирует именно на Text Size? Впрочем, это оффтопик.
И да, я сам масштабирую (увеличиваю) страницы довольно часто — читать модный 6-8 лет назад 11-пиксельный шрифт на современных HD-мониторах даже мне весьма некомфортно, хотя на зрение я обычно не жалуюсь. Причем очень долго я предпочитал чисто текстовый зум, на полностраничный переучился относительно недавно.

Чтобы оставить комментарий нужно войти или зарегистрироваться (Регистрируйтесь за 5 секунд, без подтверждения email и т.п.).
Либо волшебно используйте ваш логин в Google, Яндекс, рамблер или ЖЖ чтобы войти через Open_ID

Семь лет и двенадцать месяцев

Немного изменён дизайн блога

Тулбар с напоминанием пользователям обновить их браузер

Avesome_Browser_Detection_And_Suggestion_Toolbar_Script

Demo

Спрайты

Послесловие

Комментарии:

15 самых популярных статей:

Логин/E-mail:	Пароль:
или зарегистрируйтесь