Сегодня мы рассмотрим лучшие онлайн-сервисы для проверки адаптивности веб-сайта. Если сайт будет выглядеть криво на разных мониторах или мобильных устройствах – это сильно повлияет на поведенческие факторы и позиции сайта в выдаче поисковых систем. Наша задача посмотреть, как сайт отображается на экранах с разным разрешением. Я заготовил список лучших сервисов для этих задач.
Отчет “Разрешение экрана” в Google Analytics
Первым делом нам нужно понять с каких устройств нам больше всего заходят на сайт. Для этого переходим, к примеру, в Google Analytics и смотрим отчет “Аудитория” -> Обзор -> Операционная система:
Выбираем нужную нам ОС (напр., Windows или Android) и добавляем Дополнительный параметр – “Разрешение экрана”:
Из отчета мы четко понимаем, на каких мониторах пользователи чаще всего смотрят наш сайт:
Эти разрешения экрана как раз и нужно будет проверить.
P.S. Чтобы просмотреть разрешения экрана без привязки к Операционной системе, перейдите в отчет: Аудитория -> Технологии -> Браузер и ОС и там добавьте параметр “Разрешение экрана”:
Website Resolution Test
Данный онлайн-инструмент тестирует отображение веб-сайта практически на всех разрешениях экрана – десктопе и мобильных устройствах:
В качестве платформы используется Mozilla Fifefox браузер. Сервис позволяет не просто увидеть картинку, но еще и посмотреть в действии с того или иного разрешения, пооткрывать страницы, покликать кнопки и т.д. – такой себе эмулятор. Мне лично этот инструмент очень понравился и помог найти баги в верстке для нескольких сайтов. Радует, что можно бесплатно посмотреть как реально выглядит сайт на разных экранах. Однозначно, один из лучших бесплатных инструментов для веб-верстальщика. Находил похожие сервисы, но все они платные. Так что Website Resolution Test – №1 для меня.
Ссылка: http://www.infobyip.com/testwebsiteresolution.php
Responsive Design Testing across Devices
Еще один сервис для тестирования адаптивной верстки на сайте. Нацелен больше на тестирование на различных смартфонах – поддерживается более 10-ти моделей:
Инструмент позволяет до мелочей протестировать отображение сайта на смартфонах – можно использовать разные значения параметров “Viewport”, “Screen size”, “Monitor size”, а также в разных положениях – портретном, горизонтальном:
После регистрации появляется более детальный и глубокий режим тестирования:
В реальном времени вы можете набрать в эмуляторе смартфона, модель которого выбрали на начальном этапе, любой URL-адрес и просмотреть как он на самом деле отобразится на дисплее:
Responsive Design Testing across Devices реально эмулирует мобильное устройство Samsung Galaxy S7!
Нажав в Панели инструментов на “Switch Browser” можно быстро поменять настройки и выбрать любой другой смартфон, операционную систему и браузер:
Единственный минус: все они доступны на платном тарифе 
Однозначно, лучший профессиональный сервис для тестирования кроссплатформенности веб-сайтов.
Ссылка: https://www.browserstack.com/responsive
Iloveadaptive.com
Еще один хороший сервис для онлайн-проверки и тестирования адаптивности сайта:
Cсылка: http://iloveadaptive.com/
Check Broser Compatibility
И в завершение, еще один сервис. Его задача – проверить отображение сайта на разных версиях браузеров:
Указываете URL сайта и запускаете. На выходе получаете пачку скриншотов, которые можно скачать. Может пригодиться для определенных задач, например – тест на кроссбраузерность.
На этом все, подписываемся, ставим лайки! Буду рад любым комментариям и вашим замечаниям!
Ссылка: http://browsershots.org
