Сегодня мы рассмотрим лучшие онлайн-сервисы для проверки адаптивности веб-сайта. Если сайт будет выглядеть криво на мобильных устройствах — это сильно повлияет на поведенческие факторы и позиции сайта в результатах поисковых систем. Наша задача посмотреть, как сайт отображается на экранах с разным разрешением. Я заготовил список лучших сервисов для этих задач.
Отчет «Разрешение экрана» в 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
Check Broser Compatibility
И в завершение, еще один сервис. Его задача — проверить отображение сайта на разных версиях браузеров:
Указываете URL сайта и запускаете. На выходе получаете пачку скриншотов, которые можно скачать. Может пригодиться для определенных задач, например — тест на кроссбраузерность.
На этом все, подписываемся, ставим лайки! Буду рад любым комментариям и вашим замечаниям!
Ссылка: http://browsershots.org
