X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
> Как создать мобильную версию сайта
SEOstager
SEOstager
Topic Starter сообщение 22.10.2012, 2:30; Ответить: SEOstager
Сообщение #1


97.jpg

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

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

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

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

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

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

В принципе все существующие на сегодня онлайн сервисы по созданию мобильной версии сайта похожи между собой. Начну с сервиса, который понравился мне всех больше – это 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
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Лемати
Лемати
сообщение 22.10.2012, 10:08; Ответить: Лемати
Сообщение #2


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

SEOstager, скажите, по Вашему мнению, что лучше использовать плагин или сервис для создания мобильной версии. И из сервисов, какой по Вашему лучше? Вообще можно сделать, чтобы цветовая гамма и стиль сайта максимально сохранился тот, что есть в оригинале.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
merfo
merfo
сообщение 22.10.2012, 10:42; Ответить: merfo
Сообщение #3


Также использую MobilePres, но только для пользователей простых телефонов и Opera Mini. Сенсорным телефонам и планшетам уже показываю иную тему с помощью WP Touch Pro 2.7
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
SEOstager
SEOstager
Topic Starter сообщение 22.10.2012, 11:24; Ответить: SEOstager
Сообщение #4


Лемати, вообще это дело индивидуальное, с одной стороны, если у владельца сайта есть возможность заплатить деньги (те же 9 долларов в месяц за сервис dudamobile), то скорее всего лучше подойдут онлайн сервисы, так как там намного шире функциональность, и настроить что то под себя, ту же цветовую гамму и и стиль сайта, не составит труда. Из сервисов мне всех больше понравился dudamobile, поэтому я подробно на нем остановился в этой статье. Там все просто и понятно даже человеку с небольшим познанием в английском (такому как я)
с другой стороны, если владелец сайта сможет залезть в код плагина, то спокойно сможет сделать оформление своей мобильной версии под себя и свои нужды, поэтому я и выбрал плагин для своего блога. Мне всегда легче положиться на свои силы, чем на сторонний сервис =))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Лемати
Лемати
сообщение 23.10.2012, 15:32; Ответить: Лемати
Сообщение #5


[member=SEOstager], благодарю за ответ, попробую сначала сервис использовать, так как стараюсь плагины на сайт только действительно необходимые ставить, если нет возможности в коде прописать что то, чтобы не было нагрузки на сервер и конфликтов с шаблоном.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
SEOstager
SEOstager
Topic Starter сообщение 24.10.2012, 9:20; Ответить: SEOstager
Сообщение #6


с этим полностью согласен, сам стараюсь так же делать. хотя эти плагины практически не нагружают сервер
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
valbars
valbars
сообщение 9.11.2012, 21:06; Ответить: valbars
Сообщение #7


Интересно. А вот меня сейчас больше интересует наоборот. Как создать WEB версию для моб.сайта)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
SEOstager
SEOstager
Topic Starter сообщение 11.11.2012, 16:35; Ответить: SEOstager
Сообщение #8


ну с этим мне кажется проблем быть не должно =) ибо сейчас сайт можно создать без особых глубоких знаний
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
SEOstager
SEOstager
Topic Starter сообщение 11.11.2012, 17:02; Ответить: SEOstager
Сообщение #9


Я, кстати, уже сделал мобильную версию своего блога. Посмотреть можно здесь и сравнить с полной версией (снизу есть переключатель). Делал с помощью плагина MobilePress. Как видите, тему можно полностью заточить под ваши нужды.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
r0mZet
r0mZet
сообщение 7.6.2015, 21:31; Ответить: r0mZet
Сообщение #10



<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 - 7.6.2015, 21:31
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Продвижение молодого сайта
30 maxmer 6367 26.3.2024, 21:49
автор: c4p1t4l15t
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1354 26.3.2024, 21:43
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1122 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2291 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3918 25.3.2024, 6:34
автор: Skyworker


 



RSS Текстовая версия Сейчас: 29.3.2024, 6:14
Дизайн