Главная / Рубрика Мастерская / Пост "Как сделать мобильную версию сайта"

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

Автор: Аванти | 7 Коммент

kak-sdelat-mobilnuyu-versiyu-sajta

Если вы до сих пор еще сомневаетесь в том, адаптировать или нет ваш сайт/блог под мобильные устройства, эта статья поможет решить этот вопрос.

 

Всеобщая мобилизация! Нужен ли адаптивный дизайн для сайта?

 

Недавно Яндекс сообщил, что будет понижать сайты, не адаптированные под мобильные устройства. Как известно, Гугл об этом сообщал еще раньше.

Команда Яндекс сделала заявление о том, что запущен новый алгоритм - Владивосток. Он направлен на оценку “мобильности” страниц. И от этого зависит положение той или иной страницы в мобильном поиске Яндекс. Поэтому у сайта должна быть адаптивная верстка или мобильная версия сайта.

Чтобы алгоритм Яндекса признал страницу удобной для мобильных устройств, должны быть соблюдены ряд правил:

  • отсутствие горизонтальной прокрутки;
  • отсутствие элементов, которые не поддерживают мобильные браузеры, например flash, Java-апплеты и Silverlight-плагины.

Кстати, для оценки сайта на мобильность, предлагается воспользоваться инструментом в новой версии Яндекс.Вебмастер.

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

 

Как сделать проверку удобства просмотра сайта на мобильных устройствах?

 

Прежде чем приступать к модернизации вашего сайта, сделайте проверку адаптивного дизайна с помощью сервиса от Google https://www.google.com/webmasters/tools/mobile-friendly/?hl=ru  :

 

google-developers

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

Мобильность сайта также можно проверить в новом сервисе Яндекс.Вебмастер, но для этого вы должны быть в нем зарегистрированы. Я применяю более простой способ – использую бесплатный сервис responsinator.com – он сразу показывает, как выглядит ваш сайт на различных устройствах: айфоны, планшеты, ПК (см. рисунок ниже). Очень наглядно! Но его лучше использовать уже после модернизации сайта, чтобы проверить работоспособность адаптивного дизайна:

 

responsinator

 

Как сделать адаптивным шаблон WordPress

 

WordPress давно используется в качестве CMS для многих блогов и сайтов. Если ваш блог работает на WP (как и мой), пора заняться его «мобилизацией». Чтобы ваш блог правильно отображался на мобильных устройствах, он должен иметь адаптивную верстку. Достигается это тремя способами:

  1. используется специальный адаптивный шаблон WP;
  2. ставится отдельный плагин.
  3. вносятся изменения в верстку.

 

Теперь разберем эти способы по порядку.

 

1. Адаптивный шаблон для WP

Сейчас в Интернете можно найти множество тем для WordPress с адаптивным дизайном, как платных, так и бесплатных. С помощью поиска тем по тегу responsive layout (адаптивный дизайн) посмотрите какие существуют варианты на сайте WordPress.com. Если не нравятся готовые шаблоны, тогда можете заказать фрилансеру свой индивидуальный дизайн.

Я использую платные темы с адаптивным дизайном для своих блогов. Хорошие и недорогие адаптивные шаблоны можно купить у Goodwina, вот ссылка на его сайт:

 

goodwinpress-themes

 

 

Интересные темы есть у Ксаны, вот  ссылка, правда они будут подороже:

 

wordpress-themes

 

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

Плюсы: ставится как обычный шаблон WP; использует современные технологии; нравится поисковикам.

Минусы: не всегда подойдет для уже существующего сайта; требуется оплата шаблона.

 

2. Плагины для WordPress

wordpress-plugins

 

Если вы не хотите изменять тему на вашем действующем сайте, тогда неплохой альтернативой для готовых адаптивных шаблонов может стать установка специального плагина для WP. Перед модернизацией рекомендую обновить версию Вордпресс (как это сделать, читайте в статье "Как обновить WordPress").

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

Плюсы: просто; быстро; устраивает поисковики.

Минусы: как и любой плагин, могут тормозить работу сайта.

 

3. Внесение изменений в верстку темы WP

