Мобильная версия сайта, адаптивная версия сайта| Сервисы для проверки версии сайта

Человек держит в руках смартфон
Обновлено:

Здравствуйте!

Адаптация сайта под мобильные устройства это не просто дань моде, а необходимость так как просмотры проектов с мобильных устройств возросли до 70%. Поисковые системы Google и  Yandex улучшают поисковую выдачу пользователям мобильных устройств. 

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

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

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

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

  • Отсутствие горизонтальной прокрутки
  • Отсутствие тяжелых картинок
  • Прописан метатег viewport
  • Интерактивные элементы (ссылки, кнопки, и т.д.) не находиться слишком близко друг к другу
  • Удобная навигация по разделам
  • Контент (текст и картинки) адаптирован под размер экрана и читаются без увеличения

Проверяем наличие версии с помощью браузера  Google Chrome, вбиваем в поисковую строку браузера URL сайта и жмем клавишу f12 или Ctrl и f12, если   это система windows. Для системы IOS нажимаем fn и клавишу f12 В результате попадаем в режим разработчика, где открывается окно и  здесь в правом верхнем углу жмем на  иконку с мобильной версией.

иконка с мобильной версией

 И мы увидим как отображается сайт в мобильной версии например на Galaxy S5

Как отображается сайт в мобильной версии.

А если нажмем на треугольник,то можно  будет посмотреть различные устройства, либо можно добавлять эти устройства дополнительно, например от galaxy s5 до iphone 6 7 и так далее. А если мы нажмём  вот сюда на поворот экраны, увидим как будет отображаться  мобильная версия в горизонтальном виде.

 Вид мобильной версии сайта.

Посмотрим еще один достаточно интересный сервис, где можно

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

Проверять сайт    на различных устройствах.

Это онлайн сервис проверки и тестирования сайта на адаптивность Ilove Adaptive, вбиваем в строку поиска Ilove Adaptive , жмем Enter и переходим в сервис Ilove Adaptive. 

 Проверки и тестирования сайта на адаптивность.

Он выглядит таким образом,здесь много различных настроек, можно увидеть как выглядит ваш сайт на разных устройствах.

Вбиваем в строку адрес нашего сайта, нажимаем  Enter и увидим как будет отображаться Samsung Galaxy S7, S8, S8+

Отображаться   iPhone 5, iPhone 6, 7, 8; iPhone 6+.

   А так будут отображаться   iPhone 5, iPhone 6, 7, 8; iPhone 6+, 7+, 8+; iPhone X

Здесь можно выбирать различные операционные системы, можно выбрать  ios или android, а также можно выбрать windows,  есть еще и планшеты.

Здесь  можно посмотреть как будет выглядеть на различных разрешениях, 

к примеру выбрали систему android windows или соответственно apple iphone.

Здесь мы можем выбрать все либо популярные или кликнуть выбрать все

и мы видим как на каком устройстве будет отображаться здесь iphone,здесь samsung, здесь xiaomi sony и так далее. Смотреть какая мобильная версия. 

Проверка адаптивной версии сайта

На сервисе ADAPTIVATOR мы можем проверить адаптивность сайта, вбив в строку его урл. Сервис показывает результат адаптивности сайта и что нужно сделать для улучшения показателей адаптивности сайта. Для введенной веб-страницы сервис выдает замечания и предлагает решения на основе анализа содержимого страницы.

 Результат адаптивности сайта.

А также проверить оптимизацию для мобильных на сервисе Google Search Console и какие 4 правила необходимо выполнить для оптимизации.

4 правила  для оптимизации.

Сервис показывает, что страница “ Перевод текстов без знания языка…” оптимизирована для мобильных устройств.

Страница  оптимизирована для мобильных устройств.

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

Сервисы для проверки адаптивности сайта

Большинство предлагаемых сервисов проверяют не только мобильную версию сайта , но и его адаптивность . То есть выполняется проверка на общую адаптивность сайта для мобильных устройств.

Таблица- преимущества и недостатки сервисов проверки мобильной версии сайта

   Сервис                                 ПреимуществаНедостатки
Google Mobile FriendlyУмеет сам определять наличие мобильной версииНельзя посмотреть, как выглядит сайт при разных размерах экрана
Указывает на конкретные ошибки Показывает только первый экран, нельзя взаимодействовать с сайтом
Яндекс.Вебмастер Mobile FriendlyОфициальный сервис ЯндексаПроверить можно только свои сайты
Указывает на конкретные проблемы в оптимизацииНет возможности посмотреть, как выглядит сайт на разных экранах
Понимает, есть ли у сайта мобильная версия
ResizerПроверяет адаптивность на трёх устройствах: компьютере, планшете, смартфоне.Нет выбора какой-то конкретной модели телефона или планшета
Просмотр — интерактивный, то есть можно взаимодействовать с сайтом: скроллить, кликать, переходить в другие разделы. Произвольные размеры экранов тоже задать нельзя — есть только стандартные.

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

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

А вы проверяете свой сайт на адаптивность и как он выглядит на различных мобильных устройствах? Если будут вопросы или пожелания пишите в комментариях обязательно отвечу.

Нет комментариев

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

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

Сообщение