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

Здравствуйте уважаемые читатели Seo bloga Fomika. У вас уже есть мобильная версия вашего сайта? Если нет, то сегодняшний пост очень вам пригодиться.

Содержание статьи:

  1. Мобильная версия сайта при помощи плагинов
  2. Мобильная версия сайта при помощи специальных сервисов

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

Почему так важно сегодня иметь мобильную версию? Ответ очевиден. Сегодня огромное количество пользователей интернета бороздят его при помощи мобильных девайсов. И если ваш сайт, блог будет медленно загружаться в мобильных устройствах (а так оно и будет – проверено опытным путем), то ждите повышения % отказов. То есть ваш сайт будет закрыт пользователем до того, как полностью загрузиться. Потому что скорость интернета на мобильных устройствах, как правило намного ниже, чем в домашних (стационарных) условиях. Правильно?

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

Хочу сразу внести ясность. Несколько способов – это два 🙂

  1. При помощи плагинов
  2. При помощи генераторов (сервисы, которые генерируют мобильную версию)

Остальные способы – платные. Это заказ фрилансерам производство вашей моб. версии.

Мне больше понравилось, когда мобильную версию моего сайта генерирует плагин. Почему? Если делать моб. версию через специальные сервисы, они (сервисы) меняют ваши ссылки на свои. То есть перед адресом вашего домена в мобильном браузере будет стоять домен этого сервиса, что мне не очень понравилось.

По поводу скорости загрузки… Я посмотрел, как грузится блог сгенерированный сервисом и мой блог, который выводится плагином. Особой разницы я не увидел, поэтому предпочел плагин.

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

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

  • WordPress Mobile Pack
  • WordPress PDA & iPhone
  • WPmob Lite
  • MobilePress
  • WPtap-Themes/Plugin
  • WordPress Mobile Edition
  • Wapple Architect Mobile Plugin
  • WPtouch

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

После установки (можно через админку блога) и активации, в консоли админки появится панель инструментов этого плагина.

wptouch

Базовые настройки плагина

Покажу скринами.

wptouch2

Начальную страницу можете выбрать сами.

Темы и расширения

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

wptouch3

Параметры темы

wptouch4

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

wptouch5

Также можно выбрать стиль шрифта, решить — нужно ли вашим читателям делиться вашей статьей в соц-сетях, ну и вписать адреса ваших аккаунтов там.

wptouch6

К сожалению показ рекламы в бесплатной версии плагина – невозможен. Доступен только в PRO-версии.

Настройка меню

Тут сначала нужно будет выбрать, что будет выводиться в меню. У меня выбрано – Страницы WordPress.

Затем имеется возможность выбрать имеющиеся иконки к каждой страничке в менюшке. Это делается простым перетаскиванием.

wptouch7

wptouch8

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

Вот как выглядит главная страница моего блога в моем смартфоне.

wptouch9

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

Слева расположен Поиск по сайту, справа – вызов меню.

Внизу есть переключатель с мобильной версии на компьютерную – очень удобно для пользователя.

wptouch10

Мобильная версия сайта при помощи специальных сервисов

Не буду лить много воды, а сразу покажу один из таких сервисов — dudamobile.com

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

mobile-site

Во всплывшем окне заполните все поля.

mobile-site2

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

mobile-site3

ПодсказкаПалец вверх

Чтобы поменять иконку страницы, нажмите на нее в редакторе сервиса, затем нажмите Edit,

mobile-site8

затем снова на иконку

mobile-site9

и выбирайте сколько вам душе угодно. Их там 10 страниц…

mobile-site10

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

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

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

mobile-site4

нажимаем Здесь

mobile-site5

и вас перекидывает на ваш блог, чтобы вы установили этот плагин. Установите активируйте и настройте его…

mobile-site6

Вот как будет выглядеть мой блог после всех вышеупомянутых действий – картинка кликабельна.

mobile-site7

Ну вот в принципе все на сегодня. Статья получилась тяжеленькой, но зато все по полочкам разложил 🙂

У кого есть другая полезная инфа про создание мобильной версии своего сайта – прошу поделиться ею в комментариях.

