Проверка на адаптивность - 5 сервисов

Почему так важно проверять сайты на адаптивность? По данным Яндекс.Метрики, количество людей, пользующихся мобильными устройствами в России, приближается к 50% и постоянно растёт.

мобильная аудитория

В связи с этим поисковые системы стремятся сделать мобильную выдачу удобнее для пользователей. В феврале 2015 г. Google заявляет, что наличие адаптивной или мобильной версии положительно сказывается на ранжировании. Ровно через год, в феврале 2016-го, Яндекс объявляет то же самое.

Какими качествами должен обладать адаптивный сайт
Отсутствие горизонтальной прокрутки.
Быстрая загрузка, отсутствие тяжелых картинок.
Корректно прописан метатег viewport.
Интерактивные элементы (ссылки, кнопки, формы и т.д.) не находятся слишком близко друг к другу.
Отсутствие Flash -элементов, Silverlight- плагинов.
Удобная навигация по разделам.
Контент (текст и картинки) адаптирован под размер экрана и читаются без увеличения.
Сервисы для онлайн-проверки адаптивности сайта
Google Mobile Friendly - https://search.google.com/test/mobile-friendly
Отображает, как выглядит первый экран сайта на смартфоне, даёт общую оценку качества оптимизации.

mobile-friendly

Преимущества

Официальный сервис Google.
Указывает на конкретные ошибки.
Умеет сам определять наличие мобильной версии.
Недостатки

Нельзя посмотреть, как выглядит сайт при разных размерах экрана.
Показывает только первый экран, нельзя взаимодействовать с сайтом.

Яндекс.Вебмастер Mobile Friendly - https://webmaster.yandex.ru/site/tools/mobile-friendly/
В отличие от инструмента от Google проверить можно только свои ресурсы, на которые вы подтвердили права в Яндекс.Вебмастере. Показывает общую оценку и показывает, как сайт выглядит на смартфоне.

Яндекс мобайл френдли

Преимущества

Официальный сервис Яндекса.
Указывает на конкретные проблемы в оптимизации.
Понимает, есть ли у сайта мобильная версия.
Проверить можно только свои сайты.
Нет возможности посмотреть, как выглядит сайт на разных экранах
Недостатки

Проверить можно только свои сайты.
Нет возможности посмотреть, как выглядит сайт на разных экранах
Quirktools - http://quirktools.com/screenfly/
Удобный и функциональный сервис, есть возможность посмотреть, как будет выглядеть сайт на различных устройствах от смартфонов до телевизоров.

адаптивность с quirktools

Преимущества

Можно выбрать из готового списка устройств или задать собственное разрешение
Можно взаимодействовать с сайтом
Недостатки

Не умеет определять наличие мобильной версии
Нет списка ошибок
Iloveadaptive - http://iloveadaptive.com/
Сервис, с помощью которого можно проверить адаптивность под популярные мобильные устройства и операционные системы.

адаптация сайта iloveadaptive

Преимущества

Есть возможность посмотреть, как выглядит сайт на разных операционных системах (IOS и Android)
Сам понимает, есть ли мобильная версия
Расширение для Google Chrome
Недостатки

Нельзя самому указать размер экрана, только выбрать из готового списка
Нет списка ошибок
Всегда автоматически загружает мобильную версию, без возможности посмотреть, как выглядит десктопная версия при разных разрешениях
Adaptivator - http://adaptivator.ru/
adaptivator

Преимущества

Подводит общую оценку качеству оптимизации, дает советы по исправлению ошибок.
«Не видит» мобильную версию.
Нет возможности указать свой размер экрана.
Недостатки

«Не видит» мобильную версию.
Нет возможности указать свой размер экрана.
Вывод
При наличии доступа к сервисам веб-мастеров (Яндекс.Вебмастер или Google Search Console) проводить тест на адаптивность лучше всего с их помощью. Они отражают наиболее актуальные требования поисковых систем к вашему сайту.

Если же такой возможности нет, то можно воспользоваться http://iloveadaptive.com/ в связке с http://adaptivator.ru/, так как они дополняют друг друга по функционалу.

тест ссылка