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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как закрыть ссылки от индексации в комментариях WordPress.
Всем доброго дня! Недавно, как то зашел в гости к Александру Каратаеву, на его блоге меня заинтересовала информация о новых методах закрытия ссылок от ...
Что такое баннерная слепота и чем она так опасна?
Этот термин появился всего несколько десятилетий назад. С развитием интернета появилось огромное количество новых рекламных форматов, которые поначалу работали весьма эффективно. Однако с течением ...
Что такое CMS, а так же правила ее выбора
Сейчас мы разберемся с вопросом: "Что такое CMS?". На самом деле тут все просто, CMS расшифровывается как "Content Management Software" ("программное обеспечение для управления ...
Как ускорить работу блога на WordPress.
Добрый вечер! В последнее время я стал замечать, что скорость загрузки страниц на моем блоге стала очень медленная. Меня это стало сильно напрягать и я ...
Хотите создать блог? Но не знаете с чего начать? Я помогу Вам в этом!
Всем привет! Предлагаю свои услуги по созданию блога. А именно, что я буду делать, что бы у Вас появился функциональный блог: Зарегистрирую отдельный email под блог. ...

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 уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

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

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