Особенности мобильных версий сайтов

Мобильные устройства, с помощью которых можно выходить в интернет, сейчас есть у каждого шестого жителя Земли. Мобильный интернет становится все популярнее – многие аналитики считают, что доля пользователей, выходящих в сеть со своего смартфона или планшета, в ближайшие пару-тройку лет будет очень быстро расти. Если всего несколько лет назад «интернет в кармане» был диковинкой и буржуйством, то сейчас миллионы пользователей смартфонов общаются в социальных сетях, читают новости, ищут всяческую информацию и даже делают покупки в интернет-магазинах. В США в конце 2011 года более 18% посетителей интернет-магазинов заходили с помощью мобильных устройств. Россия пока заметно отстает (1,5%), но не стоит забывать, что доля мобильных посетителей в США выросла более чем в 3 раза за год, еще в 2010 она составляла около 5%. Этот факт ни в коем случае нельзя упускать из виду оптимизаторам.

Версия сайта для мобильных устройств

Представьте себе просмотр обычной страницы на экране смартфона, разрешение которого 320х480 пикселей, но при этом сайт оптимизирован для типичного дисплея ноутбука – 1366х768. Посещение такой страницы может превратиться в муку: на экране будет видна лишь часть информации или придется уменьшить страницу до степени «ничего не видно». Выход из этой и многих подобных ситуаций уже давно найден – мобильная версия сайта.

Чем же такой сайт будет отличаться от обычного?

Верстка страницы – обеспечивает комфортный просмотр сайта с устройств с небольшим разрешением экрана.

Упрощенный код и отсутствие скриптов, которые требуют высокой производительности устройства для их обработки. Смартфоны стремительно развиваются, но пока еще отстают по этому параметру от настольных компьютеров и ноутбуков. Устройства Apple не поддерживают Flash, поэтому от этой технологии следует отказаться при ориентации на мобильную ЦА.

Небольшой объем страниц – необходим для быстрой загрузки в случае выхода в интернет по протоколу 3G и более ранним, которые подразумевают (особенно по факту, в реальных российских реалиях) относительно небольшую скорость. Кроме этого часто пользователь платит за трафик, что в итоге определит его выбор в сторону более «легкого» сайта. Один из вариантов решения проблемы – способ загрузки Lazy Load, когда содержимое страницы постепенно подгружается по мере прокрутки вниз – например, это реализовано в Twitter и «В Контакте».

Тип ввода тоже играет большую роль: если курсором мышки легко попасть в небольшую область ссылки, то с сенсорным экраном это будет проблематично, особенно большими мужскими пальцами.

Создание мобильной версии сайта

Разработка версии сайта для мобильных устройств – довольно сложный процесс. Если нужных знаний и навыков нет, то можно обратиться к профессионалу или в специальное агентство. Но есть и другой, менее затратный выход – специальные сервисы, позволяющие сделать мобильную версию, не имея особых скиллов в сфере разработки сайтов.

Помощником в адаптации сайта для смартфонов и планшетов может стать специальное дополнение Mobilize, предназначенное для WordPress. Этот плагин довольно удобен в использовании, он не требует от пользователя рутинной работы – в нем сделана ставка на простоту. Некоторые отмечают не совсем корректную работу с определенными темами оформления сайта, но этот недостаток вполне решаем.

Сервис Wirenode позволяет создавать сайт в виде мобильного приложения. Довольно широкий инструментарий дает возможность реализовать множество различных решений и сделать функциональный сайт для смартфонов. Бесплатный режим Wirenode подходит для ознакомления, а для полноценной работы подойдут платные версии по цене примерно от $7.

Пожалуй, самым популярным средством для создания мобильных версий сайта является сервис MoFuse. Таким его сделал широчайший выбор настроек, который сочетается с относительной простотой использования. Арсенал инструментов MoFuse позволяет сделать полноценный сайт, который будет удобно просматривать с небольшого экрана смартфона. Данный сервис стоит от $8, но есть бесплатный ознакомительный режим, которого будет достаточно, чтобы оценить целесообразность его применения.

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

Совместимость с различными устройствами и браузерами

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

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

Мобильный сайт или приложение?

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

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

Разработка подобного приложения обойдется владельцу интернет-магазина довольно дорого: приложение в дополнение к сайту не всегда оправдано, все зависит от специфики бизнеса.

Тестирование

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

Одним из самых популярных считается W3C mobileOK Checker. Для теста достаточно ввести URL сайта в соответствующую строку, а затем после проверки изучить возможные ошибки, чтобы затем исправить их.

Еще один эффективный способ тестирования – mobiReady, который работает аналогично первому. Сервис бесплатный, но для полноценной проверки сайта требует регистрации.

Отдельно стоит упомянуть сервисы для iPhone и iPad – эти устройства за последнее время набрали огромную популярность, при разработке мобильного сайта их за редким исключением нельзя упускать из вида. Версию для iPhone можно протестировать на сайте TestiPhone. Этот сервис дает возможность увидеть прямо в окне браузера, как будут выглядеть страницы на iPhone. Таким же образом работает iPad Peek для планшета Apple.

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

Для тестирования в самых распространенных браузерах подойдет бесплатный Adobe BrowserLab, в котором можно визуально оценить ваш сайт. Опять же бесплатный сервис Browsershots приятно удивит огромным набором браузеров для тестирования, он особенно полезен, когда вопрос кроссбраузерности стоит очень остро. Существуют и более серьезные платные сервисы, которые имеют более широкий функционал. Одним из таких средств для тестирования является Multi-Browser Viewer С его помощью можно оценить работу сайта в более чем 80 браузерах (в основном, конечно, это старые версии популярных браузеров – далеко не все следят за обновлениями).

Выводы

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

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