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

Доброго времени суток всем друзьям и читателям – Sozdaiblog.ru!

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

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

Конечно, дословно все его слова я цитировать не буду. Единственное, что дало мне пищу для ума, это последнее предложение:

— Денис, Вам срочно нужна мобильная версия сайта, чтобы не потерять старых и получить новых посетителей!

А ведь действительно, подумал я. Сколько же людей по всему миру используют мобильные средства связи для выхода в Интернет.

И как только я об этом подумал, то сразу решил, что не стоит тратить время на разные статистики. Тут и так всё очевидно. Нужно идти и делать мобильную версию сайта.

Единственное, меня тревожил вопрос, как лучше это сделать. Специально верстать отдельный сайт на поддомене чисто для мобильников, честно говоря, мне было лень. Да и все существующие решения в Интернете меня не впечатляли.

То, что я нашел, оказалось готовым решением от всемирной компании Google.

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

Классно, правда? Лично я в восторге от этого генератора!

Ладно, оставим все эмоции для комментариев, пришло время творить.

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

Для создания мобильной версии сайта переходим по ссылке на сервис — Howtogomo.com.

Последнее время на сервисе наблюдаются изменения. Вот ещё одна ссылка на этот ресурс www.dudamobile.com.

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

Они могут немного отличаться, но смысл тот же.

В специальном поле вписываем адрес своего сайта и нажимаем большую зелёную кнопку:

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

Сделав свой выбор, переходим к следующему шагу, нажав синюю кнопку «NEXT»:

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

Во вновь открывшемся окне Вам нужно заполнить небольшую форму. Вписываем в неё свой действующий E-mail и два раза одинаковый пароль (любой). После этого нажимаем на синюю кнопку с надписью «SAVE MY SITE», что в переводе означает «СОХРАНИТЬ МОЙ САЙТ»:

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

Далее всё просто.

В открывшемся окне копируем специальный скрипт и вставляем его перед закрывающим тегом < / head> в файле header.php Вашей активной темы оформления.

Также Вы можете воспользоваться плагином (как установить плагин wordpress). Для этого внизу есть специальное выпадающее меню с инструкциями разных движков и хостингов:

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

Для примера вот Вам моя – Мобильная версия сайта.

А Вы уже сделали мобильную версию своего сайта?

На сегодня это всё. До новых статей…

С уважением, Денис Черников!