Мобильная версия ★ unicode-table.com на всех прилавках страны

Почему нужна мобильная версия

В последнее время Google всё настойчивей стал присылать уведомления: 

«Сайт не оптимизирован для мобильных устройств. У посетителей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.»

Проще говоря, сайт опустят глубоко вниз. Новый мобильный фактор, как говорит руководство Google, включён в алгоритм, чтобы пользователи получали более релевантные результаты, оптимизированные под мобильные устройства. Мы согласились. Тем более что стали терять пользователей, да и самим давно хотелось пользоваться UT с телефона.

Стали выбирать решение:

  1. Мобильное приложение;
  2. Отдельная мобильная версия на поддомене;
  3. Адаптивная вёрстка, подстраивающаяся под разрешение любого устройства.

Создавать мобильное приложение дорого и долго. А, главное, никак не решает проблему отсутствия мобильной версии сайта (а следовательно, низких показателей в поиске). Третий вариант рекомендуется Google как оптимальный.

Что делать с главной страницей

Пользоваться unicode-table.com на телефоне действительно было затруднительно. Мелко. Неудобно. Зависает. Мы решили отказаться от полной таблицы в мобильной версии. И сосредоточиться на удобном поиске. Функционал мобильной версии получался другим, поэтому адаптив бы нас не спас и мы сделали отдельный сайт на поддомене.

UT чаще всего используют для поиска и быстрого копирования символа в смс, любимую социальную сеть, мессенджер, письмо или заметку. Логично сделать для пользователей вкладки, в которых выводить наиболее востребованные наборы. А в первой сохранять все использованные или просмотренные ранее символы.

Главная страница unicode-table в телефонеМобильная версия unicode-table.com

Иконки символов на UT выводятся супер-шрифтом собственной сборки, который содержит весь Юникод. Он разбит на сотни маленьких файлов и сконвертирован для использования в вебе. Мы подгружаем его когда нужно, по блокам. На главной странице мы решили его отключить, чтобы пользователи смартфонов увидели привычные emoji, подставляемые операционной системой.

Важно было понять что выносить в шапку, чтобы сделать её максимально ёмкой и компактной. В результате оставили только самое необходимое:

  1. Лого (для идентификации ресурса и возможности перейти на главную);
  2. Поле поиска. От кнопки «Найти» решено было отказаться;
  3. Основное меню в виде иконки гамбургера.

Технические моменты

Скопировать символ в буфер на мобильный устройствах ещё сложнее, чем на обычных компьютерах, где для этих целей используется устаревший Flash. Нужно просто оставить пользователю стандартный функционал телефона. По долгому нажатию на символ всплывает меню с возможностью скопировать. При этом возникает событие «tap», которое можно перехватить и добавить символ в «Недавно использованные». 

Первая проблема с которой мы столкнулись на айфоне — никак получалось выделить ячейку с нужным символом. При удержании пальца на экране, выделение работало как угодно, только не так как нужно. Чаще всего выделялся целый блок (родительский <div>), а иногда произвольный набор символов. И лишь изредка выделялся тот самый, в который жмёшь. Помучившись несколько дней и попробовав разные варианты вёрстки вплоть до табличной, мы вспомнили, как работает выделение на сайтах с большими текстами: телефон стремится выделить абзац. Так родилось решение — заключить каждый символ в отдельный тег <p>. Телефон стал думать, что каждый символ — это самодостаточный абзац и выделять только его.

Выделение на телефонеВыделение на айфоне

Во-вторых, нужно было как-то объяснить Google, что m.unicode-table.com — это не новый сайт на поддомене, а всего лишь мобильная версия уже существующего сайта. Чтобы Google склеил новые мобильные страницы с уже существующими. Решение обнаружилось в справке Google.Developers

