X
    Categories: Создание сайта

Создаем мобильную версию сайта — 3 пути решения

Приветствую, друзья!

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

Недавно я создал новый сайт, он еще совсем «зеленый» и «сырой», всего 12 страниц проиндексированных, но меня поразило одно сообщение, которое мне поступило в Гугл вебмастер:

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

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

Кстати, это очень легко проверить, например, при помощи различных сервисов, сайтов ( http://iphonetester.com, http://quirktools.com/screenfly/) или расширений для браузеров.

Для анализа статистики я зашел в Google Analitics и построил для сравнения график с двумя кривыми ( временные отрезки выбрал по полгода примерно):

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

Как уменьшить показатель отказов, эффективные способы

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

1. Заказать мобильную версию сайта специалистам

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

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

2. Установить новый шаблон с адаптивной версткой

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

Такой шаблон можно найти с довольно скромным бюджетом, например, на goodwinpress.ru

Согласен, это не бесплатное решение, но 800 рублей для автора сайта довольно малая сумма, согласитесь. Плюс к этому Алексею всегда можно задать вопрос по шаблону и получить быстрый и развернутый ответ.

Рождественское интервью с Алексеем Гудвином, создателем тем для WordPress

Можно и в другом месте поискать адаптивный шаблон, интернет бескрайний и шаблонов огромное количество.

3. Установить плагин, реализующий мобильную версию сайта

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

WPtouch, скачать плагин можно на официальной странице WordPress по ссылке:

https://wordpress.org/plugins/wptouch/

Вот статистика плагина:

Довольно внушительные цифры, поскольку плагин был скачан на момент написания данной статьи уже более 6,5 миллионов раз!

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

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

После того, как плагин wptouch скачали и установили, перейдем к настройкам.

4. Настройки плагина WPtouch

Какие плагины я использую на своем блоге

Для начала нужно зайти в панель управления и в левой колонке выбрать WPtouch, вот пункты, в которых нужно внести изменения:

 Внимание!

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


Первый пункт «Что нового» пропустим, там публикуются новости относительно плагина на английском языке.

1. Перейдем к базовым настройкам:

Тут всё ясно, вносим название и оставляем галочки по умолчанию.

Не забывайте в каждом пункте настроек нажимать «Сохранить изменения», если вы что-либо меняете.

2. Темы и расширения

В данном разделе вы понимаете, какой красоты себя лишили, выбрав бесплатную версию))

Выбор у нас невелик, всего один бесплатный шаблон 🙂 его и выбираем.

3. Параметры темы

Тут представлены несколько подразделов, которые отображены в горизонтальном меню.

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

3.1 Фирменная символика

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

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

Сохраняем настройки и идём дальше.

В следующих подразделах всё лишь для PRO- версии)), реклама Adsence читателям будет не доступна, это минус, жаль))

4. Меню

В следующем разделе нужно настроить второй подраздел «Настройка меню»

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

Вот как отображаются иконки ( которые я выбрал ) в мобильной версии:

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

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

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

Хочу спросить у читателей, а у вас есть мобильная версия сайта? Как вы ее реализовали. какие положительные или отрицательные моменты при этом испытываете?

До встречи!

С уважением, Николай Вилков

Интересные заметки по теме:

Как узнать, какие плагины нагружают сайт?

Плагин «заплати лайком», установка, настройка, использование

Выводим ТОП комментаторов без плагина — быстро и красиво!

древовидные комментарии при помощи плагина WordPress Thread Comment

Николай Вилков :