Мобильная версия сайта

Мобильная версия сайта — уже не новшество, в статье мы рассмотрим, как сделать мобильную версию сайта просто и эффективно для пользователей.

Зачем нужна мобильная версия

Мобильная версия удобнее

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

Наличие дополнительных функций

Например, телефон определит местоположение пользователя и укажет ему путь в ваш офис.

Мобильная версия или мобильное приложение

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

Мобильная версия хороша тем, что не требует писать версии для разных ОС, но разработка может быть трудоемка (для хорошего просмотра на всех телефонах).

Как понять, сколько у вас мобильных юзеров

Такая статистика есть в Яндекс.Метрике, Google Analytics. Если у вас стоит счетчик одной из указанных систем, то вы можете узнать, количество посетителей, модели и платформы устройств, какие браузеры использовались. Если пользователей с мобильниками окажется более 5%, то имеет смысл задуматься о разработке отдельной версии для этой категории.

Сложности и ограничения мобильной версии

Размер

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

Технологии

• Лучше отказаться от использования JavaScript и Ajax.
• Зато информацию лучше подгружать по мере прокрутки страницы, а не загружать все сразу.

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

• Используйте жесты — например, листание фотографий.
• Не используйте возможность показа информации при наведении.
• Делайте элементы крупными (кнопки, чекбоксы, поля и пр.).

Клавиатура (зачастую маленькая и неудобная)

• Используйте сокращенные URL.
• Делайте формы для заполнения простыми.
• Используйте автозаполнение полей.

Как сделать мобильную версию сайта

Мобильная версия уже заложена в основную версию

• Система определяет, с какого устройства пользователь зашел на сайт, перенаправляет его на мобильную версию.
• Недостатки — дорогая разработка.

Отдельная мобильная версия

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

Мобильная версия на стороннем сервисе

• Загрузка внешнего вида существующего сайта, комбинирование отдельных его частей в более читаемый вид.
• Широкий инструментарий, в-основном платные сервисы с демо-возможностью (Wirenode, MoFuse, Winksite, Mobify, Mippin).

Плагины для CMS

Для Wordpress — Mobilize. Для Drupal и Joomla таких плагинов множество, выбор за вами.

На что обратить внимание

• Cовместимость с какими устройствами и браузерами вам нужна (полная совместимость или всего лишь оптимизация для мобильных телефонов)
• Как и обычные сайты, мобильные версии нужно тестировать (подойдет W3C mobileOK Checker, mobiReady, Browsershots; для iphone-версий можно использовать TestiPhone)
• Расширенный функционал лучше размещать на полной версии сайта (оставлять в мобильной версии только самое необходимое)

Выводы

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