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

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

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

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

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

Здесь я вижу два варианта:

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

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

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

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

Если подобное сообщение вам еще не приходило, то это не значит что у вас все гуд.

Существует специальный сервис Гугла «Проверка удобства просмотра на мобильных устройствах», где все легко проверяется достаточно перейти по ссылке www.google.com/webmasters/tools/mobile-friendly/ и ввести URL адрес проекта в специальное поле и нажать «Анализировать».

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

Тем более много посетителей высказалось в статье «Новый дизайн seoslim.ru», что новому обличаю блога не хватает только адаптации под мобильники.

Я сперва не придал этому значение, но когда просмотрел Яндекс Метрику пришел в недоумение. Оказывается, каждый день блог seoslim.ru более 10 % посетителей просматривают именно с мобильных устройств.

Данная статистика доступна из меню Метрики «Технологии» далее «Мобильные устройства».

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

Теперь давайте перейдем к самому главному и узнаем, с помощью чего создается мобильная версия сайта?

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

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

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

Кроме настроек отображение названия проекта, регионализации и режима отображения вам на выбор будет предоставлено 7 тем оформления с гибкими настройками.

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

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

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

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

После установки перейдите в настройки и активируйте модуль «Мобильная тема».

Хоть здесь и мало настроек, зато Mobile Theme будет работать в 1 клик. Из минусов хочется отметить некоторые проблемы с переводом.

WP Mobile Detector - еще один продвинутый плагин по выводу мобильной темы сайта на wordpress. Данный модуль легко распознает тип устройства, с которого заходят на сайт и если это планшет или телефон, то подключается мобильный шаблон.

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

Еще здесь присутствует сбор статистики по уникальным посещениям и поисковому трафику.

Duda Mobile Website Builder - на этот раз данный плагин представляет из себя мини конструктор мобильной темы для сайта.

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

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

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

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

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

WP Mobile Edition - плагин для мобильной оптимизации блогов, который, по сути, представляет одно и то же, что его собрат WordPress Mobile Pack.

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

Как блог seoslim.ru стал адаптивным под мобильные устройства

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

Я решил не заморачиваться с данными вопросом, а обратился к своему давнему онлайн другу, профессионалу и просто хорошему человеку, который за вполне адекватную цену (для каждого она индивидуальна) создал мобильную версию сайта для данного проекта и теперь seoslim.ru приобрел совершенно иной вид при просмотре его с телефонов и планшетов.

А вот как отображается выпадающее меню всех страниц и разделов блога.

Посмотрите, какая картина наблюдается у меня теперь.

Остается ждать трафика...

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

Буду очень признателен, мне важно ваше мнение. До скорой встречи!