Блог TemplateMonster

Оптимизация мобильных сайтов. Почему это все еще актуально

О мобильном веб-дизайне было сказано уже немало. Пользователями сети горячо обсуждался даже наиболее глобальный вопрос о необходимости в принципе такого типа сайтов. Мнения разделились, на данный момент четкого и однозначного ответа, насколько важны (или нет) мобильные сайты, пока все же нет. Те, кто использует их, по привычке все еще поддерживают и обновляют свои мобильные ресурсы, остальные же считают, что такие сайты — лишняя трата времени, поскольку на сегодняшний день существует масса альтернативных вариантов создания сайтов с адаптивным дизайном.

Сейчас мобильные веб-сайты разрабатываются в виде приложений. Многие большие ресурсы используют собственные приложения, разработанные специально для конкретных мобильных платформ. Стоит просто загрузить такое приложение и после прохождения процесса регистрации любой пользователь получает «почти полный» доступ к сайту с сохранением всех оригинальных шрифтов. Вот как выглядит ТОП 5 наиболее популярных приложений:

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

Slabtext

Простое добавление заголовка на вашем сайте.

***

FitText

FitText — простой плагин jQuery, который способен превратить обычный статический веб-сайт в адаптивный.

***

MobileFonts

MobileFonts — плагин для оптимизации мобильных шрифтов.

***

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

Основные правила оптимизации мобильных шрифтов

 1. Убедитесь, что ваш сайт хорошо отображается на маленьком экране, обратите внимание на шрифт и его размер;

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

3. При посещении пользователями вашего веб-сайта с портативных устройств, применяйте автоматическое перенаправление на его мобильную версию.

При таких возможностях экрана и плотности пикселей (когда сайт сжимается до размеров смартфона) некоторые шрифты могут отображаться не совсем корректно. В этом случае стоит реагировать на следующие моменты:

1. PC: В большинстве случаев системные шрифты выглядят идеально. Пользовательские же шрифты обычно непонятны и не читаемы.

2. OSX: Системные шрифты выглядят отлично на экранах с низким разрешением (например, старый PowerBook G4 12 дюймов), на экранах с высоким разрешением они выглядят слишком смело (MacBook Air), также прекрасно выглядят на Retina дисплеях (MacBook Pro). Легкие шрифты выглядят очень хорошо на экранах с высоким разрешением, но являются слишком легкими для диспелеев Retina.

3. IOS: Системные шрифты выглядят довольно смело на экранах с высоким разрешением (iPhone 1-3, iPad 1-2), замечательно они выглядят также на дисплеях Retina (iPad 3).

«Почему бы не разрешить пользователю самостоятельно выбирать размеры шрифтов?», спросите вы. На самом деле, размер шрифта это далеко не дело вкуса, а скорее вопрос расстояния считывания текста с экрана. Например, один и тот же шрифт, который необходимо прочесть на экранах iPhone и iPad должен легко менять свой размер. Шрифт для iPad должен быть больше, чем для iPhone, но и здесь все зависит от расстояния считывания текста с экрана. Текст на экране iPad должен быть полностью разборчивым, так как многие пользователи предпочитают читать прямо с колен. Шрифт для iPhone должен быть меньше, потому что расстояние от глаз до экрана меньше, чем у iPad.

***

2012 стал годом увеличения использования всевозможных мобильных устройств. Как показывает статистика, количество активированных Android устройств увеличилась с 600 000 до 900 000 за последние шесть месяцев (Ресурс: pcworld.com). По популярности Android опережает Apple. Большая часть устройств имеют высокое разрешение, предлагая 177 ppi и даже больше. Такие экраны позволяют отображать даже самые мелкие шрифты и делать их читаемыми при масштабировании.

***

Для справки. Недавно в сети был проведен опрос среди веб-дизайнеров, который показал следующие результаты:

За мобильные сайты было отдано 522 голоса (26,28%)

Адаптивные дизайны — 1337 голосов (67,32%)

Мобильные приложения — 102 голоса (5,14%)

Прочее — 25 голосов (1, 26%)

Всего проголосовало 1986 человек.

Исходя из результатов опроса, становится очевидно, что мобильные сайты совсем скоро превратятся в «вымерший» вид дизайнерских разработок.

***

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