Главная / Блог / Как создать мобильную версию сайта

Как создать мобильную версию сайта

Как создать мобильную версию сайта
673
01-05-2017 11:00
С ростом числа пользователей мобильных устройств владельцы сайтов начинают задумываться о том, сможет ли их ресурс обеспечить комфорт для владельцев смартфонов. Существует множество вариантов, которые позволяют сделать шаг вперед в мобилизации и один из таких - создать мобильную версию веб-ресурса.

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


Главная страница сервиса uMobilizer

Сам процесс создания проекта состоит из нескольких пунктов:
  • Регистрация в сервисе;
  • Создание первого проекта сайта;
  • Настройка;
  • Оплата;
  • Размещение.

Регистрация в сервисе

Первым делом необходимо зарегистрироваться на ресурсе. Для этого нужно заполнить e-mail, пароль и мобильный телефон.


Форма регистрации в сервисе создания мобильной версии сайта uMobilizer


После чего на указанный почтовый ящик придет письмо с подтверждением регистрации. Рекомендуем сразу активировать аккаунт.

Создание первого проекта сайта

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


Кабинет пользователя

В открывшемся окне введите данные в поля “Домен сайта” и “Название”.


Форма создания нового проекта

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


Процесс создания проекта мобильной версии сайта с помощью сервиса uMobilizer

После успешного сохранения, можно посмотреть промежуточный результат.


Экран предварительного просмотра, с возможность выбрать значения “До” и “После”

Настройка

Начнем с интерактивного помощника, который за 5 шагов поможет оформить внешний вид ресурса.

На шаге 1 необходимо выбрать логотип. Для этого необходимо вставить ссылку на нужное изображение и нажать кнопку “Загрузить”.


Шаг 1 - Выбор логотипа

Затем определяемся с видом главного меню. На данный момент предусмотрено 3 варианта его отображения: стандартное (свернутое), развернутое и статичное (закрепленное вверху). В данном примере будет использоваться последнее.


Шаг 2 - Выбор вида главного меню

На шаге 3 подбираем тему и палитру оформления.


Шаг 3 - Выбор темы оформления


Форматирование текста осуществляется на четвертом шаге.


Шаг 4 - Настройка текста

Заключительный шаг - корректировка контактов (телефон и e-mail).

Шаг 5 - Изменение контактной информации

После этого можно переходить к более детальному редактированию блоков.


Экран настройки блоков

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

Оплата

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


Форма оплаты проекта с помощью платежа


Форма оплаты проекта с баланса

Существует 2 вида оплаты:
  • Разовый платеж - пользователь оплачивает тарифный план с помощью удобной для него системы;
  • Платеж из баланса - деньги зачисляются на свой баланс (как пополнение карты) и из него оплачиваются в дальнейшем услуги сервиса.

Форма для пополнения баланса

Только в случае оплаты из баланса предварительно нужно положить деньги на счет с помощью специальной формы. Актуальные тарифы вы можете найти на странице "Цены".

Размещение

Когда проект оплачен, остается последний шаг. Для этого необходимо выбрать соответствующую вкладку “Размещение”. 


Заключительный этап - “Размещение сайта”

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

Вот и все! А вот окончательный внешний вид из нашего примера.


Окончательная мобильная версия нашего партнера Digital-студии WebMart

Заключение

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