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

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

Мобильный сайт. 3 способа создания мобильной версии сайта.


18.10.2015 | Создание блога | Теги: комментариев 6 | 7661 просмотров | Автор статьи: Александр Рус


Особенности мобильного проекта

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

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

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

Как создать мобильный сайт

1. Запуск отдельного проекта

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

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

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

К преимуществам можно отнести:

  •  быстроту создания мобильного сайта (даже поисковики предлагают нужные для этого инструменты);
  •  разделение основного и мобильного ресурса (нет путаницы в программном коде);
  •  стабильность (если проблемы настигают одну из версий проекта, другая способна продолжить работу).

2. Создание адаптивного дизайна(pекомендую данный вариант!)

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

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

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

Среди недостатков данного приема нельзя не отметить:

  •  возможную путаницу в программном коде;
  •  высокую вероятность ошибок;
  •  относительную сложность в реализации;
  •  некорректное отображение сайта различными мобильными устройствами;
  •  неизбежную перегруженность страниц кодом;
  •   сниженную скорость загрузки и частые сбои.

В ряд преимуществ этого способа можно включить:

  •  отказ от поддомена, субдомена;
  •  единую основу для обоих проектов;
  •  отказ от переработки навигационных и функциональных схем.


Более подробную информацию, как сделать шаблон сайта адаптивным, смотрите в видео уроке:

3. Использование универсальной версии

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

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

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

Главный недостаток такого метода таится в том, что не все пользователи:

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

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

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

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

Необходимость тестирования

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

  • возможностей браузера Google Chrome, в котором встроена такая функция;
  • различных программ-эмуляторов;
  • онлайн-сервисов, копирующих параметры мобильных устройств;
  • добровольцев из специальной контрольной группы.

Материалы по теме:

Что такое CMS, а так же правила ее выбора
Сейчас мы разберемся с вопросом: "Что такое CMS?". На самом деле тут все просто, CMS расшифровывается как "Content Management Software" ("программное обеспечение для управления ...
Как разместить флэш-баннер на сайте
Флэш-баннер установить на свой сайт достаточно просто – он ставится так же, как и простой графический баннер. Требуется выполнить пару несложных действий, с которыми ...
Настройка URL-адреса на платформе WordPress
Прогрессивное продвижение сайта невозможно без правильной настройки URL-адреса и работы с файлом .htaccess. Ниже вы найдете базовые рекомендации по этим двум аспектам. Посещаемость интернет-сайтов во ...
Как закрыть ссылки от индексации в комментариях WordPress.
Всем доброго дня! Недавно, как то зашел в гости к Александру Каратаеву, на его блоге меня заинтересовала информация о новых методах закрытия ссылок от ...
Плагин de: comment: адаптивная форма комментариев.
Плюсы плагина Регистрация на сайте Настройки de:comments Партнерская программа. Всем привет! Сегодня я расскажу про один из лучших плагинов, который заменяет стандартную форму комментариев ...

Нажимая на кнопку, я даю согласие на рассылку, обработку персональных данных и принимаю политику конфиденциальности.

1
bytrina http://bytrina11.ru

Мой выбор это адаптивная верстка, а не плагин.

Автор2
Александр Рус (участник БКС) http://myworkpro.ru

Про плагин тут разговор и не ведется 😉

3
Антон http://financial-independence.ru/finbook

Привет! А ты как ты свой блог к мобильной версии адоптировал с помощью плагина для вордпресса или с помощью вёрстки?

Автор4
Александр Рус (участник БКС) http://myworkpro.ru/

Моя тема на половину где то уже была адаптирована, я всего лишь поправил немного код в CSS, размер картинок и видео, что бы они подстраивались под разрешение экрана. Вроде норм всё смотрится)

5
Антон Егоров http://financial-independence.ru/

Ну не совсем хорошо 😉 Могу тебе в ВК кинуть как смотрится на моём телефоне. Только ссылочку напомни. Я с помощью плагина сделал, удачно получилось. В последствии конечно код перепишу под мобильный, но пока такое решения меня устраивает

Автор6
Александр Рус (участник БКС) http://myworkpro.ru/

В Вк не зареган. Можешь в скайпе кинуть?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.