Главная / Блог / Способы создания мобильной версии сайта

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

Делимся способами создания мобильных сайтов
523
01-08-2017 10:00
В последнее время число запросов о создании мобильной версии сайта растет. Оно и неудивительно! Ведь уже более 50% поисковых запросов приходится на мобильные устройства.

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


Пользователи смартфонов и планшетов - ценная аудитория, за которую стоит бороться считают спикеры Гуру-марафона от Google. 

Чтобы помочь бороться за новую аудиторию, мы решили написать статью, которая ознакомит вас с вариантами создания мобильного ресурса. Решить эту проблему можно несколькими путями:
  • Делать все руками
  • Использовать плагин для CMS
  • Воспользоваться API
  • С помощью конструктора

Вариант 1 - Создать мобильную версию сайта руками

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

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

Вариант 2 - Создать мобильную версию сайта с помощью плагина

Данный пункт подходит тем владельцам сайтов, которые используют систему управления содержимым (CMS - Content management system). Главное отличие от предыдущего - за вас уже сделали “ручную работу” и создали специальный плагин для вашей CMS.

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


Статистика самых популярных CMS по данным BuiltWith

Популярные плагины для создания мобильной версии сайта:
Можете поискать и другие плагины. Обязательно протестируйте несколько перед окончательным выбором. Если у вас есть опыт использования таких вещей, то обязательно поделитесь этим в комментариях.

Вариант 3 - Создать мобильный сайт с помощью API

Это один из самых сложных вариантов реализации. API (Application Programming Interface) - это интерфейс программирования или веб-инструмент, который используется для легкого получения данных с вашего сайта для последующей адаптации под необходимое устройство.

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

Но вернемся к сайтам. Так вот, данный метод в основном используют только владельцы сайтов крупных компаний, такие как “Вконтакте”, “Instagram”, “Pinterest”, “Facebook” и многие другие. Либо же те, кто точно знает, чего они хотят от использования мобильной версии, желают получить полный доступ и контролировать весь контент ресурса.

Наглядный пример работы Open Banking API с использованием приложения

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

Вариант 4 - Создать мобильный сайт с помощью конструктора

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


Одним из таких сервисов, набирающих свою популярность, является uMobilizer.

Принцип работы таких сервисов заключается в следующем. Пользователь вводит адрес своего сайта и система анализирует ресурс. Чем больше сайт, тем больше времени понадобится на сбор сведений. После того, как собрана вся информация об элементах сайта (меню, стили, контент и т.д.), система определенным образом взаимодействует с ними и приводит к мобильному виду. Если какие-то решения вас не устраивают, то вы можете отредактировать шаблон по своему усмотрению, удалив старые или добавив новые блоки, например, кнопку Click-to-call. А с помощью Drag-and-drop сделать это еще проще. Полученный результат, еще до публикации, можно просмотреть на любом разрешении.


Небольшое видео о сервисе uMobilizer

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

Если вы выберете данный вариант, то настоятельно рекомендуем прочитать статью - “Как создать мобильную версию сайта”. 

Заключение

Напоследок делимся одним полезным ресурсом Google Mobile-Friendly, который расскажет, как улучшить ваш сайт, в том числе и для мобильных устройств. Пользуйтесь и будьте мобильными!

Порталу Think with Google свой чудесной анимацией наглядно показывает, как будет выглядеть примерный отчет об оптимизации вашего сайта под мобильные устройства

У Яндекса тоже есть свой инструмент проверки, но вам нужно быть зарегистрированными в Яндекс.Вебмастер. Для этого зайдите в раздел “Инструменты” и выберете “Проверка мобильных страниц”.

Встречайте новый вебмастер от Яндекс и проверяйте сайт на мобилопригодность