Уже достаточно долгое время мы ведем поддержку двух мобильных версий Поиска Mail.Ru. Этим постом хотелось бы раскрыть немного технической информации о графических интерфейсах.
Первая из версий ориентирована на простые телефоны, которые медленно, но верно покидают современный рынок мобильных устройств, но еще не полностью забыты. К этой категории мы относим телефоны без полноценной операционной системы, браузеры в которых устарели, не понимают полноценного JavaScript-кода и не могут в силу своих ограничений поддержать быстро развивающиеся интернет-технологии. Для этой группы пришлось применять проверенный старый способ — .png- и .gif-графику.
Вторая версия, которую мы поддерживаем и развиваем, предназначена для смартфонов. О ней сегодня и пойдет речь.
Современные смартфоны обладают рядом особенностей, о которых нельзя забывать и к которым приходится подстраиваться. Одна из них — появление экранов с увеличенной плотностью пикселей (в частности, Retina-экранов), возможность увеличения страницы и, как следствие этого, размытие обычных картинок. Из-за этого возникла потребность в использовании масштабируемой графики, которая бы выглядела четко как в масштабе 1:1, так и после многократного увеличения. Выходом из этой ситуации стало использование иконочных шрифтов. На картинке ниже представлено два варианта: на верхнем показана картинка .png, увеличенная в 2 раза, а снизу — результат применения шрифта с иконками с тем же увеличением.
Суть процесса заключается в том, что в шрифтовом файле буквы заменяются на графические иконки — по сути, создается уникальный шрифт. В нашем случае, к примеру, значок “@” заменен на лупу, английская буква “I” (от Internet) — на иконку земного шара, буква “P” (от pictures) — на иконку изображений, и так далее. При замене желательно придерживаться относительной схожести графики и символов-букв, чтобы в случае, если по каким-то причинам шрифт не подгрузился, пользователь все равно смог ориентироваться на сайте.
Подгрузка нестандартного шрифта происходит так же, как и для PC, с помощью CSS-конструкции @font-face. Единственным отличием и большим плюсом является то, что при работе со смартфонами не нужно заботиться о поддержке различных форматов шрифтов (.eot, .woff, .ttf, .svg), как это необходимо делать для PC из-за разнообразия браузеров.
Для телефонов на основе операционных систем iOS, Android, bada и BlackBerry достаточно подгружать один формат .ttf. Его прекрасно понимают не только встроенные браузеры, но и такие, как мобильный Firefox, Сhrome и Opera Mobile.
В файле стилей подгрузка выглядит следующим образом:
И все же, несмотря на то, что современные смартфоны обладают характеристиками, порой сравнимыми с персональными компьютерами, есть среди них и те, к которым требуется особый подход. В борьбе за улучшение качества отображения сайта пришлось выделить группу смартфонов, которой отдаются картинки. В эту группу вошли устройства на таких ОС, как Windows Phone 7 и Android версии ниже 2.2, а также браузер Opera Mini, открытый в телефоне с любой ОС. Это разделение мы произвели после экспериментов с тестовыми устройствами.
На серверной стороне каждое устройство, с которого заходят на сайт go.mail.ru, определяется по user agent и другим параметрам. Дальше эти данные передаются в шаблонизатор — на проекте Поиск Mail.Ru используется Jinja. Запись по определению необходимости отдавать пользователю шрифт или картинку выглядит так:
Переменная switchFont является true, если на устройство установлена операционная система iOS, BlackBerry, bada или Android версии выше или равной 2.2, а переменная is_opera_mini равна false. Далее в зависимости от значения switchFont в шаблонах выводится одно из двух.
Ниже показан кусок кода в шаблоне на примере логотипа:
Стили для него выглядят так:
Если шаблонизатор решил использовать вариант со шрифтом, к каждой букве, имеющей класс .logo__ttf, применяется нестандартный шрифт ‘goMailIco’, в котором стандартная буква m заменена на букву из фирменного шрифта mail.ru. Остается только подобрать правильный размер с помощью font-size, задать цвет, тени и при желании использовать все возможности CSS3.
В случае, когда мы берем картинку, ситуация практически стандартная, не считая того, что мы загружаем изображение в два раза больше необходимого. Например, чтобы показать картинку 200х300 пикселей на экране с увеличенной плотностью пикселей, необходимо загрузить картинку размером 400х600 пикселей и затем уменьшить, используя CSS-атрибуты, html-параметры, или, как в нашем случае, изображение в качестве фона с необходимыми размерами контейнера, фон в котором ужимается в два раза с помощью стиля “background-size: 100% auto;”.
При таком варианте возможна загрузка избыточно больших изображений для смартфонов со стандартным разрешением экрана (device-pixel-ratio: 1), которые не приспособлены для увеличения. Это компенсируется кодированием фонового изображения в формат base-64, что позволяет выиграть разницу в размере файла и избавиться от необходимости хранить и поддерживать изображения в двух форматах — 1 к 1 и 2 к 1. Плюс еще в том, что этот способ существенно минимизирует количество http-запросов к серверу, что увеличивает общую скорость загрузки.
Обсудив технические детали подключения шрифта с иконками, расскажем, как разрабатывается подобный шрифт. Если у вас уже есть иконки или другая графика в векторном формате, то половина работы сделана; в противном случае имеющиеся растровые иконки придется заново отрисовать в векторном редакторе. Можно расположить весь набор графики слоями в одном документе, но для сборки в шрифт лучше экспортировать каждый символ в отдельные файлы, формат которых сможет импортировать имеющийся редактор шрифтов.
Предпочтительно работать с большими размерами обьектов, от 500 до 1000 пикселей. При этом стоит избегать излишней детализации, ведь иконка может быть растеризована на экране размером 16-32 пикселя. Используйте одноцветные формы, без обводок и каких-либо эффектов; цвет и другие эффекты, например, тень, могут быть применены к иконке уже при верстке страницы. При необходимости использовать в иконке несколько цветов придется разбить ее на элементы, каждый из которых сделайте отдельным символом шрифта, которые затем будут наложены друг на друга и соответственно окрашены.
Существует несколько программ-редакторов, например Font Creator (для Windows), Glyphs (для Mac) или Inkscape (для Windows, Mac, Linux) — в нем можно сразу редактировать векторную графику и создать шрифт в svg-формате.
Для итогового результата не так важно, создаете ли вы новый шрифт или заменяете символы готового; но, добавляя символ в пустой шрифт, придется вручную искать и назначать соответствующий символу индекс для разных операционных систем, затем настраивать различные метрики. Проще взять за основу готовый шрифт с лицензией, допускающей его изменение — например, с сайта font.cc. Импортируем подготовленную векторную графику, заменяя выбранные буквы, и следим за соответствием размеров, отступов, выравниваем по базовой линии.
Если вы разбили иконку на разноцветные элементы, то лучше сохранить их позицию и размеры относительно друг друга при дальнейшем наложении. На этом этапе наверняка придется протестировать и, возможно, уточнить положение и размеры иконки.
Если ваш редактор сохраняет шрифт только в формат, отличный от .ttf, можно воспользоваться online-сервисами для конвертации, например, Fontsquirrel. Подобные сервисы также позволяют уменьшить размер файла, удалив неиспользуемые символы, но лучше это сделать на этапе разработки в редакторе.
Вот и все. Если вы нашли какое-то альтернативное решение для экранов со сверхвысоким разрешением — делитесь.
Ознакомиться с мобильной версией проекта Поиск можно зайдя по ссылке go.mail.ru с мобильного устройства.
Дария Скакун, разработчик мобильных версий проекта Поиск
Алексей Лиходзиевский, руководитель мобильного направления проекта Поиск
Первая из версий ориентирована на простые телефоны, которые медленно, но верно покидают современный рынок мобильных устройств, но еще не полностью забыты. К этой категории мы относим телефоны без полноценной операционной системы, браузеры в которых устарели, не понимают полноценного JavaScript-кода и не могут в силу своих ограничений поддержать быстро развивающиеся интернет-технологии. Для этой группы пришлось применять проверенный старый способ — .png- и .gif-графику.
Вторая версия, которую мы поддерживаем и развиваем, предназначена для смартфонов. О ней сегодня и пойдет речь.
Часть 1: Подключение иконочных шрифтов
Современные смартфоны обладают рядом особенностей, о которых нельзя забывать и к которым приходится подстраиваться. Одна из них — появление экранов с увеличенной плотностью пикселей (в частности, Retina-экранов), возможность увеличения страницы и, как следствие этого, размытие обычных картинок. Из-за этого возникла потребность в использовании масштабируемой графики, которая бы выглядела четко как в масштабе 1:1, так и после многократного увеличения. Выходом из этой ситуации стало использование иконочных шрифтов. На картинке ниже представлено два варианта: на верхнем показана картинка .png, увеличенная в 2 раза, а снизу — результат применения шрифта с иконками с тем же увеличением.
Суть процесса заключается в том, что в шрифтовом файле буквы заменяются на графические иконки — по сути, создается уникальный шрифт. В нашем случае, к примеру, значок “@” заменен на лупу, английская буква “I” (от Internet) — на иконку земного шара, буква “P” (от pictures) — на иконку изображений, и так далее. При замене желательно придерживаться относительной схожести графики и символов-букв, чтобы в случае, если по каким-то причинам шрифт не подгрузился, пользователь все равно смог ориентироваться на сайте.
Подгрузка нестандартного шрифта происходит так же, как и для PC, с помощью CSS-конструкции @font-face. Единственным отличием и большим плюсом является то, что при работе со смартфонами не нужно заботиться о поддержке различных форматов шрифтов (.eot, .woff, .ttf, .svg), как это необходимо делать для PC из-за разнообразия браузеров.
Для телефонов на основе операционных систем iOS, Android, bada и BlackBerry достаточно подгружать один формат .ttf. Его прекрасно понимают не только встроенные браузеры, но и такие, как мобильный Firefox, Сhrome и Opera Mobile.
В файле стилей подгрузка выглядит следующим образом:
@font-face {
font-family: 'goMailIco';
src: url("/font/goMailIco.ttf");
font-weight: normal;
font-style: normal;
}
И все же, несмотря на то, что современные смартфоны обладают характеристиками, порой сравнимыми с персональными компьютерами, есть среди них и те, к которым требуется особый подход. В борьбе за улучшение качества отображения сайта пришлось выделить группу смартфонов, которой отдаются картинки. В эту группу вошли устройства на таких ОС, как Windows Phone 7 и Android версии ниже 2.2, а также браузер Opera Mini, открытый в телефоне с любой ОС. Это разделение мы произвели после экспериментов с тестовыми устройствами.
На серверной стороне каждое устройство, с которого заходят на сайт go.mail.ru, определяется по user agent и другим параметрам. Дальше эти данные передаются в шаблонизатор — на проекте Поиск Mail.Ru используется Jinja. Запись по определению необходимости отдавать пользователю шрифт или картинку выглядит так:
{% set switchFont = (detector.os in ('iphone os', 'blackberry', 'bada') or
detector.os == 'android' and detector.osver >= 2.2) and
(not detector.is_opera_mini) %}
Переменная switchFont является true, если на устройство установлена операционная система iOS, BlackBerry, bada или Android версии выше или равной 2.2, а переменная is_opera_mini равна false. Далее в зависимости от значения switchFont в шаблонах выводится одно из двух.
Ниже показан кусок кода в шаблоне на примере логотипа:
{% if switchFont %}
<div class="logo__ttf">
<a href="#">
поиск<span class="logo__ttf_color">@</span>mail<span class="logo__ttf_color">.ru</span>
</a>
</div>
{% else %}
<a href="#">
<div class="logo__img"></div>
</a>
{% endif %}
Стили для него выглядят так:
.logo__img {
background: url(data:image/png) 0 0 no-repeat;
background-size: 100% auto;
width: 165px;
height: 25px;
}
.logo__ttf {
font-family: 'goMailIco';
color: #fff;
font-size: 24px;
}
.logo__ttf_color {
color: #ffb81d;
}
Если шаблонизатор решил использовать вариант со шрифтом, к каждой букве, имеющей класс .logo__ttf, применяется нестандартный шрифт ‘goMailIco’, в котором стандартная буква m заменена на букву из фирменного шрифта mail.ru. Остается только подобрать правильный размер с помощью font-size, задать цвет, тени и при желании использовать все возможности CSS3.
В случае, когда мы берем картинку, ситуация практически стандартная, не считая того, что мы загружаем изображение в два раза больше необходимого. Например, чтобы показать картинку 200х300 пикселей на экране с увеличенной плотностью пикселей, необходимо загрузить картинку размером 400х600 пикселей и затем уменьшить, используя CSS-атрибуты, html-параметры, или, как в нашем случае, изображение в качестве фона с необходимыми размерами контейнера, фон в котором ужимается в два раза с помощью стиля “background-size: 100% auto;”.
При таком варианте возможна загрузка избыточно больших изображений для смартфонов со стандартным разрешением экрана (device-pixel-ratio: 1), которые не приспособлены для увеличения. Это компенсируется кодированием фонового изображения в формат base-64, что позволяет выиграть разницу в размере файла и избавиться от необходимости хранить и поддерживать изображения в двух форматах — 1 к 1 и 2 к 1. Плюс еще в том, что этот способ существенно минимизирует количество http-запросов к серверу, что увеличивает общую скорость загрузки.
Часть 2: Разработка шрифта
Обсудив технические детали подключения шрифта с иконками, расскажем, как разрабатывается подобный шрифт. Если у вас уже есть иконки или другая графика в векторном формате, то половина работы сделана; в противном случае имеющиеся растровые иконки придется заново отрисовать в векторном редакторе. Можно расположить весь набор графики слоями в одном документе, но для сборки в шрифт лучше экспортировать каждый символ в отдельные файлы, формат которых сможет импортировать имеющийся редактор шрифтов.
Предпочтительно работать с большими размерами обьектов, от 500 до 1000 пикселей. При этом стоит избегать излишней детализации, ведь иконка может быть растеризована на экране размером 16-32 пикселя. Используйте одноцветные формы, без обводок и каких-либо эффектов; цвет и другие эффекты, например, тень, могут быть применены к иконке уже при верстке страницы. При необходимости использовать в иконке несколько цветов придется разбить ее на элементы, каждый из которых сделайте отдельным символом шрифта, которые затем будут наложены друг на друга и соответственно окрашены.
Существует несколько программ-редакторов, например Font Creator (для Windows), Glyphs (для Mac) или Inkscape (для Windows, Mac, Linux) — в нем можно сразу редактировать векторную графику и создать шрифт в svg-формате.
Для итогового результата не так важно, создаете ли вы новый шрифт или заменяете символы готового; но, добавляя символ в пустой шрифт, придется вручную искать и назначать соответствующий символу индекс для разных операционных систем, затем настраивать различные метрики. Проще взять за основу готовый шрифт с лицензией, допускающей его изменение — например, с сайта font.cc. Импортируем подготовленную векторную графику, заменяя выбранные буквы, и следим за соответствием размеров, отступов, выравниваем по базовой линии.
Если вы разбили иконку на разноцветные элементы, то лучше сохранить их позицию и размеры относительно друг друга при дальнейшем наложении. На этом этапе наверняка придется протестировать и, возможно, уточнить положение и размеры иконки.
Если ваш редактор сохраняет шрифт только в формат, отличный от .ttf, можно воспользоваться online-сервисами для конвертации, например, Fontsquirrel. Подобные сервисы также позволяют уменьшить размер файла, удалив неиспользуемые символы, но лучше это сделать на этапе разработки в редакторе.
Вот и все. Если вы нашли какое-то альтернативное решение для экранов со сверхвысоким разрешением — делитесь.
Ознакомиться с мобильной версией проекта Поиск можно зайдя по ссылке go.mail.ru с мобильного устройства.
Дария Скакун, разработчик мобильных версий проекта Поиск
Алексей Лиходзиевский, руководитель мобильного направления проекта Поиск
