Мобильная версия сайта: особенности и создание
Статьи → Дизайн и версткаОсобенности мобильных версий сайтов Мобильные устройства, с помощью которых можно выходить в интернет, сейчас есть у каждого шестого жителя Земли. Мобильный интернет становится все популярнее – многие аналитики считают, что доля пользователей, выходящих в сеть со своего смартфона или планшета, в ближайшие пару-тройку лет будет очень быстро расти. Если всего несколько лет назад «интернет в кармане» был диковинкой и буржуйством, то сейчас миллионы пользователей смартфонов общаются в социальных сетях, читают новости, ищут всяческую информацию и даже делают покупки в интернет-магазинах. В США в конце 2011 года более 18% посетителей интернет-магазинов заходили с помощью мобильных устройств. Россия пока заметно отстает (1,5%), но не стоит забывать, что доля мобильных посетителей в США выросла более чем в 3 раза за год, еще в 2010 она составляла около 5%. Этот факт ни в коем случае нельзя упускать из виду оптимизаторам. Версия сайта для мобильных устройств Представьте себе просмотр обычной страницы на экране смартфона, разрешение которого 320х480 пикселей, но при этом сайт оптимизирован для типичного дисплея ноутбука – 1366х768. Посещение такой страницы может превратиться в муку: на экране будет видна лишь часть информации или придется уменьшить страницу до степени «ничего не видно». Выход из этой и многих подобных ситуаций уже давно найден – мобильная версия сайта. Чем же такой сайт будет отличаться от обычного?
Помощником в адаптации сайта для смартфонов и планшетов может стать специальное дополнение 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 браузерах (в основном, конечно, это старые версии популярных браузеров – далеко не все следят за обновлениями).
|
сайт,
интернет,
мобильный сайт
29.02.2012, 12934 просмотра.