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

Мобильная версия сайтаПо данным статистики от 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, которые вы нашли полезными, пожалуйста, расскажите о них в своих комментариях.

Комментарии 6 комментариев

  • У меня свой кулинарный блог, который я веду с 2014 года. Сделать его мне помог сделать мой знакомый, он мне все настроил, мне оставалось только загружать на блог новые рецепты. Блог сделан на Вордпресс. Сначала я вела его для души, радовалась посещаемости в 300 человек, но эта цифра за последний год так и не изменилась. Я стала читать советы по раскрутке блога и повышению посещаемости, и одним из советов было сделать сайт адаптивным под мобильные устройства. Но так как шаблон был старенький и не с официального сайта Вордпресс, то он не поддерживал мобильную версию. Сервис Гугла очень на меня ругался)) Менять шаблон я очень не хотела, а знакомый, который помогал мне с сайтом, давно переехал в другой город и связь с ним потерялась. Я пробовала установить плагин, который вы рекомендуете — WP Mobile Detector Mobile Plugin, но из-за него у меня перестал работать плагин похожих записей Contextual Related Posts. Отключаю плагин мобильной версии — плагин похожих записей опять работает! Никто в интернете мне так и не подсказал что делать, все пишут что у них все хорошо… Пришлось обращаться за платной помощью, там мне все сделали за 2 дня. Теперь у меня не только сайт красиво выглядит если зайти с мобильного, но и начала повышаться посещаемость! За месяц она стала 400 человек, из них новые посетители были именно со смартфонов и планшетов! И сервисы Яндекса и Гугла больше не ругаются что сайт не оптимизован под адаптивные устройства! Поэтому если у вас такая же, как у меня проблема, то лучше обратитесь к профессионалам. Нашла сайт, где мне помогли, вот ссылка — вдруг кому пригодится:

  • У меня свой кулинарный блог, который я веду с 2014 года. Сделать его мне помог мой знакомый, он мне все настроил, мне оставалось только загружать на блог новые рецепты. Блог сделан на Вордпресс. Сначала я вела его для души, радовалась посещаемости в 300 человек, но эта цифра за последний год так и не изменилась. Я стала читать советы по раскрутке блога и повышению посещаемости, и одним из советов было сделать сайт адаптивным под мобильные устройства. Но так как шаблон был старенький и не с официального сайта Вордпресс, то он не поддерживал мобильную версию. Сервис Гугла очень на меня ругался)) Менять шаблон я очень не хотела, а знакомый, который помогал мне с сайтом, давно переехал в другой город и связь с ним потерялась. Я пробовала установить плагин, который вы рекомендуете — WP Mobile Detector Mobile Plugin, но из-за него у меня перестал работать плагин похожих записей Contextual Related Posts. Отключаю плагин мобильной версии — плагин похожих записей опять работает! Никто в интернете мне так и не подсказал что делать, все пишут что у них все хорошо… Пришлось обращаться за платной помощью, там мне все сделали за 2 дня. Теперь у меня не только сайт красиво выглядит если зайти с мобильного, но и начала повышаться посещаемость! За месяц она стала 400 человек, из них новые посетители были именно со смартфонов и планшетов! И сервисы Яндекса и Гугла больше не ругаются что сайт не оптимизован под мобильные устройства! Поэтому если у вас такая же, как у меня проблема, то лучше обратитесь к профессионалам. Нашла сайт, где мне помогли, вот ссылка — вдруг кому пригодится:

  • Ой, извините! Мой комментарий не появился, я его опять отправила вам и появилось оба. просто хотела помочь с проблемой и поделиться опытом…

  • Я тоже пыталась адаптировать сайт под мобильное устройство. Предыстория такова, что открыли с мужем интернет-магазин кондиционеров. Но с телефона конечно не удобно смотреть его. Поэтому попробовали сами адаптацию сайта под мобильные устройства. Прочитали много статей, в том числе и эту тоже. Честно- пол ночи сидели..До конца так и не разобрались. Проверяли адаптацию сайта, мучались, не выспались( Конечно расстроились, потому что время было зря потрачено и силы. У нас реклама от гугла. Из-за кривой верстки сайта на компе она помещалась, а вот при просмотре с мобильного не хочет адаптироваться и выходит за левую сторону экрана. Не адаптировались не только картинки, но и видео.((В итоге в интернете нашли вот какую страничку -version.ru/ Цена приемлемая, срок исполнения вышел всего 2 дня! Сайт после адаптации проходит тесты на мобильность гугла и яндекса. Кстати на самом сайте этой компании очень интересные статьи. Все написано понятно, поэтому мы и заинтересовались. По телефону нам так же отвечали на все вопросы. Весь сайт был сделан не в горизонтальную, а в вертикальную прокрутку. Смотрится теперь сайт на телефоне очень классно! И голову ломать не пришлось и сайт теперь адаптирован и под планшеты и под мобильники)Спасибо!

  • Я тоже делал адаптацию своего блога под мобильные устройства через этот плагин.

  • Зачем нужна адаптация сайта или по другому — мобильная версия сайта? Думаю все предприниматели и держатели интернет-магазинов сталкивались с таким вопросом. Вот и мне удалось столкнуться. Сначала, как только интернет-магазин открылся и я дала хорошую рекламу все было хорошо и покупатели конечно были. Но узнала, что их может быть больше если будет у моего сайта мобильная верстка. И это логично, ведь многие операции мы совершаем не открывая компьютер, удобнее это сделать со своего смартфона, который у каждого всегда под рукой. «Решено — буду адаптировать сайт под мобильное устройство» — подумала я.
    Стала искать компании, которые этим занимаются. Но цены огого, а гарантий никаких и отзывы не лестные. Нашла сайт <a href=«http://www.mobile-version.ru/ . Почитала о них, изучила информацию. Заинтересовала эта компания потому что не нашла о ней ничего плохого, а цены и описание работ, которые они делают вполне меня устроили.
    Обратилась сюда.
    О стоимости я уже говорила, она не высокая. Но порадовало еще и то, что ребята сделали работу в кратчайший срок, за два дня у меня уже была готова мобильная версия моего сайта. Клиентов стало больше в разы, поэтому я, естественно, не пожалела

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

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