Пока, пока.

Ваш Fomik…


Понравилась статья - поделись с друзьями!



Просмотр

Подпишитесь на обновления блога по почте :

Количество читателей блога


К записи "Как сделать мобильную версию сайта" 17 комментариев Самый активный комментатор в конце месяца получает денежный приз.

  1. Denis:

    так вроде шаблоны с адаптивным дизайном есть для этого, зачем плагинить то?

    [Ответить]

    Алекс Fomik Reply:

    Так мне не хочется шаблон то менять…

    [Ответить]

    Denis Reply:

    Можно шаблон не менять. Есть адаптивные css фреймворки для этого

    [Ответить]

    Алекс Fomik Reply:

    Ты устанавливал их на свой блог?

    [Ответить]

    Denis Reply:

    Да прикручивал, тестил на локалке все работает как надо. Но чтоб такое проделать надо знать верстку и стили.

    [Ответить]

    Алекс Fomik Reply:

    Ясненько))) Ну да ладно, не все хотят изучать верстку и стили, правда?)

    [Ответить]

    Sergey Ivanov Reply:

    Одна вода! А я вот натолкнулся на реальный курс как сделать мобильную версию сайта http:// infosklad.org/threads/udemy-sozdanie-sajta-dlja-mobilnyx-ustrojstv-v-adobe-muse.8120/ мне очень понравился, рекомендую!

    [Ответить]

    Алекс Fomik Reply:

    Спасибо за полезную инфу Сергей…

    [Ответить]

  2. Ирина Широкова:

    Алексей,здравствуйте. Я установила себе плагин WPtouch Mobile Plugin. Все сделала так, как у Вас показано. Но захожу со своего смартфона, все тоже самое. Сайт в общем виде и никакой настройки не произошло(. В чем может быть проблема?

    [Ответить]

    Алекс Fomik Reply:

    Здравствуйте Ирина!
    Вы знаете, когда я захожу со своего смартфона через его родной браузер, то тоже вижу не мобильный вариант своего блога, но бывает, что на 2-3 странице, при просмотре — все таки загружается мобильная версия. И в футере кстати, что на компьютерной, что на мобильной версии постоянно виден переключатель — посмотрите…

    [Ответить]

  3. Владимир:

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

    [Ответить]

    Алекс Fomik Reply:

    Вы с какого браузера на телефоне заходите Владимир? У меня плагин включен, сделаны все настройки, которые я описал в статье, но даже и у меня не всегда выходит мобильный вид сайта, когда захожу со смартфона, поэтому даже и не знаю, что вам на это ответить. Статья про мобильную версию сайта написана — вы в ней и оставили коммент. А инфы по этому поводу в инете — пруд-пруди. На каждом сеошноб блоге есть подобные статьи… А что за юзер-агенты, вы про что?

    [Ответить]

  4. Denis:

    юзер-агенты — набор различных идентификаторов, по которым и происходит определение — какой браузер, какая операционная система, какой версии, и какое специфичное ПО стоит у пользователя. Как правило применяется в разных метриках статистики.
    А вот я переключателя на компьютерной версии увы не вижу.
    он виден только в мобильной версии к сожелению. Смысл прикручивать его к нормальному шаблону?

    [Ответить]

    Владимир Reply:

    Так как все отморозились и сказали, что всего пруд-пруди, а по факту никто не может прикрутить переключатель- Я написал статью по этому поводу и таки ПРИКРУТИЛ переключатель для ВЕБ версии на двух своих сайтах. ВОТ: http://kudrim.ru/pereklyuchatel-versii-wptouch-mobile-plugin-swicher/

    [Ответить]

    Алекс Fomik Reply:

    Спасибо Владимир за коммент и за твою статью — почитал, откомментил…

    [Ответить]

    Алекс Fomik Reply:

    Денис, я уже догадался. Тебе проще было бы написать — список мобильных устройств (платформ)…

    [Ответить]

  5. Ренат:

    Подскажите где заказать мобильную версию?

    [Ответить]

Оставить свой комментарий