На обычной странице (http://www.example.com/page-1) нужно добавить следующий код:
<br />
&lt;link rel=&quot;alternate&quot; media=&quot;only screen and (max-width: 640px)&quot;<br />
      href=&quot;http://m.example.com/page-1&quot; &gt;<br />
а на странице для мобильных устройств (http://m.example.com/page-1) такие атрибуты:
<br />
&lt;link rel=&quot;canonical&quot; href=&quot;http://www.example.com/page-1&quot; &gt;<br />

Эти атрибуты помогают роботу Googlebot найти ваш контент и определить взаимосвязь между обычными и мобильными страницами сайта.

При первом заходе на сайт с мобильного устройства, пользователь переадресуется на мобильную версию. Если после этого он возвращается по ссылке «Перейти к полной версии», это запоминается и автоматический переход больше не происходит. Определение устройства производится с помощью HTTP-заголовка User-Agent. Примеры определения устройства по этому заголовку для разных языков программирования можно увидеть на сайте: http://detectmobilebrowsers.com/

У нас получился отдельный домен для основной версии сайта, отдельный для мобильной версии и ещё один для статических файлов, таких как CSS и JS. Из-за политики безопасности браузеров это может нести некоторые проблемы, когда, например, не отображаются некоторые шрифты, подключаемые с соседнего поддомена. Это решается с помощью специального HTTP-заголовка, в котором перечисляются «доверяемые» домены:
Access-Control-Allow-Origin: http://one.example.com, http://two.example.comp

Почему unicode-table.com лучше, чем стандартные символьные клавиатуры на телефоне

1. Стандартные клавиатуры есть не у всех. На айфонах они появились только с iOS версии 8.3.
2. В стандартные клавиатуры входят только значки Emoji. А у нас в поиске все 70 000 символов.
3. UT — это отечественный продукт. Не содержит красителей, консервантов и ГМО.

m.unicode-table.com

 

Про кнопки в лифте

Кнопки лифта

Когда я захожу в лифт, на горизонте обязательно появляется девушка, которая бежит через весь этаж и кричит: «Подождите!» или не кричит, а просто молча несётся с выпученными глазами и машет руками. В этот момент я всегда начинаю сильно переживать, что эти самые руки в последний момент зажмёт дверями и девушка больше не сможет нормально разговаривать с подругами. Оперативно пытаюсь сообразить, какую кнопку нажать, чтобы лифт не закрылся. Ещё ни разу у меня не получилось быстро выстроить в голове правильную логическую конструкцию:

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

Бац! Двери захлопнулись. Опять не успел.

А ведь всё очень просто. Нужно выкинуть кнопку закрывания дверей. Каждый, кто заходит в лифт, выбирает нужный этаж, а последний нажимает на свой этаж двойным тапом (или держит кнопку одну секунду). Двери закрываются и лифт едет.

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

Планы эвакуации

Когда смотришь на некоторые планы эвакуации, кажется, что их рисовали вовсе не люди и точно не для людей. Больше всего их любят импортировать откуда-нибудь из автокада: вроде как максимально точный чертёж помещения. Но подходит ли этот чертёж для того, чтобы обычный человек без специального образования понял, где он находится, как устроено здание и куда бежать?

Между тем, есть и свои тонкости. С 2010 года по ГОСТу планы эвакуации следует выполнять на фотолюминесцентных материалах. Минимальный размер планов 40 х 30 см. Высота шрифта не менее 5 мм. Символы должны быть размером от 5 до 18 мм. Указано даже то, как эти значки должны выглядеть. На деле же вообще хорошо, если повесят огрызок, напечатанный чёрно-белым принтером на листе A4, а то могут и ничего не повесить.

Ни в одном плане, что я видел не указано, как звонить пожарным с мобильного телефона. Везде только 01. У нас в офисе, например, вообще нет городского телефона. Дома я тоже не пользуюсь городским. Много ли людей знают, что с мобильного о пожаре нужно звонить по телефону 112? А из тех кто слышал об этом краем уха, многие ли вспомнят этот номер в панике, когда дорога каждая секунда?

У меня давно была мечта нарисовать план эвакуации и вот первый заход:

MyStupidDay или чем заняться на работе

Пришёл такой Олег и говорит: надо делать бомбу для офисного планктона. Фишкинет приелись, Вконтакте уже не тот, юпорн закрыт админом, башорг в печёнках сидит. Люди в офисах скучают, засыпают. Чем заняться нормальному человеку? Сколько там ещё до конца рабочего дня? А до пятницы?

Встречайте «Мой любимый день». Даст ответы на все ваши вопросы. Сайт создан с нуля за 2 дня.

MyStupidDay —  Следи за временем

От себя только добавлю, что сайт свёрстан на html5 практически без картинок: все тенюшки и градиенты сделаны на css. А если вы их не видите, то удалите ваш браузер и поставьте Файрфокс. В скором будущем: переводы на все мировые языки. Возможность отслеживать, сколько дней осталось до весны, до лета, до дня рождения, до отпуска, до зарплаты... Ждём ваших идей.

Как изменился дизайн гугл карт

Сохранились карты гугла 2009 года, когда на месте Исаакиевского собора был обозначен Манеж. А сам собор стоял в районе недавно открытой станции метро Адмиралтейской.

За три года контуры домов стали побледнее, цвета поприятнее. Исправили многие неточности. Впрочем, синий мост (самый широкий мост в городе) перед зданием Мариинского дворца так и не появился. Вместо него два маленьких мостика по краям.

При увеличении теперь даже видны трёхмерные модели главных архитектурных памятников.

Мы запустили таблицу символов Юникода

Мы запустили бета-версию таблицы символов Юникода: unicode-table.com
Это информационно-познавательный ресурс про буквы, символы, письменности и всё, что с ними связано.

Что у нас есть, чего нет ни у кого:
— вся таблица на одной странице с клёвой подгрузкой;
— перевод названий всех русских символов;
— географическая привязка той или иной письменности к карте мира.

Что ещё хорошего:
— можно легко перейти к любому разделу и диапазону; можно подсвечивать;
— работает русская и английская версия;
— можно отправить ссылку на любой символ или диапазон, скопировав их из адресной строки;
— работает поиск символов и разделов.

Планы развития:
— перевод на другие языки;
— сделать нормальный поиск;
— перевод всех иероглифов;
— сделать индикатор, показывающий ваше текущее положение при промотке таблицы;
— сделать так, чтобы все символы отображались на любых платформах;
— подготовить интересные наборы символов (кроме «чаще всего ищут»);
— сделать подробные описания разделов, письменностей;
— добавить другие плоскости Юникода (после 65 000 символов);
— оптимизировать скорость загрузки страниц и провести рефакторинг;
— много других мелких улучшений.

Кто участвовал в создании проекта:
Сергей Асанов: идея, дизайн, вёрстка
Олег Григорьев: всё программирование, внутренняя структура, система контроля версий
— Александра Палашина: страны, разделы и их описания на всех языках, часть символов в русской локализации
— Анна Кривоносова: все символы в русской локализации

Любые идеи по развитию сайта, можете оставлять здесь или на самом сайте во вкладке «Отзывы и предложения».

Если вам симпатичен этот проект, вы можете перевести нам любую сумму:
Яндекс.Деньги: 41001178031043
Вебмани: R127589510153

Знаете другие языки и хотите внести свой вклад? Мы ищем тех, кто сможет перевести интерфейс, названия разделов и символов на языки:
немецкий (занято)
— испанский
— китайский
— японский
— любые другие языки...

Есть вопросы? Хотите принять участие? Пишите: sa@unicode-table.com

Новый дизайн Яндекс Погоды

Не долго ругал я новые ужасные иконки на Яндекс.Погоде. Заходишь на страницу и при беглом взгляде не можешь оценить, когда солнечно будет, когда пасмурно. Всё одним цветом.

 

Как вдруг Яндекс одумался и сделал иконки цветными. Хотя всё равно они какие-то странные.

 

И чем им не нравились старые красивые иконки? Может ещё раз одумаются и всё вернут?

Названия станций в петербургском метро

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

Так, например, могла бы выглядеть Адмиралтейская, если бы была пересадочной на зелёную линию (надеюсь скоро так и будет).

Адмиралтейская пересадочная

Символ тонкого пробела в html для разбиения разрядов чисел

Всегда думал, как здорово разбивать разряды в цене не целым пробелом, а вдвое меньше: и глаз не спотыкается и разряды хорошо видно.

Разделение разрядов чисел полупробелом

В интернете с этим делом казалось бы сложнее — раньше мы всегда для этих целей использовали неразрывный пробел &nbsp;. Но, как выяснилось, в html есть замечательный символ &thinsp; — тонкий пробел, решающий разом все проблемы.

10000000
10 000 000
10 000 000

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

upd2. Целая батарея различных символов пробелов (и тонких и толстых), которые есть в Юникоде. Спасибо Никите Иванову

Цветовое кодирование маршрутов трамваев

Многие не знают, что ещё с советских времён маршруты трамваев кодируют цветом. Справа и слева от номера расположены две цветные полосы. У каждого маршрута в каждом конкретном районе они индивидуальны. Два красных, красный и синий, два зелёных, зелёный и белый и т. д.

Трамвай 55 - цветовое кодирование маршрутов

Это очень удобно, когда стоишь и ждёшь 55-й, чтобы поехать в универ, и уже издалека видно, что это не гадкий 47-й, который идёт только до Удельного парка, а любимый 55-й.

Трамвай 100 - цветовое кодирование маршрутов

Проспект Просвещения, маршрут номер 100. Фото не моё.

Кто ездит в общественном транспорте в Питере, не могли не заметить появление странных голубоглазых устройств в оранжевом корпусе, прикрученных к поручням. С нового года наконец случится то, о чём я так долго мечтал. Чтобы оплатить проезд, достаточно будет поднести телефон к этой штуке. И никаких кондукторов, никаких наличных, никаких билетов. Красота.

Терминал по продаже билетов на «Зенит»

В этом году вновь попробовал воспользоваться автоматическим терминалом по покупке билетов на «Зенит». С прошлого года ничего не изменилось: автоматы всё такие же тормозные, а интерфейс остался всё таким же убогим и запутанным.

Сначала предлагается схема стадиона «Петровский» для выбора сектора. После нажатия на конкретный сектор, он отображается в увеличенном размере.

Схема стадиона Петровский по секторам

Допустим, вы хотите купить билет в 10-й сектор, но ближе к центру стадиона, т.е. с правой стороны, на границе с 9-м. Вроде бы всё просто и понятно. Однако, когда мы в прошлый раз пришли на стадион, оказалось, что наши места ровно с противоположной стороны, на границе с 11-м сектором. Разгадка проста. После увеличения сектора он отображается не так, как на первоначальной картинке, а наоборот: внизу — первый ряд, который ближе всего к полю, а вверху — последний. Стали бы вы стоя в общественном месте у терминала, разглядывать и изучать, а тем более вчитываться в какие-то надписи?

Почему не сделать интерфейс более человечным?

Новый интерфейс терминала Зенит

Выбрали 10-й сектор, и вот он перед нами увеличенный. И не перевёрнутый вверх ногами. Вверху виден зелёный кусок поля и сразу всё понятно. И зачем 4 разных цвета для кружочков? Достаточно бесцветного серого для свободных мест, из которых я могу выбирать, и красного — для уже занятых. Жмём в 7-м ряду на 1 и 2 место и они выделяются зелёным:

Новый интерфейс терминала Зенит

Тайна зелёных стрелок

На днях была разгадана тайна зелёных стрелок в петербургском метро на станциях Спасской и Звенигородской, которые зачастую наклеены против движения потоков и тем самым, вводящие многих в заблуждение и полнейший ступор. Вот Женя Софронов хорошо писал, что ему буквально физиологически сложно заходить в туннель, где все стрелки смотрят в противоположную сторону.

Как удалось выяснить у работников метрополитена, стрелки являются флуорисцентными. И при отсутствии освещения в чрезвычайной ситуации указывают направление эвакуации.

Не знаю, насколько часто на станциях полностью отключают свет (такое хоть раз случалось за всю историю питерской подземки?), но всем очевидино, что эти стрелочки являются полнейшим бредом воспалённой фантазии руководства метрополитена, которое этим метрополитеном вряд ли пользуется.

Рост известных людей

Рост известных людей и политиков

Весьма забавные данные о росте известных людей и политиков. Я как-то совсем не обращал внимания, что наш нынешний президент не слишком высок. Ельцин и Пётр I — просто великаны. Как улучшить график, можно ли дополнить ещё какими-нибудь интересными фактами?

Не прислоняться

Места для пассажиров с детьми и инвалидов

И опять о любимом метро.
Почему так сложно сделать одинаковые расстояния между строками?
Почему сложно взять нормальный шрифт убрать эти страшные значки и стрелку?
Почему нужно писать заглавными буквами?
Уже давно выяснили, что мы распознаём слова не по буквам, а по форме. Некоторые буквы в слове могут даже быть перепутаны местами. Когда слово состоит только из прописных букв, нам приходится читать его по буквам, мы не можем воспринять его целиком.
И почему не вспомнить о пожилых людях?

Места для инвалидов, людей пожилого возраста и пассажиров с детьми

И меня всегда раздражала надпись «Не прислоняться», появившаяся в петербургском метро в 90-е годы с этим красным кирпичом вместо буквы о. Ведь было раньше нормально.

Не прислоняться