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

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 не заточены. Вон смотрел с андроида и там все нормально и горизонтально и вертикально. Сайтбары вниз съезжают верхнее меню превращается в список, в общем все нормально…
            Александр, панику не разводи)))

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оставить комментарий