5 основных типов мобильных сайтов

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

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

Вашему вниманию пять категорий мобильных сайтов:

  • Mobile friendly;
  • Адаптивный;
  • Responsive (отзывчивый);
  • Experience (опытный);
  • Нативный.

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

Приступим к краткому описанию характеристик каждой из пяти основных категорий.

1. Mobile friendly или дружественный к мобильным гаджетам сайт

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

В чем плюсы? В основном это проявляется в соотношении бюджет/время. А также потому, что не каждый мобильный ресурс должен иметь “опытную” мобильную версию (об этом далее).

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

2. Адаптивный сайт

Адаптив – это стиль разработки, который физически изменяет дизайн сайта при изменении размера окна. Адаптивный дизайн будет перенастраивать элементы страницы в зависимости от размера окна, в котором он отображается. Адаптивный дизайн основан на предопределенных размерах экрана. Изменение размера окна будет “переупаковывать” визуальные элементы на основе ширины дисплея. Код площадки позволяет свободно реорганизовывать разделы контента в соответствии с размером экрана.

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

3. Responsive (или отзывчивый)

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

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

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

4. “Основан на опыте”

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

5. Native приложения

Наверно, неправильно говорить о типе мобильных площадок в данном примере, поскольку native, считается, по сути, приложением, которое представляет собой программу, зачастую кодированную с помощью определенных языков (например, Objective C для платформы iOS), специально спроектированных для работы на мобильном устройстве. Такое приложение будет содержать отдельный контент и предлагать другую форму работы с ресурсом. Это приложение означает другую цельную структуру площадки, другой стиль программирования, различную структуру загрузки контента и обслуживания.

Практичность native-приложений будет определяться путем удовлетворения потребности. Некоторым приложениям не требуется подключение к Интернету для правильной работы, тогда как другие без этого работать не будут. Какую цель будет выполнять ваше приложение? Будет ли у пользователя доступ к информации? Будет ли это в интерактивном или в игровом формате? Будете ли вы взимать плату за это, или вы позволите людям получить доступ к приложению бесплатно, а затем использовать его в качестве платформы, чтобы привлечь внимание к другим вашим ресурсам?

Возможности безграничны. В идеале, native-приложение будет служить отдельным дополнением к вашему интернет-ресурсу. Первый вопрос, который вам нужно задать – зачем людям загружать ваше приложение? Что они могут получить от вашего приложения, чего не могут получить от вашего сайта без него?

Примечание:

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

Проводили ли вы поиски в Google Analytics, чтобы определить, какие тенденции связаны с мобильными пользователями на вашем сайте? Для этого войдите в свою учетную запись, откройте меню “Аудитория”, затем “Мобильные” -> “Устройства”. Сравните по некоторым временным рамкам. Увеличилось ли использование? Сколько времени посетители тратят на страницу? Просматривают ли пользователи страничку с контактными данными или они проводят время на любой из ваших целевых страниц? Как насчет внутренних страниц контента? Обратите внимание на это, когда планируете создание мобильного приложения.

Подумайте о своей целевой аудитории. У вас есть мобильная аудитория? Возможно пользователи будут искать ваши товары или услуги находясь в дороге? Является ли предоставляемый вами объем контента в мобильной версии достаточно информативным?

Заходили ли вы сами на свою площадку с мобильного устройства? Как она выглядит? Как UX? В конечном итоге вы разочарованы отсутствием функциональности или хотите, чтобы приложение делало что-то другое? Что это за вещи? Как отличается UX на разных типах мобильных устройств (планшеты / смартфоны)?

Какие приложения вы используете больше всего на своем мобильном устройстве? Почему вы ими пользуетесь? Можете ли вы предоставить такой же пользовательский опыт в своем приложении?

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

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