Как создать мобильную версию сайта

[SEOstager]

Привет всем читателям форума Masterwebs.ru! В последнее время значительно возросло число пользователей мобильных телефонов, которые постоянно пользуются интернетом со своих устройств. Связанно это в первую очередь с развитием мобильного рынка в мире (большое разнообразие телефонов с большими экранами, с помощью которых стало удобнее пользоваться интрнентом). Это также связано и с социализацией интернета. Большое количество социальных сетей и социальных сервисов, начиная от Фейсбука и Вконтакте, заканчивая Твиттером и Инстаграмом, заставляют нас всегда быть на связи и держать руку на пульсе. Ритм жизни растет, поэтому для пользователя важно, чтобы зайдя в интернет с мобильного телефона, он получил всю необходимую информацию быстро и без лишних неудобств.

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

Что происходит сейчас? Сейчас, зайдя на сайт, не имеющий версии, адаптированной под мобильные устройства, посетители не получат ничего, кроме неудобств. Одни мелкий шрифт и горизонтальная прокрутка экрана чего стоят По статистике, приведенной Google, более 60% посетителей больше не вернутся на такие сайты.

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

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

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

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

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

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

После этого перед вами откроется первая страница настроек. На этой странице вы сможете настроить шаблон вывода ваших записей и цветовую тему оформления. Причем в верхней части экрана настроек есть 2 ссылки Blog Templates и Website templates, соответственно, перейдя по одной из них, можно выбрать либо шаблон блога, либо шаблон сайта. После того как вы произвели все необходимые настройки, переходите к следующему шагу, нажав кнопку Next.



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

Перейдя во вкладку Full, можно также добавить некоторые вкусности (причем некоторые из них только за деньги).
Далее, перейдя на третий шаг, нас просят выбрать, будем ли мы платить 9$ в месяц за использование этого сервиса или будем использовать его бесплатно. Тут уже выбор на ваше усмотрение. Основными минусами бесплатной версии являются реклама и использование поддомена, то есть мобильная версия вашего сайта будет располагаться на домене вида
 

http://mobile.dudamobile.com/site/ВАШ_САЙТ

Если вы выбираете бесплатную версию, то вводите ваши e-mail и пароль в форму ниже. На следующей странице будет написан адрес мобильной версии вашего сайта.

Теперь вам осталось сделать перенаправление с основной версии вашего сайта на мобильную, если посетитель зашел с мобильного устройства. Для этого необходимо между <head></head> на вашем сайте вставить следующий код
 

<script type="text/javascript" src="http://static.dudamobile.com/DM_redirect.js"></script>
<script type="text/javascript">DM_redirect(http://mobile.dudamobile.com/site/ВАШ_САЙТ);</script>

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

Также хочу посоветовать следующие сервисы:
mippin.com – имеет немного настроек; так же как и dudamobile имеет англоязычный интерфейс. Мобильные версии, созданные в mippin.com, будут открываться практически со всех мобильных устройств, так как информация там берется из rss канала.

mobify.com – еще один интересный сервис. Для того чтобы начать оптимизацию сайта под мобильные устройства, необходимо пройти регистрацию, но она быстрая и не требует подтверждения e-mail адреса. Также, если ваш блог работает на Wordpress, вам необходимо установить плагин WordPress Mobile by Mobify, для того, чтобы осуществлялось перенаправление на мобильную версию.
Все эти сервисы похожи между собой, поэтому нет смысла описывать подробно каждый из них. При желании можно найти подробную информацию в интернете.

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

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

Начну с плагина WordPress Mobile Pack. После установки, в меню Внешний вид админки появятся 3 новых пункта Mobile Theme, Mobile Widgets и Mobile Switcher.

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



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

Во вкладке Mobile Widgets можно выбрать виджеты, которые будут выводиться в мобильной версии.

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



После настроек, мой блог стал выглядеть так:


По-моему очень даже неплохой плагин, но требует определенных доработок в теме, чтобы удовлетворить все свои потребности =)

Следующий плагин – Wordpress PDA & iPhone. Его особенностью является отсутствие настроек, то есть после установки мобильная версия сайта сразу становится доступной. Также радует вполне сносный внешний вид сайта. Блог, после установки этого плагина выглядит так:


Еще один интересный плагин – MobilePress. Имеет минимум настроек, а именно выбор темы, выбор заголовка блога и его описания (если не вписывать название блога и описание, то они берутся из стандартных настроек Wordpress). Плагин готов к работе сразу после установки.

Темы оформления для него можно создавать самому, что позволяет полностью настроить вашу мобильную версию так, как хочется вам. Загружать ваши темы нужно в папку wp-content/mobile-themes. Вот так выглядит мой блог со стандартными настройками плагина, без каких либо дополнительных установок:



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

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




Вот такие средства можно использовать для того, чтобы оптимизировать ваш сайт или блог под различные мобильные устройства. Кстати, помимо оптимизации под мобильные устройства, необходимо также помнить и об оптимизации для ускорения работы сайта, ведь чем дольше загружается сайт, тем неудобнее приходится пользователю, особенно если он заходит на сайт через мобильный телефон. Для пользователей Worpdress есть отличный плагин - SSD Optimize WordPress, который ускоряет работу сайта, отключая некоторые ненужные функции.

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

Спасибо за внимание Удачи!

При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

 

 

[Лемати]

