Как сделать мобильную версию сайта
Здравствуйте уважаемые читатели Seo bloga Fomika. У вас уже есть мобильная версия вашего сайта? Если нет, то сегодняшний пост очень вам пригодиться.
Содержание статьи:
Почему так важно сегодня иметь мобильную версию? Ответ очевиден. Сегодня огромное количество пользователей интернета бороздят его при помощи мобильных девайсов. И если ваш сайт, блог будет медленно загружаться в мобильных устройствах (а так оно и будет – проверено опытным путем), то ждите повышения % отказов. То есть ваш сайт будет закрыт пользователем до того, как полностью загрузиться. Потому что скорость интернета на мобильных устройствах, как правило намного ниже, чем в домашних (стационарных) условиях. Правильно?
В сегодняшней статье я покажу несколько способов того, как легко и просто сделать мобильную версию вашего сайта. Естественно, способы эти будут – бесплатные.
Хочу сразу внести ясность. Несколько способов – это два 🙂
- При помощи плагинов
- При помощи генераторов (сервисы, которые генерируют мобильную версию)
Остальные способы – платные. Это заказ фрилансерам производство вашей моб. версии.
Мне больше понравилось, когда мобильную версию моего сайта генерирует плагин. Почему? Если делать моб. версию через специальные сервисы, они (сервисы) меняют ваши ссылки на свои. То есть перед адресом вашего домена в мобильном браузере будет стоять домен этого сервиса, что мне не очень понравилось.
По поводу скорости загрузки… Я посмотрел, как грузится блог сгенерированный сервисом и мой блог, который выводится плагином. Особой разницы я не увидел, поэтому предпочел плагин.
Мобильная версия сайта при помощи плагинов
Тут естественно все просто. Установили плагин, настроили его и все дела. Лично я использую вот этот плагин, генерирующий мобильную версию моего блога – WPtouch. Сейчас я перечислю несколько плагинов, создающих моб. версии ваших сайтов, а какой выберите вы – решать вам. Как это сделать? Устанавливайте каждый и смотрите результат.
- WordPress Mobile Pack
- WordPress PDA & iPhone
- WPmob Lite
- MobilePress
- WPtap-Themes/Plugin
- WordPress Mobile Edition
- Wapple Architect Mobile Plugin
- WPtouch
Я же подробно опишу настройки плагина WPtouch, которым пользуюсь.
После установки (можно через админку блога) и активации, в консоли админки появится панель инструментов этого плагина.
Базовые настройки плагина
Покажу скринами.
Начальную страницу можете выбрать сами.
Темы и расширения
К сожалению в бесплатной версии плагина можно воспользоваться лишь одной темой – светло зеленой. Если купите PRO-версию, то появиться больше возможности настроить под себя свой мобильный блог. Расширения тоже доступны в PRO-версии.
Параметры темы
Есть возможность выбрать цвета темы, загрузить логотип блога или его какой-то отдельный фирменный элемент. Но, тогда вместо названия блога будет стоять эта картинка.
Также можно выбрать стиль шрифта, решить — нужно ли вашим читателям делиться вашей статьей в соц-сетях, ну и вписать адреса ваших аккаунтов там.
К сожалению показ рекламы в бесплатной версии плагина – невозможен. Доступен только в PRO-версии.
Настройка меню
Тут сначала нужно будет выбрать, что будет выводиться в меню. У меня выбрано – Страницы WordPress.
Затем имеется возможность выбрать имеющиеся иконки к каждой страничке в менюшке. Это делается простым перетаскиванием.
Можно использовать иконки из 12 наборов 12 авторов. По умолчанию стоит набор Elegant, но вы можете спокойно загрузить еще 11 наборов и выбирать оттуда иконки для украшения меню. Также вы можете использовать свои собственные иконки, если таковые у вас имеются.
Вот как выглядит главная страница моего блога в моем смартфоне.
Видите, вместо названия блога – по центру, стоит мой оранжевый человечек с золотым ключиком. Это потому что я загрузил в плагин свою фирменную символику. Если хотите, чтобы стояло просто название – не грузите логотип.
Слева расположен Поиск по сайту, справа – вызов меню.
Внизу есть переключатель с мобильной версии на компьютерную – очень удобно для пользователя.
Мобильная версия сайта при помощи специальных сервисов
Не буду лить много воды, а сразу покажу один из таких сервисов — dudamobile.com
После регистрации на нем вам будет доступна генерация вашего сайта в его мобильную версию. Сайт не русский и выбора русского языка там нет, что не очень удобно, но переводчик от Гугл Хром всегда приходит мне на помощь.
Во всплывшем окне заполните все поля.
После того, как сервис сгенерирует ваш мобильный сайт, займитесь настройкой дизайна, стилей, заголовков и страниц. Сервис очень быстро грузится и все там интуитивно понятно, хоть он и буржуйский – просто воспользуйтесь переводчиком страниц, как делаю всегда я.
Подсказка
Чтобы поменять иконку страницы, нажмите на нее в редакторе сервиса, затем нажмите Edit,
затем снова на иконку
и выбирайте сколько вам душе угодно. Их там 10 страниц…
Не буду дальше выкладывать тут все скрины настроек – итак тяжелая страница получается. Вы сами с легкостью разберетесь с настройкой внешнего вида вашего сайта. Подробнее расскажу только о последнем шаге. В начале поста я сказал, что способов создания моб. версии вашего сайта – два. Это так, но я думал, что они отличаются, и когда генерировал свой блог на этом сервисе, понял, что особого различия нет. Почему?
На другом, подомном моему блоге говорилось, что последний шаг – это вставка сгенерированного скрипта на свой блог, чтобы все заработало. Но, когда я работал на этом сервисе – никакой скрипт там не выходил. Скорее всего на сервисе поменялись правила, а та статья вышла в марте 2013 года – устарела…
Сегодня разработчики сервиса, после того, как вы создадите моб. версию своего сайта, предлагают установить свой плагин. Поэтому, после этого шага
нажимаем Здесь
и вас перекидывает на ваш блог, чтобы вы установили этот плагин. Установите активируйте и настройте его…
Вот как будет выглядеть мой блог после всех вышеупомянутых действий – картинка кликабельна.
Ну вот в принципе все на сегодня. Статья получилась тяжеленькой, но зато все по полочкам разложил 🙂
У кого есть другая полезная инфа про создание мобильной версии своего сайта – прошу поделиться ею в комментариях.
Пока, пока.
Ваш Fomik…
так вроде шаблоны с адаптивным дизайном есть для этого, зачем плагинить то?
[Ответить]
Алекс Fomik Reply:
Июнь 9th, 2014 at 11:55 пп
Так мне не хочется шаблон то менять…
[Ответить]
Denis Reply:
Июнь 11th, 2014 at 2:41 дп
Можно шаблон не менять. Есть адаптивные css фреймворки для этого
[Ответить]
Алекс Fomik Reply:
Июнь 11th, 2014 at 4:34 пп
Ты устанавливал их на свой блог?
[Ответить]
Denis Reply:
Июнь 25th, 2014 at 1:20 пп
Да прикручивал, тестил на локалке все работает как надо. Но чтоб такое проделать надо знать верстку и стили.
[Ответить]
Алекс Fomik Reply:
Июнь 26th, 2014 at 12:59 пп
Ясненько))) Ну да ладно, не все хотят изучать верстку и стили, правда?)
[Ответить]
Sergey Ivanov Reply:
Апрель 1st, 2015 at 7:16 пп
Одна вода! А я вот натолкнулся на реальный курс как сделать мобильную версию сайта http:// infosklad.org/threads/udemy-sozdanie-sajta-dlja-mobilnyx-ustrojstv-v-adobe-muse.8120/ мне очень понравился, рекомендую!
[Ответить]
Алекс Fomik Reply:
Апрель 4th, 2015 at 9:54 дп
Спасибо за полезную инфу Сергей…
[Ответить]
Алексей,здравствуйте. Я установила себе плагин WPtouch Mobile Plugin. Все сделала так, как у Вас показано. Но захожу со своего смартфона, все тоже самое. Сайт в общем виде и никакой настройки не произошло(. В чем может быть проблема?
[Ответить]
Алекс Fomik Reply:
Январь 30th, 2015 at 5:35 дп
Здравствуйте Ирина!
Вы знаете, когда я захожу со своего смартфона через его родной браузер, то тоже вижу не мобильный вариант своего блога, но бывает, что на 2-3 странице, при просмотре — все таки загружается мобильная версия. И в футере кстати, что на компьютерной, что на мобильной версии постоянно виден переключатель — посмотрите…
[Ответить]
А вот я переключателя на компьютерной версии увы не вижу. Его какой-то командой можно прикрутить, но не совсем понятно как. Если вы напишете статью по этому поводу, то получите дополнительный трафик, т.к. информации по этому поводу НЕТ, только на английском.
И да, добавьте больше юзер агентов, будет лучше определять.
[Ответить]
Алекс Fomik Reply:
Май 12th, 2015 at 1:19 пп
Вы с какого браузера на телефоне заходите Владимир? У меня плагин включен, сделаны все настройки, которые я описал в статье, но даже и у меня не всегда выходит мобильный вид сайта, когда захожу со смартфона, поэтому даже и не знаю, что вам на это ответить. Статья про мобильную версию сайта написана — вы в ней и оставили коммент. А инфы по этому поводу в инете — пруд-пруди. На каждом сеошноб блоге есть подобные статьи… А что за юзер-агенты, вы про что?
[Ответить]
юзер-агенты — набор различных идентификаторов, по которым и происходит определение — какой браузер, какая операционная система, какой версии, и какое специфичное ПО стоит у пользователя. Как правило применяется в разных метриках статистики.
А вот я переключателя на компьютерной версии увы не вижу.
он виден только в мобильной версии к сожелению. Смысл прикручивать его к нормальному шаблону?
[Ответить]
Владимир Reply:
Май 13th, 2015 at 4:48 пп
Так как все отморозились и сказали, что всего пруд-пруди, а по факту никто не может прикрутить переключатель- Я написал статью по этому поводу и таки ПРИКРУТИЛ переключатель для ВЕБ версии на двух своих сайтах. ВОТ: http://kudrim.ru/pereklyuchatel-versii-wptouch-mobile-plugin-swicher/
[Ответить]
Алекс Fomik Reply:
Май 13th, 2015 at 10:31 пп
Спасибо Владимир за коммент и за твою статью — почитал, откомментил…
[Ответить]
Алекс Fomik Reply:
Май 13th, 2015 at 10:32 пп
Денис, я уже догадался. Тебе проще было бы написать — список мобильных устройств (платформ)…
[Ответить]
Подскажите где заказать мобильную версию?
[Ответить]