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

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

View Comments (72)

  • Мобильная версия сайта с 21 апреля будет ранжироваться поисковиком Google, спасибо за статью. У себя проверил вроде все корректно отображается.

  • Николай, у меня такая же тема, как у вас. Гудвин с 5 апреля высылает ее обновление до версии 1.5, которая адаптирована для мобильных устройств.

    • Вот спасибо за добрые вести, Виктор. А я уже к новой его теме приглядывался, но она не совсем для блога)) А как вы это узнали, рассылка или сами ему писали?

      • Тоже хотел сменить тему, написал Гудвину, а он прислал новую версию. Пока не ставил, у меня с ftp что-то, а там счетчики, коды вставлять надо...

  • У меня адаптивный шаблон. Взял его с курса Борисова. Немного изменил и пока пользуюсь. А плагин этот подходит ко всем шаблонам? Я помню когда то одну тему хотел сделать адаптивной с помощью плагина, но так ничего и не получилось. Кстати Николай, а что это у вас за код в конце статьи после слов "До встречи"?

    • Да, плагин всем подходит, по крайней мере не встречал тех, кому бы он не подошел или конфликтовал с другими плагинами или темами. Код я удалил, спасибо, это эксперименты с рекламой Adsence, ищу идеальный вариант))

  • Николай, для шаблона Wp-Product У Алексей уже есть адаптивная версия, своим покупателям отдает бесплатно, не нужны никакие плагины.

    • Когда я публиковал пост, то у Алексея не было адаптивной версии моей темы.

  • Здравствуй Николай. Подскажи пожалуйста что у меня не так - не могу разобраться, у меня в админке пишет следующее:

    "WPtouch: СУПЕР Кеш WP должен быть сконфигурирован, чтобы работать правильно с WPtouch.
    Фиксирование этой передачи предохраняет кеш настольные страницы served на мобильные устройства и наоборот.
    Как только установлено, это сообщение распустится автоматически. До установленное, WPtouch не будет показан мобильным посетителям, и не может быть просмотрен.
    Для того, чтобы устанавливать передачу, последуйте за нашим постепенным руководством установки в support.wptouch.com"

    • Вадим, приветствую!
      У меня сейчас та же проблема и я ищу пути её решения. Как только я найду, вам сообщу.

  • Спасибо Николай, буду ждать. Раньше у меня этого не было видимо это из-за обновлений мобильного плагина.

    • Да это дня 3 назад выпустили обновление после которого он стал конфликтовать с плагинами кэширование. Это же надо такой апдейт придумать, может скоро исправят, не знаю((

  • И, пардон, еще вопрос: чтобы на мобильных показывалась реклама от гугл нужно установить версию ПРО - а это надо купить ее, да и как это вообще делается?

    • Все верно, в админке сайта зайдите в настройки плагина и там предлагается обновился до про-версии

        • Думаю, что разработчики WPtouch должны исправить баг с кэшированием в ближайшее время, иначе нужно другой плагин ставить. Боюсь, что покупка про-версии не решит проблему.

  • Николай привет! Решил или нет я эту проблему с мобильной версией, не знаю. Но сделал следующее: я вернул на 3.6.1 и все, по крайней мере ГУГЛ говорит - "гуд". Но вот в чем дело я заметил, что у меня в последнее время (а может и вообще, не обращал как-то на это внимание раньше) с телефонов не густо идет трафик. Может какая-то другая причина, но на 80-100 посетителей 2-4 с телефона. Может подскажешь чего?

    • Вадим, я также плагин новой версии удалил и установил wptouch 1.7, теперь конфликта нет, всё работает нормально. По поводу трафика с мобильных ничего не посоветую, у меня на одном сайте всего 10% он составляет, а на другом около 40, вот и поди разберись)) От темы зависит, от возраста аудитории и ещё много всяких факторов. Скоро ПК исчезнут и 100% трафика будет с мобильных устройств, так что готовьтесь заранее))

  • А я с помощью плагина WordPress Mobile Pack адаптировал блог ,под мобильные установки.Отличный плагин.

  • Сейчас без мобильной версии сайта просто никак нельзя. Я всегда смотрю статистику по своему сайту и хочу сказать, что количество посетителей с гаджетов постоянно растёт.