Мобильная версия сайта. 10 особенностей разработки

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

Размер экрана

Это отличие очевидно, экран телефона отображает меньше, чем монитор компьютера. Причём, основных фактора два:

• Меньше физический размер. Диагональ экрана смартфона - 3-4 дюйма, планшета - 7-10, то время как для среднего ноутбука она составляет 15 дюймов, а для настольного монитора - 19.
• Ниже разрешение. Разрешение экрана даже самых продвинутых смартфонов обычно составляет не больше 960 на 640 пикселей, а это значит, что они сильно отстают от современных Full HD мониторов.

Чем меньше размер экрана и разрешение, тем меньше информации пользователь получает зараз. Благодаря мобильным браузерам этот недостаток частично можно исправить, однако в целом факт остаётся фактом: текст быстро становится нечитаемым при уменьшении масштаба, и это создаёт массу неудобств.

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

Скорость процессоров

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

Пропускная способность

Пропускная способность мобильных сетей в настоящее время постоянно растёт, однако скорость в 1 мегабит до сих пор считается очень высокой для современного 3G устройства. Следствием является низкая скорость загрузки, кроме того операторы часто ограничивают скорость и объём трафика в безлимитных пакетах. Подключение к Wi-Fi позволяет избежать этих проблем, однако скорость публичного подключения также ограничена в большинстве случаев. Если ваш сайт отнимает много трафика, мобильный пользователь вряд ли зайдёт на него снова.

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

Сенсорные экраны

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

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

Клавиатура

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

• сокращенные URL;
• автозаполнение поиска и других полей;
• максимальное снижение использования поисковых инструментов: всё самое свежее и популярное должно быть на виду;
• простые формы опять же с использованием функции автозаполнения;

Многозадачность

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

Браузеры

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

Ориентация экрана

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

• Верстайте в одну колонку. Используйте место на экране рационально.
• Не используйте слишком широкие элементы, такие как таблицы, Flash под ширину экрана.
• Располагайте навигацию сверху, просто потому, что это удобнее.

Разные сайты для разных типов устройств

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

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

Использование Flash

Flash совместим с 90% настольных систем. С мобильными системами всё обстоит несколько иначе. iOS не поддерживает эту технологию, пользователи Android выше 2.2 могут работать с Flash, но чаще всего отключают эту опцию, повышая тем самым стабильность работы и производительность. Поэтому не стоит делать ставку на сайт, использующий Flash, особенно если речь идёт о мобильной версии.

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