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

При проведении бесплатного тестирования юзабилити и дизайна многие спрашивают, что такое мобильная версия сайта? Если у Вас есть смартфон, лучше всего с тачскрином, то попробуйте зайти через него например на yandex.ru — не узнаете старого доброго Яшу? Чего-то не хватает, не правда ли? Вам отображается немного измененный вариант с только основным набором функций и четко откорректированный под ваш маленький экран.
Давайте разбираться, что это такое, как создать мобильную версию для своего сайта и какие преимущества она нам дает.

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

Мобильная версия сайта

А теперь попробуйте зайти на какой-либо крупный сайт, не имеющей мобильной версии — такое правда сейчас редкость, но все же. Особенно наглядно это будет, если посмотреть через встроенный браузер смартфона под управлением Windows Mobile — горизонтальные полосы прокрутки, мелкий шрифт, еле-еле грузящиеся или вовсе не отображающиеся картинки и так далее — полный набор косяков, которые отпугнут от сайта посетителей. И здесь нам на помощь придет создание облегченной версии. Особенно это актуально для проектов, которые ориентированы на тех, кто будет их посещать с различного рода гаджетов — новостные порталы, сайты о мобильниках, сервисы он-лайн оплаты, почта и т.д.


Но для этого не нужно создавать отдельный сайт, все делается гораздо проще. Одним из самых примитивных вариантов является использование light темы оформления — минимум графики, простая структура. Это частично решит проблему, но что если все-таки хочется, чтобы на компьютерах был красивый дизайн, а на мобилах легкий? В этом случае на помощь блогам на WordPress придут специальные плагины, которые автоматически определяют заход с мобильных версий браузеров — таких, как Opera Mobile, например, — и подгружают другую тему оформления, с которой сайт будет на маленьком экране не только лучше смотреться, но и им будет удобнее пользоваться.

Подобных плагинов не сказать, что очень много, но есть и они весьма разнообразны. В конце статьи будет приведен список самых популярных вариантов, а я остановлюсь на том, который с удовольствием использую у себя — WPTouch. Он заточен именно под использование на всех современных агрегатах с тачскринами. Отличается удобством для управления сайтом с помощью пальцев — крупные заголовки и кнопки, стилизованные под iOS (то есть под интерфейс iPhone и iPad).





Плагин мобильной версии для WordPress

После его активации плагин сразу начинает работать, создавая облегченную мобильную версию сайта для мобильных браузеров. Но можно произвести дополнительные настройки. Для этого идем в меню «Параметры > WP Touch»

wp-touch интерфейс плагина мобильной версии сайта

Настроек множество — по сути это полнофункциональный шаблон, который можно детально отрегулировать на свой вкус. Например, выбрать, какая страница будет главной, какие категории исключить из показа, какую инфу (автор, дата, теги и др.) отображать, какой сделать title сайта, настроить текст в футере, цвета шаблона и даже размещение рекламы от Google AdSense. Кроме того, можно включить или отключить эффект приближения (коронная фишка тачпадов а ля Apple), комментарии, граватары, меню, формы поиска и авторизации и много много чего еще — повторюсь, это полнофункциональная тема для мобильной версии сайта.

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

Мобильная версия WordPress

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

Мобильная версия сайта с помощью плагинов:

  • WordPress Mobile Pack — также хороший плагин с множеством настроек. Есть удобная фишка — предпросмотр сайта в различных мобильных браузерах.
  • WP Tap News Press — очень неплохой и привлекательный как внешне, так и по начинке. Так же, как и в подробно рассмотренном нами плагине, есть возможность переключаться в полный режим + еще одна вещь — можно настроить отображение иконки favicon рядом с адресом в адресной строке мобильного браузера.
  • WPmob Lite. Его особенность в возможности вывести кнопки социальных сетей. Однако плагин требует бесплатной регистрации по email.
  • WP PDA & iPhone — довольно старое решение, однако его преимущество в универсальности. Сайт одинаково будет отображаться как на тачпадах, так и в обычных смартфонах и КПК, хотя настроек гораздо меньше.
  • WordPress Mobile Edition. Тоже несложный плагин, однако есть удобная настройка — выбор, для каких устройств показывать мобильную версию, а для каких полную.
  • Wapple Architect — простое решение, которое однако требует сложных действий — регистрации и ввода ключа.
  • MobilePress — и еще один плагин для создания мобильной версии сайта.

Мобильные light шаблоны без плагина

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

Комментариев: 13

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

      • Потестила уже 3 плагина и остановилась на самом последнем. Я сразу проверяю на своем самсунге, в нем opera стоит. WPTouch не распознал мобильный телефон, а WordPress Mobile Pack сильно тяжелый и не все работает, например если уже в самом посте хочу перейти на вторую страницу, он грузит только первую. А вот MobilePress очень быстро грузится и хорошо работает, только жалко тема только в одном цвете, хотелось бы по цветам подобрать ближе к цветам моего сайта, настроек у него мало, но мне больше и не надо.

        • А WP Tap News Press не пробовали? Тоже неплохой, хотя заточен именно под тачпады, как и большинство

          • Нет, не пробовала.
            Наверное попробую, только что обнаружила, что в MobilePress не могу смотреть и оставлять коментарии. Хотя эти баги могут быть только у самсунга, надо на айфоне попробовать.

          • Думаю, просто плагин их не поддерживает. Я его в конец не случайно поставил, он самый старый. На Самсунге какой браузер?

  • Я думала opera, а посмотрела браузер samsung mobile. У них все своё %) Попробую еще другие плагины, может что-то больше понравится.

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

  • Благодарю за подборку плагинов- стала пользоваться планшетом и увидела как некрасиво сайт в полной версии смотрится на нем. Решила срочно исправить ситуацию в лучшую сторону.

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

  • Спасибо за список плагинов. Я уже пробовал WPtouch по другому уроку, но что-то не срослось и мобильная версия выглядела и грузилась как полная. Я даже не уверен, что это была именно «мобильная» версия. У меня как и у Ирины Samsung, поэтому попробую для начала MobilePress

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

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