Logo

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

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

Например, поисковик Гугл просто и ясно говорит, что теперь в результатах поисковой выдачи он будет учитывать, насколько хорошо сайт будет виден на мобильных устройствах. Т.е. в связи стем, что всё больше пользователей работает в интернете теперь не со стационарных компьютеров, а с мобильных устройств (планшетов, мобильных телефонов) деваться не куда — нужно сделать свой сайт (блог) хорошо видимым на мобильных устройствах.

Адаптация сайта под мобильные устройства

И тут есть два варианта:
Создайте свой блог с нуля, чтобы он был доступным для мобильных устройств.
Если вы хорошо разбираетесь в создании веб-сайтов, при создании блога, примите во внимание следующее:
1. Размер экрана
Понятно, что размер экрана мобильного телефона намного меньше, чем в ноутбуке, и многие WAP браузеры просто демонтируют каскадную таблицу стилей (CSS), из-за чего страница отображается в виде текста. Это не совсем эстетично. Что вам нужно сделать, так это убедиться в том, что у вас есть мобильная версия вашего сайта, которая не содержит изображений и максимизирует функциональность вашего сайта.
2. Действующий код
Убедитесь в отлаженности кода вашего веб-сайта, так как мобильные поисковые машины не в состоянии переварить неправильный код.
3.  Следуйте традиционным и лучшим SEO практикам
Пишите краткие, сжатые заголовки постов на блоге, так как именно они будут тем, что мобильный пользователь сначала видит и что заставит его щелкнуть по названию статьи.
Убедитесь в том, чтобы URL структура была как можно более простой. Это означает, что вашим посетителям будет легче ввести адрес вашего сайта или блога.
Используйте лучшую платформу для вашего блога –WordPress

Адаптируем с помощью плагина

Имеется отличный сервис от Google -PageSpeed Insights, который позволяет посмотреть, как виден сайт на мобильниках. В соответствующую строку вводим название сайта и видим результат. Вот, как выглядит сайт на котором вы находитесь, без мобильного варианта, т.е. ничего не менялось.

Сайт не адаптирован

И как тут работать? Мелкий шрифт, плохо видно… А как пальцем нажимать на сенсорном экране? В общем — всё плохо.

В качестве альтернативного варианта, если вы уже используете WordPress на своем сайте или блоге, вы просто можете установить плагин WP Mobile Detector Mobile Plugin.

В панели управления перейдите в раздел Плагины,затем Добавить новый введите в поиске «WP Mobile Detector Mobile Plugin», как показано ниже, и следуйте инструкциям.

1. Введите плагин, который вы ищите
2. Выберите нужный и нажмите кнопку установки.
3. Ваш плагин должен начать автоматическую установку, которая позволит вам потом его активировать. После активации плагина заходим в Google -PageSpeed Insights и видим уже другую картинку:

Мобильная версия сайта

Вот теперь всё видно и понятно. Кстати, данный плагин может менять темы оформления. Для этого в панели управления в левой колонке найдите WP Mobile Detector  и в контекстном меню выберите Mobile Themes, откроется страница на которой Вы можете сменить мобильную тему.

Кстати сказать, что при проверке в сервисе Google -PageSpeed Insights разных тем, был совершенно разный результат по оптимизации. Т.о. изменяйте темы и смотрите, что говорит этот сервис от Гугл.

Стоит сказать, что данный плагин не единственный, который решает подобные задачи адаптации. Есть например, MobilePress или WordPress Mobile Pack. В общем пробуйте, какой Вам больше понравиться
Так как все больше и больше людей, хотят получить доступ в интернет через свои мобильные устройства, очень важно, чтобы наши блоги были готовы к этому. Если вы уже пользовались другими мобильными плагинами WordPress, которые вы нашли полезными, пожалуйста, расскажите о них в своих комментариях.

Похожие записи

2 комментария

  1. Даня:

    Помню, как лет пять-шесть назад делал мобильную версию своего сайта, еще учась в универе. Тогда я делал яваскриптом, чтобы определялось разрешение с экрана у пользователя и перенаправляло на мобильную версию. Уже сейчас, спустя время, стал делать серьезный сайт для бизнеса и вот тут уже нужно что-то по настоящему серьезное, а не на коленке сделанное. Порылся в интернете и нашел тут по цене более менее адекватное решение: Лучше шагать в ногу со временем и не мудрить. Если интересно, можно почитать более подробно в сети про адаптивную верстку, но я думаю, что лично мне проще заплатить людям чтобы сделали.

    Ответить
  2. Евгений:

    У меня есть сайт с интернет-магазином уже достаточно долгое время, было очень неудобно заходить на него с мобильной версии, также неудобно и моим клиентам. Выручила мобильная версияwww.mobile-version.ru/, с помощью которой мой сайт теперь имеет адаптацию сайта под мобильное устройство. Заметил разницу в продажах, думаю это сильно влияет, так как люди больше времени проводят в телефонах, и удобнее заказывать с мобильных устройств. После заказанной работы здесь, её выполнили уже через 2 дня, что порадовало. Теперь нет никаких лагов, особенно в Яндексе и мой сайт стал более качественным, поэтому я вполне доволен работой.

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован.