Создаем мобильную версию сайта — 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/

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

статистика плагин wptouch

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

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

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

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

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

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

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

настройки wptouch

 Внимание!

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

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

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

базовые-настройки-wptouchТут всё ясно, вносим название и оставляем галочки по умолчанию.

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

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

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

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

расширения-и-темы-wptouch

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

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

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

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

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

фирменная-символика

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

стили-часть-2

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

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

4. Меню

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

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

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

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

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

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

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

До встречи!

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

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

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

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

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

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

Получать обновления блога на Email

Обсуждение: 72 комментария

  1. дмитрий:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
      1. Рашида:

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

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

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

      3. Игорь:

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

    2. Рашида:

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

      Ответить
  2. mikhed:

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

    Ответить
  3. mikhed:

    Хотя, твой блог отображается отлично)
    может тоже плагин заюзаю)

    Ответить
    1. Николай Вилков:

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

      Ответить
  4. дмитрий:

    Рашида, не припомню такого…

    Ответить
    1. Рашида:

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

      Ответить
  5. Рашида:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
      1. Рашида:

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

  6. Роман:

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

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

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

    Ответить
    1. Рашида:

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

      Ответить
      1. Роман:

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

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

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

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

      3. Игорь:

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

      4. Рашида:

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

      5. Роман:

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

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

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

        Спасибо, в будущем мне это пригодится, Роман.

  7. Сергей:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
  8. Олег:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
  9. Сергей:

    Николай, спасибо!

    Ответить
  10. Алиса:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
      1. Алиса:

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

  11. Алиса:

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

    Ответить
  12. Рашида:

    Вот и я получила письмо «счастья» от Гугла — придется разбираться, что не так??? Хотя считала, что шаблон у меня адаптивный и проблем на мобильных устройствах не вызывает…

    Ответить
    1. Николай Вилков:

      Если гугл написал, то надо думать над путями решения проблемы однозначно.

      Ответить
  13. Артем:

    Приветствую! А вот меня как-то смущает мобильные версии. Это все таки достаточно устаревшая технология. Все лучше адаптив прикручивать. Я вот думаю, а не проще плагина использовать какой-нибудь фреймворк типа Бустрапа. Надо будет попробовать…

    Ответить
    1. Николай Вилков:

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

      Ответить
      1. Артем:

        Привет, Николай! Ну вот как раз есть у меня возможность проверить и внедрить адаптив. Сделаю расскажу, каково это)))

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

        Договорились, Артём, жду вестей 🙂

      3. Артем:

        Приветствую! Победил я адаптивность. Надо было внедрить отзывчивость в фиксированный шаблон сделанный в Артистере. Одним словом, все оказалось не так страшно, даже фреймворки не потребовались, просто отдельный файлик с медиазапросами прикрутил и расставил проценты по ширине.
        Нормально получилось… Посмотрим теперь что клиент скажет)))

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

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

      5. Артем:

        Вот как раз этим адаптив и отличается от мобильной версии — в адаптиве отображается весь сайт кокой он есть, а в мобильной — только часть

  14. Александр:

    Странно порой получается — инструмент проверки от Гугла говорит что все ОК, а затем все равно приходят уведомления о «немобильности». При том что тема явно адаптивная. Вот уже прихожу к мысли о том чтобы ставить WP touch даже и на адаптивные дизайны)))
    Интересно, а сколько по времени гугл пересматривает свою оценку? А то я вроде как исправил, а в панели вебмастера все так же и пишет что 6 страниц немобильны 😈

    Ответить
    1. Николай Вилков:

      Александр, пождите до следующего апдейта, возможно, после него Google изменит отношение к мобильности вашего сайта.

      Ответить
    2. Артем:

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

      Ответить
      1. Николай Вилков:

        Смотрю, тебе также нравятся простые кнопки «Поделиться» от Яндекса 🙂 и я к ним пришёл со временем, всё гениальное — просто!

      2. Артем:

        Это да, самый простой вариант. Еще и в метрике можно статистику смотреть

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

        Да, очень удобно и мне нравиться в этих кнопках, что можно статистику в Метрике детальную смотреть.

  15. Ольга Happy:

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

    Ответить
    1. Артем:

      Хм, а что разве шаблон от Борисова не адаптивный? Мне казалось, что в нем есть отзывчивость. Кстати, этот шаблон достаточно несложно адаптировать

      Ответить
      1. Ольга Happy:

        У Борисова есть два варианта адаптированный (платный цена символическая около 300 р. вроде бы) и не адаптированный (бесплатный). Я сперва для пробы установила шаблон не адаптированный под мобильники. Вчера ради эксперимента установила на свой блог плагин для адаптации под мобильники wpsmart-mobile вроде бы нормально все отображается.)) Но я не спец в этом вопросе))

      2. Артем:

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

      3. Игорь Вилков:

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

  16. Владимир:

    Тоже недавно получил письмецо счастья от Гугл. Решил проблему адаптивной версткой, сел и за 2 вечера сделал.

    Ответить
  17. Джек Хелпер:

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

    Ответить
  18. Виктор:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
      1. Виктор:

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

  19. Александр:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
  20. Юрий:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
  21. Вадим:

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

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

    Ответить
    1. Николай Вилков:

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

      Ответить
  22. Вадим:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
  23. Вадим:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
      1. Вадим:

        Короче пока не обновишься счастья не будет, да?

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

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

  24. Вадим:

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

    Ответить
    1. Николай Вилков:

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

      Ответить
  25. Игорь:

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

    Ответить
  26. Александр:

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

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

© 2018 Блог Николая Вилкова | Записки блогера // Дизайн и поддержка: GoodwinPress.ru