В том случае, если не горите желанием изменять тему своего сайта или ставить отдельный плагин, предлагаю третий вариант сделать адаптивным ваш сайт. Можно оставить имеющуюся тему и внести доработку в HTML-код сайта. Это требует определенных познаний. Но я воспользовался этим способом для своего блога, правда делал не сам, а нашел специалиста, который за 500 руб. переделал сайт под мобильные устройства не изменив его внешний вид для простых ПК. А нашел я такого специалиста на новой бирже фриланса Kwork.ru, на которой любые услуги предлагаются по 500 рублей, о ней я рассказывал в отдельной статье.

Плюсы: внешний вид сайта остается прежним; нравится поисковикам.

Минусы: требует финансовых затрат.

 

Мобилизация одностраничников

 

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

  1. внести изменение в верстку страницы;
  2. сделать отдельную мобильную версию.

 

Честно говоря, я не специалист по разработке сайтов (наверное как и вы), поэтому первый способ подходит для тех кто в этом понимает, если нет, тогда обращайтесь к специалистам-фрилансерам, можно всё на той же бирже Kwork.

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

 

mobile

 

С помощью этого скрипта я сделал свои первые мобильные версии для нескольких моих одностраничников, которые получились нисколько не хуже чем у других. К тому же, после такой модернизации основной одностраничник получил ТИЦ10 от Яндекса, думаю мобилизация в какой-то степени повлияла и на это.

 

Выводы

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

 

источник: infomehanik.ru

 banner

 

 

 

Хотите первыми получать новые статьи?

Метки текущей записи:
Комментариев 7 »
  1. Дмитрий пишет...
    28.03.2016 в 01:06

    Для одного сайта пробовал wp-touch. Сначала нормально работал, потом перестал работать на мобилах, зато некоторые страницы на компьютере стали открываться как мобильные. В общем убрал. Для нового сайта заказывал адаптивный шаблон, но пришлось денежку заплатить. А вот насчет кворка вы меня заинтересовали.и не так дорого. Можно попробовать обратиться.

  2. Аванти пишет...
    28.03.2016 в 18:56

    Дмитрий, посмотрите на блог, как он отображается на смартфоне и планшете. Если вас это устроит, смело идите на Kwork!

  3. Ирина пишет...
    18.04.2016 в 15:09

    из-за того же упрощения сайта, мобильная версия грузится быстрее. Это существенно для пользователей, которые все ещё ходят через GPRS или слабый 3G.

  4. Жексан пишет...
    19.07.2016 в 16:04

    спасибо за информацию, Андрей!

  5. Роман пишет...
    28.07.2016 в 16:39

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

  6. Алексей пишет...
    04.09.2016 в 10:23

    Статья очень емкая и информативная, но мне так и не удалось справиться с данной работой. Пришлось обратиться к специалистам своего дела и, признаюсь, я сохранил благодаря этому большую часть нервов. Если являетесь такими же профанами или же просто не хотите возиться с адаптацией своего сайта, то обратитесь к этим ребятам Mobile-Version. Работают быстро, без сучка и задоринки, не кинут - это однозначно. А цена привлекательная, да и окупится очень быстро, так как заметил, что на на мой сайт начали заходить куда чаще, как появилась мобильная версия, ведь люди сейчас чаще пользуются гаджетами вроде мобильных или планшетов.

  7. Максим Сергеевич пишет...
    04.11.2016 в 01:06

    Я считаю, что любой сайт должен иметь мобильную версию. В современном мире каждый имеет смартфон или айфон и пользуется преимущественно им. Любой пользователь скажет, что окно должно адаптироваться под размер экрана. У меня своя фирма по изготовлению и установке окон и есть свой сайт. Когда я решил сделать мобильную версию сайта я заказывал его на сайте mobile-version.ru. Очень порадовала низкая стоимость и качество выполнения работы, были учтены все мои пожелания. Все выполнено было за 2 дня и передано мне. Сайт выглядит отлично, все видно и легко нажимаются любые ссылки, пользователи могут легко передвигаться по сайту.

Оставьте комментарий и получите ссылку на свой сайт!



При перепечатке любых материалов с сайта активная ссылка на InfoMehanik.ru обязательна

Яндекс.Метрика