Рассчитать стоимость
Оставьте заявку и получите расчет стоимости:
стратегию и смету уже сегодня
Получить подарок
Закажите SEO и получите настройку и 3 месяца ведения контекстной рекламы в ПОДАРОК!
Получить предложение
Оставьте заявку и получите лучшее предложение. Или, как минимум, практические советы, которые помогут решить Вашу задачу
Получить предложение с гарантиями
Оставьте заявку и получите лучшее предложение. Или, как минимум, практические советы, которые помогут решить Вашу задачу
Получить стратегию и смету
Оставьте заявку и получите лучшее предложение. Или, как минимум, практические советы, которые помогут решить Вашу задачу
Получить предложение
Оставьте заявку и получите лучшее предложение. Или, как минимум, практические советы, которые помогут решить Вашу задачу
Получить консультацию эксперта
Оставьте заявку и получите бесплатную консультацию эксперта уже сегодня
Заказать продвижение и получить подарки на 155 500 рублей
Вы получите лучшее предложение. Или, как минимум, практические советы, которые сможете внедрить и увеличить отдачу от сайта

Топ-10 бесплатных сервисов проверки адаптивности сайта

1021
Время на чтение статьи 15 минут

Введение

Адаптивность (адаптивный веб-дизайн) – это корректное отображение сайта на различных устройствах интернет-пользователей.

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

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

Признаки дружелюбного к мобильным устройствам сайта

К ним можно отнести:

  1. Контент читается без увеличения, крупные поля форм и кнопки.

  2. Страницу должно быть удобно скроллить (вертикальная навигация).

  3. Большие поля форм CTA (с минимальным количеством полей заполнения).

  4. Отсутствие «тяжелых» и «больших» картинок.

  5. Отсутствие Flash-элементов и излишней анимации.

  6. Отсутствие горизонтальной полосы прокрутки.

  7. Минимальная скорость загрузки сайта.

  8. Максимально простая навигация. Совместимость с жестами.

  9. Прописан мета-тег viewport.

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

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

Для упрощения данной задачи есть несколько онлайн-инструментов.
С помощью браузера Google Chrome
Нажимаем на кнопку F12 и в появившейся панели кликаем по иконке мобильных устройств:


Шаг 1
Тестируем в режиме переключения устройства. В данном инструменте собраны популярные устройства iPhone, iPad, iPad Mini, Samsung Galaxy.



Шаг 2
Также вы можете сымитировать "переворачивание" экрана.



Шаг 3
При этом в данном режиме с сайтом можно полноценно работать: пролистать страницу, перейти по ссылке, кликнуть по форме обратной связи.

Инструмент бесплатный, достаточно установить на компьютер браузер Google Chrome.
Google Mobile-Friendly Test
Сервис проверки оптимизации для мобильных от Google Search Console. В результатах теста мы видим оптимизирована ли страница для мобильных устройств. Если нет, то сервис указывает на ошибки и проблемы.


Сайт с адаптивным дизайном:
Сайт без адаптивного дизайна:
Инструмент бесплатный, но необходимо быть авторизованным в аккаунте Google.
Яндекс.Вебмастер Mobile Friendly
Проверка возможна только для своих сайтов, на которые подтверждены права. Проверить сторонний ресурс невозможно.

Инструмент укажет на выявленные недостатки адаптивной верстки, если они имеются.


Сайт с адаптивным дизайном:
Сайт с неадаптивным дизайном:
Responsinator
Онлайн-сервис проверяет мобильность сайта с помощью эмуляции отображения на разных устройствах. В отличие от остальных не дает каких-либо оценок, но отображает, как выглядит ваш сайт на 6 различных устройствах в двух ориентациях на iOS и Android.
Adaptivator
Возможности данного сервиса аналогичны Responsinator (устройства iOS и Android в двух ориентациях), но есть еще и оценка результата адаптивности, что ценно. Воспользоваться им можно абсолютно бесплатно.
I love Adaptive
Очень функциональный и удобный онлайн-сервис. Показывает, как отображается сайт на нескольких мобильных устройствах из одной группы (например «смартфоны»). Сервис позволяет проверять мобильность сайта сразу на 8 и более устройствах. Есть сортировка по ОС. Также можно повернуть экраны на 90° и даже настроить свою высоту или ширину. Сервис полностью на русском языке.
Am I Responsive
Чтобы сервис сработал корректно, необходимо вводить адрес страницы с протоколом (http или https). Сервис довольно старый и показывает всего 2 варианта отображения для мобильных устройств (планшет и мобильный телефон) и 2 варианта десктопной версии (персональный компьютер и ноутбук).

Есть возможность одновременного сравнения того, как те или иные элементы сайта работают на мобильных и десктопных устройствах.
Mobile Moxie
Эмулятор для проверки сайта на мобильность. Позволяет сравнить отображение веб-ресурса на двух устройствах одновременно. Есть возможность выбирать конкретные модели смартфонов. Из минусов – сервис на английском языке, бесплатно можно проверить страницы сайта только 3 раза!
Symby
Довольно простой сервис-эмулятор, проверяет мобильность сайта. Но результаты выводятся только для трех устройств и разрешений экранов, что маловато. Зато абсолютно бесплатен!
WEB tools
Данный онлайн-сервис позволяет проверить мобильное отображение сайта на 9 устройствах, отличающихся по размеру и разрешению экрана. На каждом из них можно посмотреть страницу целиком, используя полосу прокрутки. Важно: нужно вводить адрес страницы полностью с протоколом (http или https). Все на русском языке. Работает быстро, что очень удобно.

Технологии Турбо, АМР

AMP и Турбо-страницы – это упрощенная версия страниц сайта, которые находятся на серверах поисковых систем. На вашем сайте не происходят изменения. И для просмотра данных страниц пользователь на попадает на ваш сайт. Доступны для просмотра при переходе на них из поисковых систем.

Если сайт не прошел проверку на мобильность?

Если сервисы, проверяющие мобильность сайта в Яндексе и Гугл, выявили ошибки, их необходимо немедленно устранить, так как они могут негативно влиять на позиции сайта в поиске.