Мобильная версия ★ 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) нужно добавить следующий код:

<link rel="alternate" media="only screen and (max-width: 640px)"
      href="http://m.example.com/page-1" >

а на странице для мобильных устройств (http://m.example.com/page-1) такие атрибуты:

<link rel="canonical" href="http://www.example.com/page-1" >

Эти атрибуты помогают роботу 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

 

Таблица символов Юникода

Прошёл ровно год с тех пор, как мы запустили unicode-table.com. За это время проект подрос, окреп, обрёл постоянную аудиторию и перевалил посещаемостью за 2500 человек в сутки.

Поиск стал работать гораздо лучше. Правда не настолько хорошо, как он будет работать в ближайшем будущем. Ежедневно нам поступает около 2 000 поисковых запросов. Десятка самых популярных на русском языке выглядит так:
1. Серп и молот
2. Стрелка
3. Телефон
4. Сердце
5. Звезда
6. Крест 
7. Треугольник
8. Круг
9. А
10. Галочка

Серп и молот ☭ на первом месте, не потому, что наша аудитория — коммунисты, а потому, что он используется для примера в строке поиска. Англичане ищут практически тоже самое: «hammer and sickle», «arrow», «heart». А у немцев самый популярный запрос: «a». Немцы всегда были непонятными людьми.

Если же рассматривать запросы, которым пока не нашлось места в Юникоде, то самым популярным из них стал «хуй». На втором месте «рубль». Авторы стандарта предпочитают сотнями добавлять в него непонятные новые символы вроде love hotel: 🏩, но не символ рубля. Возможно это из-за того, что официально его пока никто не утверждал. Однако им пользуются тысячи людей ежедневно, не меньше, чем символами снеговика ⛄ или чашки кофе ☕, которые тоже никто не утверждал. 

Примерно с одинаковой настойчивостью люди также ищут и не находят «секс» и «палец». Стоит отдать должное воспитанности наших пользователей. Запрос «попа» по частоте превосходит «жопу».

Ещё у нас появились интересные наборы символов. Например, вот вам шахматные фигуры: ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟

На днях мы добавили раздел инструментов: кодировщики, расшифровщики, переворачивалки символов. Скоро появится что-нибудь ещё. Не упустите возможность поэкспериментировать с текстом.

Проект мы делаем в свободное от основной работы время, поэтому мы по-прежнему не реализовали большую часть наших задумок. Зато мы успели выложить интернационализацию на ГитХаб. Теперь любой желающий сможет принять участие в переводе проекта на свой язык. Присоединяйтесь ✌!

Спасибо вам за отзывы. Нам каждый месяц приходят письма с разными просьбами, пожеланиями об улучшении и просто благодарностями. Очень приятно ☺.

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

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

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

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

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

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

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

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

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

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

перевернутый текст — ɯɔʞǝɯ ņıqɯʎнdǝʚǝdǝu

˙˙˙ʎʚоvоʟ ɐн ʟон ɔ ǝɔʚ qɯиʚɐɯɔ ǝɯиƍoıv ǝжоɯ ıqʚ иvɔǝ

Недавно я задался вопросом, можно ли писать вверх ногами. Открой фотошоп, скажите вы мне, переверни текст на 180 градусов и вот тебе пожалуйста. Но хотелось, чтобы это была не картинка, а настоящий текст, который можно скопировать и отправить другу. 
Так я открыл любопытный метод, уже реализованный до меня, правда только на английском. Принцип прост: в таблице символов юникода есть очень много символов для отображения самых разных языков. И некоторые эти символы очень похожи на наши буквы перевёрнутые вверх ногами. Оставалось лишь составить таблицу соответствия. Самые большие проблемы возникли с буквами «г», «з», «щ» и «ъ» . Но и их я кое-как решил. Для тех, кто хочет, можно попробовать перевернуть текст вверх ногами.