Отличная тема! Всё очень понятно объяснили, спасибо. Я 100% воспользуюсь Вашей инфой. У моего сайта разрешение под мобильные аппараты не подходит - часть сайта справа обрезается и при этом нет горизонтальной прокрутки. Узнавала сколько стоит написать мобильную версию - мама дорогая, как дорого для меня. Кучу трафика потеряла из-за этого (((

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

[merfo]

Также использую MobilePres, но только для пользователей простых телефонов и Opera Mini. Сенсорным телефонам и планшетам уже показываю иную тему с помощью WP Touch Pro 2.7

[SEOstager]

Лемати, вообще это дело индивидуальное, с одной стороны, если у владельца сайта есть возможность заплатить деньги (те же 9 долларов в месяц за сервис dudamobile), то скорее всего лучше подойдут онлайн сервисы, так как там намного шире функциональность, и настроить что то под себя, ту же цветовую гамму и и стиль сайта, не составит труда. Из сервисов мне всех больше понравился dudamobile, поэтому я подробно на нем остановился в этой статье. Там все просто и понятно даже человеку с небольшим познанием в английском (такому как я)

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

[Лемати]

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

[SEOstager]

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

[valbars]

Интересно. А вот меня сейчас больше интересует наоборот. Как создать WEB версию для моб.сайта)

[SEOstager]

ну с этим мне кажется проблем быть не должно =) ибо сейчас сайт можно создать без особых глубоких знаний

[SEOstager]

Я, кстати, уже сделал мобильную версию своего блога. Посмотреть можно здесь и сравнить с полной версией (снизу есть переключатель). Делал с помощью плагина MobilePress. Как видите, тему можно полностью заточить под ваши нужды.

[r0mZet]

<script type="text/javascript" src="http://static.dudamobile.com/DM_redirect.js"></script>
<script type="text/javascript">DM_redirect(http://mobile.dudamobile.com/site/ВАШ_САЙТ);</script>

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

Пробовал конструкцию для .htaccess:

 

<IfModule mod_rewrite.>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos" [NC]
RewriteRule ^$ http://mobile.site.ru/ [L,R=302]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

где 

http://mobile.site.ru

 - мобильная версия сайта. Работает ли у кого такой вариант? Может тут где есть синтаксическая ошибка?

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

Сообщение отредактировал r0mZet: 07 June 2015 - 20:31

[Ixman]

@r0mZet, если бы тут была синтаксическая ошибка, то сайт бы не открывался и выдавал 500 ошибку. По остальному к сожалению советом помочь не могу, но на WP есть плагины вполне работающие, сам ранее экспериментировал 

[r0mZet]

@Ixman, значит в .htaccess я все правильно написал)))

Но он не редиректит на мобильную версию, зашел на сайт через айфон.... картина такая же как на ПК

[Ixman]

@r0mZet, могу посоветовать попробовать так сделать
 

RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos) [NC]
RewriteRule ^(.*)$ http://mobile.site.ru/ [L,R=302]

Еще могу порекомендовать убрать это googlebot-mobile он как бы официально есть, но чтобы мобильный бот google ходил под этим юзер агентом ни разу не встречал. Обычно это дело происходит под стандартным юзер агентом google bot, только там указан какой-нибудь мобильный. Да и вообще такой подход к определению мобил, будет работать примерно на 50 - 60%. Ту же opera по opera mobile выцепить не всегда составляет возможным. Ну и кроме этих ещё целая куча всяких мобильных юзер агентов

[fedornabilkin]

Вы чего? Уже давно пора переходить на адаптивную верстку и медиаскрин.

[Serg44]

@fedornabilkin,

 

Вы чего? Уже давно пора переходить на адаптивную верстку и медиаскрин.

 

Адаптивный дизайн это самый простой и плохой способ.

Лучший способ, но сложный это RESS

[fedornabilkin]

Адаптивный дизайн это самый простой и плохой способ.

Что простой, я согласен, а чем же он плох? 

[r0mZet]

@fedornabilkin,Вот к тебе клиент обратился  говори т- нам надо для сайта замутить мобильную версию. Ты им так же скажешь "Вы чего? Уже давно пора переходить на адаптивную верстку и медиаскрин." ? Я уже представляю как на тебя посмотрят 

 

Прикрепленные изображения

• 

Сообщение отредактировал r0mZet: 08 June 2015 - 10:41

[fedornabilkin]

@r0mZet, Что отличает использования медиаскрина от наличия мобильной версии сайта?

Моб.версия подразумевает дополнительные файлы шаблона, стили, скрипты + алгоритм распознавания клиента.

Технология медиаскрин распознает размер экрана, на котором отображается содержимое сайта.

Неужели я ошибаюсь?

 

Если клиент просит моб.версию, для него скорее важно как отображается сайт с мобильника, а не физическое наличие моб.версии.

Я так рассуждаю.

[Serg44]

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

Также важно скорость работы, мобильник не имеет тех возможностей как ПК, да ещё скорость инета маленькая. Версия на медиаскрине это та же версия сайта что и для ПК.

 

 

Вот я думаю как лучше сделать

мобильная версия на отдельном домене или субдомене или всё вместе на одном домене ?

[Ixman]

@fedornabilkin, если вам не принципиально наличие мобильного трафика на сайте, а лишь главное заключается в том, чтобы мобильный юзер смог просмотреть ваш сайт с максимальной удобностью, то конечно же медиаскрин самое то. Но это никак не мобильная версия сайта, это всего лишь ПК версия подогнанная под экран мобильного устройства. Отдельная мобильная версия это намного более удобный формат для мобильных устройств, да и для монетизации сайта, это намного большая производительность сайта на мобильном устройстве и т.д. и т.п. В общем пока руками не пощупаешь, то и утверждать что-то либо другое не стоит.

[robot]