Запустил мобильную версию блога. И вам советую : )

image

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

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

image

27,5 % заходов с мобильных устройств. Ровно год назад доля всего мобильного трафика составляла 14%:

image

Получается, что доля мобильного трафика за год увеличилась почти в два раза, и  27% посетителей читают мой блог со смартфонов и планшетов. Экраны маленькие, приходится скроллить пальцами…

Такое положение дел игнорировать дальше было нельзя, и после небольших манипуляций с Artisteer : ) включил в своем шаблоне responsive-режим. Кстати, одновременно переехал на HTML5.

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

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

Протестировал на нескольких устройствах – вроде все нормально работает.  Но если вдруг Вы заметите, что есть ошибки, сообщите, пожалуйста.

Заранее спасибо.

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

Советую почитать:

  1. Обзор хостинга Eurobyte.Ru и почему лучше сразу готовиться к переезду на VPS?
  2. 7 признаков фанатичного блогера
  3. Хороший способ быстро проиндексировать сайт в Google и проверьте авторство своих статей : )

Только для блогеров и вебмастеров:

Проверьте Вашу почту и подтвердите подписку на новости

Проверьте правильность заполнения еще раз!

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

69 комментариев к “Запустил мобильную версию блога. И вам советую : )

  1. Это самый маленький и не понятный пост на блоге)) Как сделать мобильную версию? Или нужно проверить как оно смотрится, а потом думать?

    • Ну смотри, здесь несколько путей и у каждого есть свои плюсы и минусы:

      1. Покупать шаблон, который изначально отзывчивый для мобильных устройств. (respnsive). Почти все коммерческие шаблоны для ВордПресс поддерживают такую функцию.
      2. Ставить плагин WPtouche- я отказался от этого варианта.
      3. Делать мобильную версию на поддомене/ Например, pda.ideafox.ru — совсем не вариант, так как это два разных сайта.

      Самый лучший вариант — искать respnsive-шаблон.

      У тебя вот новый шаблон поддерживает такой функционал?

      • Да, есть в его описании «Адаптивный дизайн темы обеспечивает просмотр сайта на различных мобильных устройствах», не обращал внимание на эту возможность, недооценивал. 27% трафика — это очень серьезно, это треть ))) Я спокоен…

        • Да, тогда тебе не о чем переживать)
          Глянул твой блог — все корректно работает. На Андроиде отличная мобильная версия включилась.
          Кстати, Гугл в последнее время любит сайты с мобильной версией. Типа, забота о посетителях и все такое )

          • Значит я в тренде? Пусть уже любит ))

          • Дима, привет.
            Позволь немного покритиковать =)

            Зашел с планшета на твой сайт и никакой адаптивности не увидел. Более того, стало еще хуже в том плане, что нельзя свайпами увеличивать область просмотра. В чем тогда адаптивность?Это на айпаде так. Может на Андроиде иначе?

            Под адаптивностью я понимаю в том числе и то, что при заходе с планшетов/смартфонов всю область экрана занимает непосредственно область статьи. А сайдбар и все лишнее «уезжает» вниз. Вот у Александра как раз именно так и происходит.

          • Это говорит только о том, что стили под iOS не заточены. Вон смотрел с андроида и там все нормально и горизонтально и вертикально. Сайтбары вниз съезжают верхнее меню превращается в список, в общем все нормально…
            Александр, панику не разводи)))

          • Отставить панику! =))

            Так я про это и говорю, что на iOS не очень-то адаптация видна :)

      • Странно, а самый доступный вариант не пробовали — установить адаптивный шаблон совершенно бесплатно?

          • Так вы же его немного «допилили» или я не так поняла? Просто для тех, кто этого не умеет делать есть отличные готовые шаблоны :)

          • Ну, да немного руками пришлось попилить)
            Вообще, сейчас полно платных шаблонов, которые изначально адаптивны для разных устройств. Цены от 10 до 50 долларов.

  2. Давно пора Дмитрий! Гораздо удобнее читать

  3. Привет, Дмитрий! А что значит ты включил адаптивный режим и подключил хтмл5? Это как? В первый раз слышу, чтобы можно было подключать хтмл5?

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

    • Привет, Артем) Шаблон изначально был сделан в Артистер. Последняя версия этой программы автоматически конвертировала шаблон в html 5 и подключила css , которая и формирует мобильную версию.

      • А вон чего… То есть Артистер переверстывает шаблон по новой с адаптацией. Удобно.
        Слушай, а чего у тебя в мобильной версии лемур пропадает?

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

  4. Хорошо. Я протестировал. Кстати мне понравилось, что достаточно просто изменить размер окна браузера и макет меняется.

    • Точно. вот сейчас на ноуте изменил размер окна, и видна адаптивность. Странно, почему тогда этого нет на iOS (о чем я выше написал)?

  5. Проверил, очень удобно. Потом и себе сделаю, вдруг когда придется с мобилы заходить. Но опера обманывает такие штуки, представляясь десктопом :)

    • Есть такое дело, могут быть ошибки
      Особенно для старых версий браузеров

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

        • там прямо в настройках можно выбрать

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

          • Кстати, есть странный глюк. Захожу с ноута по wi-fi и вижу мобильную версию)

  6. Молодец, Дим, а я вот никак этот вопрос не решу. Нет у меня шаблонов, верстаю сама. Попробовала как-то сделать адаптивный дизайн, но с менюшкой так и не разобралась. Придется, наверное, искать верстальщика, который поправит готовые дизайны.

  7. Здорово) Хорошо получилось.
    Нужно тоже заняться этим вопросом, и правда мобильного трафика все больше и больше становится

  8. Хм, очень даже удобная вещь, хотя и непривычно немного смотрится. Частенько читаю тебя на парах, но вот с обновленной мобильной версией столкнулся только сейчас, после прочтения этой статьи на ноуте :)

    • Роман, не совсем понял — у тебя на ноуте отображается мобильная версия?

  9. Нет, я не так выразился.
    С ноута все как обычно :)

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

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

  11. А как мне например прикрутить другую тему (мобильную) к существующей?? Спасибо!

    • Можно воспользоваться специальным плагином — DudaMobile WordPress. Для этого нужно зайти на сайт плагина и настроить вид мобильной версии блога

      • Не знал про DudaMobile WordPress…
        Любопытная штука, но платная )
        В бесплатной версии ограничение на 10 страниц и 500 просмотров страниц в месяц, что не вариант

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

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

      • С точки зрения верстки лучше HTML5, а вот по отношению к этому шаблону разницы нет)
        Но вообще, сейчас тренд таков, что все чаще отдается предпочтение именно HTML5, о чем есть статистика
        https://ideafox.ru/pro-blog/statistika-interneta.html

      • Cайты, сверстанные на HTML5 более дружелюбны для поисковых систем.

          • Дима, а как «пересесть» на HTML — 5? Трудно это? Может быть,какой-нибудь урок запишешь или статью — для лиц, особо не обремененных знаниями о кодах и тегах?

          • Не, просто так пересесть не получится)
            Это новый стандарт HTML и требует глубокой переработки шаблона. Проще новый купить)
            Но у тебя шаблон сделан в Артистер и его можно конвертировать в ХТМЛ-5 при помощи этой программы. Одновременно можно включить адаптивный дизайн…
            Если есть исходник твоего шаблона, то делается это очень быстро.

  13. Для совсем извращенцев можно вначале определять устройство, а потом уже подавать разную версию css ну или вообще переработать вывод.

  14. Странно, в вертикальной ориентации планшета отображается мобильная версия сайта, а в горизонтальной — обычная. Почему? И футер сайта в мобильной версии не очень…

    • Сергей, привет! Ты же на iOS? У меня в горизонтальной никакой адаптации нет. А в вертикальной и того хуже, не знаю как объяснить. Короче показывается область статей и первый к ней сайдбар. А само отображение «ездит». Ну, т.е. сдвинул влево — пол статьи ушло за экран, но показался второй сайдбар. А также не работает увеличение области просмотра.

      • Зашел с Оперы Coast — вертикально отображается адаптивно, горизонтально — нет. Сергей, ты какой браузер юзаешь?

        p.s. Дим, извини, за кучу камментов, хочется разобраться просто =))

        • Нет проблем, спасибо за наблюдения, Саш.
          Тут идет перестройка внешнего вида в зависимости от ширины экрана в пикселях, а не от модели устройства.
          Видимо, поэтому меняется внешний вид сайта в зависимости от ориентации.

          • Да, так и есть =) Остается открытым вопрос, почему в дефолтном Сафари изменения не происходят в вертикальной ориентации. И почему не работает увеличение :)

    • Мобильные версии, конечно глупость. А вот адаптивный дизайн, что бы блог можно было нормально читать на разных разрешениях — это нормально. И даже нужно…

      • Да, если внимательно прочитать, то Лебедев говорит именно про отдельную версию сайта на субдомене.
        Но, самое забавное, он же делал мобильную версию Яндекса m.yandex.ru

    • Мнение Артемия Лебедева не стоит принимать за некий постулат. Он считает так, вы — иначе. И у вас будут свои аргументы.

  15. Молодец.) Нужно и о удобстве читателей думать.)..Да и рост трафика на пользу пойдет.)

  16. Я вообще впервые слышу про мобильные версии сайта

    • А надо бы озаботиться, Данила)
      Мобильный трафик растет и очень быстро

  17. Лично я пользуюсь WPtouche. Не знаю почему некоторым людям он не нравится. У меня всё идеально работает и без разных глюков.

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

  18. Мне вот интересно какие планы у Гугла на развитие своего блогспот детища? По идее такая корпорация могла бы сделать вообще идеальную бесплатную блог платформу.
    В принципе меня многое устраивает на блоггере, но все таки чувствуется что они недорабатывают.
    Дмитрий, что знаешь об этом?

    • Алексей, я бы на твоем месте сделал блог на ВП и не мучился. Блогспот недолюбливает блогерская тусовка, и там очень низкая комментируемость.
      Короче, сделай отдельный блог на ВП и не трать время на блогспот : )
      Я еще ни разу не видел сайт на блогспоте с посещаемостью более 1000 человек

  19. Ну да, а два года ведения блога и написания контента слить в нужник:_). Так получается?

    • Поищи статьи как переехать на другой домен при помощи 301 редиректа. Опасно, но можно попробовать.

  20. Просто чем мне нравится блогспот, я вообще не заморачиваюсь технической частью, меня не спамят и я просто пишу свои статьи. Жаль только, что реально мало хороших блоггеров на блогспоте. А ВП-блоггеры действительно, складывается такое ощущение, что смотрят свысока. Я бы мог нанять себе помощника-технаря, который сделал бы мне красивый маркетинговый блог, но не вижу в этом смысла.

  21. Я верю в Гугл, надеюсь, что у них все будет хорошо и они будут развиваться и не будут забывать нас блоггеров:)

Комментарии закрыты.