X

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

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

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

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

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

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

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

Для анализа статистики я зашел в 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)

  • давно пора, Николай)
    Лучше сразу мобильный шаблон , конечно. Но тут уже на твое усмотрение. А так все нормально у тебя отображается)

    • Спасибо, Дмитрий!
      Шаблон у Гудвина хочу скоро новый купить, там уже верстка адаптивная, только вот как к этому поисковики отнесутся, вопросик))

      • Николай, если не секрет, какой шаблон вы планируете купить у Алексея?

        • Самый последний, Рашида. Я купил пару лет назад WpProduct, но он оказался единственным не адаптивным.

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

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

  • Интересная статейка. О этом плагине тоже читал, но потом передумал. Коплю деньги, что мобильную версию сделали мастера.

    • Привет, Александр!
      Насчет "отлично" это немного приукрашено)), спасибо. Но плагин решает эту проблему на "четверочку", в ПРО версии возможностей вообще много, но цена сильно кусается :)

    • Дмитрий, буквально вот это: "Я отказался от этого плагина, так как он явно лишний, если есть мобильная версия, да и не очень очевиден для людей, которые не привыкли к ios".
      Все-таки, лучший вариант - это адаптивный шаблон.

  • Николай, да...шаблон просто супер! Особенно заинтриговало это:новое мобильное супер меню и столько возможностей. :razz: :razz:

    • Рашида, шаблон будет чуть позже, пока мобильную версию сайта реализует плагин WPtouch

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

  • Сейчас попробовал зайти на твой сайт с мобильного: все очень даже "мило" :) Приятная мобильная версия.

    У себя недавно пытался реализовать мобильную версию этим плагином, но некоторые страницы по непонятным причинам растягивались до бесконечности. Долго не разбирался, попробовал плагин Jetpack (от создателей самой WP). Там среди более чем 30 плюшек есть и мобильная версия.

    Эта меня пока устроила больше. Настроек, правда, совсем мало, но для начала вполне неплохо.

    • Роман, это плагин - плагин Jetpack - для создания мобильной версии? Он бесплатный?

      • Да, Рашида, он бесплатный. К тому же у него уже более 14 миллионов скачиваний :)

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

        • Когда читал про плагины для Моб. версии то про плагин Jetpack было мало информации и отзывов.

      • О,спасибо за подсказку.
        Пока финансовые трудности,по этому бесплатные версии устраивают.

      • Спасибо, Роман за ваш ответ. Хорошо, когда есть из чего выбирать, хотя бы два варианта.

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

        Если разобраться, то один Jetpack может заменить добрых 10-15 плагинов у тех, кто предпочитает реализовывать все мелочи не через код, а через сторонние плагины.

  • Спасибо за статью. Вопрос: у меня в футере сайта установлен счетчик LI. Если я поставлю плагин, будет ли считаться статистика по заходам на моб. версию тем счетчиком?

    • Сергей, приветствую!
      У меня также в футере счетчик от LI, но количество зашедших с мобильных устройств по нему я никогда не отслеживал)) Стало самому интересно и я так и не понял, где это информация, разве что раздел "браузеры" посмотреть, там видны Android, Ios и прочие мобильные браузеры.
      По поводу будут засчитаны или нет эти посещения, конечно, да.
      Я лично считаю счетчик от LI пригодным лишь для анализа слишком грубого, лишь Аналитика или Метрика помогут увидеть детали.
      Хотя кому как удобней))

  • Сам Гугл советует три плагина для Вордпресс: Jetpack, WPTouch и WP Mobile Detector. Пробовал последний - минимум настроек, но все работает и есть статистика по переходам с мобильных устройств. Адаптивный дизайн конечно хорошо, но разработчики плагинов уверяют, что мобильная версия гораздо быстрее.

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

  • Для тех, кто только создает блог, второй вариант кажется более оптимальным. Хотя плагин - это тоже не сложно. Во фрилансе - одна из самых сложных проблем - сам исполнитель. Если найдешь хорошего - настоящий клад, но клады не валяются, поэтому, я все-таки за шаблон! :!:

    • Алиса, приветствую вас!
      Согласен, выбор адаптивного шаблона самый выгодный вариант, но он зачастую доступен тем, кто только создает свой сайт. Если же у вас уже предыдущий шаблон имеет много исправлений, то установка нового потребует много времени и сил (именно сами корректировки и доработки).

      • Ну, да, в этом в основном проблема. Затраченного времени предыдущего и будущего жалко, в таком уж случае плагин.) Нужно рационально распределять свое время и силы!

Related Post