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

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

Мы расскажем о том, как проверить адаптивность сайта на разных экранах, исправить ошибки и радовать потенциальных клиентов привлекательным и корректно отображающимся инфтерфейсом.

Пройдите по пути Меню — Разработка — Адаптивный дизайн. Или нажмите одновременно кнопки Ctrl + Shift + M. Выпадет окно с настройками разрешения и ориентации экрана и эмулятор страницы вашего сайта на мобильных устройствах.

Чтобы проверить адаптивность сайта онлайн, зайдите в меню и нажмите Дополнительные инструменты — Инструменты разработчика. Также можно воспользоваться сочетанием клавиш Ctrl+Shift+M. Еще один вариант — нажать F12. В центре экрана появится страница сайта, которую можно посмотреть на разных мобильных устройствах.

Testmysite. Этот онлайн-сервис показывает и адаптивность сайта, и скорость его загрузки на популярных мобильных устройствах.

Bing. Сервис эмулирует отображение сайта на смартфонах под iOS, Android и Windows. Автоматически проверяет настройку окна просмотра, соответствие контента ширине экрана, читаемость текста, удобство расположения на экране ссылок и кнопок.

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

Я.Вебмастер - незаменимый сервис при seo-оптимизации любого ресурса. Для просмотра информации о сайте требуется подтверждение прав на него.

Оценка адаптивности сайта В Яндекс Вебмастере осуществляется по шести пунктам: комфорт чтения, плагины silverlight, присутствие тега viewport, наличие горизонтальной прокрутки, работоспособность flash-элементов и java-апплетов. При обнаружении проблемы вы увидете соответствующее сообщение в разделе Вебмастера Диагностика.

Также проверить адаптивность сайта можно через Google.

Если вы интересуетесь тем, как проверить адаптивность сайта на разных экранах, советуем воспользоваться сервисом Google Mobile-friendly. Нужно вставить адрес сайта в строку этого сервиса и нажать «Проверить страницу». Результат покажется в левой части экрана почти мгновенно.

Обратите внимание! По ряду причин поисковая машина Googlebot может считать код страницы только частично. Посмотреть, в чем дело, можно в колонке «Ресурс»: проблема может скрываться в коде самого сайта или спрятаться на стороннем ресурсе. Обычно считыванию мешают кнопки социальных сетей и счетчики метрик. Самостоятельно избавиться от таких ошибок не получится, но стоит попытаться написать администратору сайта и рассказать о проблеме.

Мы расскажем, как разобраться с ошибками со своей стороны.

Рассмотрим эту ситуацию на примере User-agent: *, который точно настроен правильно.

1. Открываем robots.txt в Блокноте.
2. Добавляем в файл юзер-агента для бота Googlebot вот так: User-agent: Googlebot.
3. Копируем директивы Disallow у юзер-агента User-agent: *, копипастим для User-agent: Googlebot.
4. Для бота Googlebot вводим директивы Allow, чтобы он мог попасть на ресурсы с этой ошибкой.

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