Перейти к содержимому

Сервис обмена электронных валют


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

#1 SEOstager

SEOstager
  • Пользователь
  • 12 сообщений
  • Репутация: 5
12

Отправлено 22 Октябрь 2012 - 01:30

97.jpg

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

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

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

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

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

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

 

Заказать индивидуальную адаптацию сайта

 

Самым оптимальным вариантом будет заказать индивидуальную адаптацию Вашего сайта под все устройства. По стоимости: нужно оплатить только 1 раз и больше никаких абонентских взносов. По качеству: пишется отдельный скрипт и файл стилей CSS, который позволяет Вашему сайту корректно отображаться не только на телефонах, но и других устройствах (смартфоны, планшеты). Будет адаптивное меню, в которое можно вынести важные разделы сайта, а ненужные скрыть. Рекомендую заказать адаптацию сайта под мобильные устройства именно тут http://www.mobile-version.ru/ . Они все сделают по стандартам поисковых систем. Сайт пройдет тесты на мобилопригодность у Яндекса и Google. И цена приятно удивляет!

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

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

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

2012-10-22_000044.png


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

2012-10-22_001509.png

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

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

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

2012-10-22_012420.png


Если вы выбираете бесплатную версию, то вводите ваши 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 необходимо выбрать способ вывода мобильной версии сайта: либо браузер сам будет автоматически определять устройство, с которого вы зашли, либо это будет ссылка на мобильную версию на вашем сайте, либо все вместе.

2012-10-21_165708.png

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

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

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

2012-10-21_171221.png

После настроек, мой блог стал выглядеть так:
2012-10-21_154652.png2012-10-21_154732.png

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

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

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

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

2012-10-21_180731.png2012-10-21_180921.png

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

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

2012-11-11_171306.png2012-11-11_171343.png


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

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

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

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

seopult.gif

 

 

  • 2

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как создать мобильный wap сайт
  2. Как направить пользователя на мобильную версию ?
  3. Ширина сайта в мобильной версии
  4. Как влияет мобильная версия сайта на сео-продвижение?
  5. Оцените мобильную версию сайта

#2 Лемати

Лемати
  • Пользователь
  • 26 сообщений
  • Репутация: 5

Отправлено 22 Октябрь 2012 - 09:08

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

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

#3 merfo

merfo
  • Пользователь
  • 55 сообщений
  • Репутация: 6

Отправлено 22 Октябрь 2012 - 09:42

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

#4 SEOstager

SEOstager
    Topic Starter
  • Пользователь
  • 12 сообщений
  • Репутация: 5

Отправлено 22 Октябрь 2012 - 10:24

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

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


  • 0

#5 Лемати

Лемати
  • Пользователь
  • 26 сообщений
  • Репутация: 5

Отправлено 23 Октябрь 2012 - 14:32

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

#6 SEOstager

SEOstager
    Topic Starter
  • Пользователь
  • 12 сообщений
  • Репутация: 5

Отправлено 24 Октябрь 2012 - 08:20

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

#7 valbars

valbars
  • Пользователь
  • 5 сообщений
  • Репутация: 1

Отправлено 09 Ноябрь 2012 - 20:06

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

#8 SEOstager

SEOstager
    Topic Starter
  • Пользователь
  • 12 сообщений
  • Репутация: 5

Отправлено 11 Ноябрь 2012 - 15:35

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

#9 SEOstager

SEOstager
    Topic Starter
  • Пользователь
  • 12 сообщений
  • Репутация: 5

Отправлено 11 Ноябрь 2012 - 16:02

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

#10 r0mZet

r0mZet
  • Модератор
  • 968 сообщений
  • Репутация: 108

Отправлено 07 Июнь 2015 - 20:31

<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 Июнь 2015 - 20:31

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru