Статьи

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

Маленький экран

Экраны мобильных устройств

Малый экран — главное отличие мобильных устройств от полноценных компьютеров. Экран мобильного устройства способен отобразить намного меньше стационарного монитора. При упоминании «меньше» имеются ввиду все смыслы этого слова.

Физический размер. Размер экрана смартфона — 3-4 дюйма, размер экрана планшета 7-10 дюймов. Наряду с ними размер экрана ноутбука не менее 15 дюймов, размер настольного монитора — не менее 17 дюймов. Как видно, разница весьма ощутима.

Разрешение экрана. Безусловно, сегодня разрешение экранов мобильных устройств сильно уступает разрешению ноутбуков и стационарных мониторов. Самое большое разрешение сегодня имеет Iphone4, которое составляет (960х640 пикселей). Как видим, такое разрешение сильно отстает и от ноутбуков и от мониторов с поддержкой FullHD.

Что видим? Поскольку и размер экрана, и разрешение намного меньше, то и пользователь сможет увидеть намного меньше информации. Можно возразить, что мобильные браузеры позволяют масштабировать изображение, но при уменьшении масштаба, уменьшается текст до нечитабельности, а графические элементы могут «налазить» друг на друга. Это приводит к глобальному неудобству использования сайта.

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

Меньшее быстродействие

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

Меньшая пропускная способность

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

Хотя пропускная способность мобильных сетей неустанно повышается, до выделенных линий им еще очень далеко. Мобильные сети могут, в лучшем случае, выдать скорость в 1 мегабит/сек., больше пока нет. От этого и крайне медленная скорость загрузки. Более того, ограничение объема трафика и уменьшение скорости безлимитных пакетов — для операторов обычное дело. Конечно, можно использовать подключение по Wi-Fi. Но Wi-Fi есть не везде, а мы рассматриваем именно публичный доступ, который весьма ограничен по скорости. Соответственно, если сайт будет загружаться долго, то посетитель не будет ждать загрузки сейчас, и не вернется на сайт позже.

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

Отличное решение для работы сайта в условиях низкой пропускной способности — функция lazy load. Технология lazy load постепенно загружает содержимое страниц (невидимая ранее часть страницы загружается при скроллинге). Пример — Twitter.

Сенсорный ввод

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

Нет события :hover (наведение). А раз так, то все стили и скрипты, использующие событие можно не использовать. Некоторые мобильные браузеры могут программно эмулировать событие, но это не решение вопроса.
Жесты. Большинство мобильных браузеров поддерживают управление жестами. Используйте это при разработке мобильной версии сайта. Jquery Mobile позволяет привязать к жестам листание страниц и слайдов в галерее.
Низкая точность позиционирования. При размере шрифта 12 пикселей на мониторе настольного устройства нажать на ссылку мышкой не составляет труда. Но нажать на масштабированную ссылку на мобильном экране достаточно сложная задача, особенно обладателям больших пальцев. Соответственно, если пользователю не будет удобно, он покинет сайт. Поэтому, при разработке мобильной версии сайта, постарайтесь разработать максимально удобную навигацию по сайту.

Неудобство устройств ввода (клавиатуры)

Клавиатуры мобильных устройств

Любая, даже полноразмерная программная клавиатура уступает даже самой простой настольной. А раз так, то избавьте посетителя от наборов больших текст:
— сократите URL;
— используйте вывод просмотра популярных записей и продуктов, это приведет к уменьшению использование поиска;
— используйте автозаполнение поля «Поиск»;
— если есть формы, сделайте их максимально простыми, лучше с использованием функции автозаполнения.

Ограниченная многозадачность

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

Мобильные браузеры

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

Портретная ориентация экрана

Ориентация экрана мобильных устройств

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

Поэтому, разрабатывая мобильную версию сайта, учитывайте особенности формирования страницы:
Одноколоночная верстка. При верстке в одну колонку место на экране используется наиболее рационально.
Широкие элементы. Увлечение чрезмерно широкими элементами (таблицы, изображения) может привести к тому, что сайт по ширине не будет умещаться на экране мобильного устройства. Для удобства пользователей используйте широкие элементы так, чтобы они умещались на экране без необходимости горизонтального скроллинга.
Навигация вверху. Навигация — самое главное в мобильной версии сайта. Поэтому навигация должна быть сверху. Это важно.

Разные устройства — разные типы сайтов

Одно из отличий мобильных устройств от стационарных — работа в режиме мобильного веб-серфинга. Мобильный веб-серфинг подразумевает не работу с контентом, а лишь просмотр. Это просмотр интернет-страниц в кафе, автомобиле в общественном транспорте и прочих местах, как бы «между делом». Из этого можно сделать вывод, что пользователю нужно дать максимальный объем информации за минимальное время. Качество, удобство, достоверность и полнота информации позволят посетителю пользоваться именно вашим сайтом.

Ограниченное использование Flash

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

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

сентябрь 2012

Для связи

Телефоны:
+7 (918) 538-38-58
+7 (863) 242-77-67

E-mail: topology@bk.ru

Skype: avomele

Сайт: www.topology.pro

© web-студия ТОПология