Лучшие веб-сервисы для проверки адаптивной верстки и кроссплатформенности веб-сайта

Сегодня мы рассмотрим лучшие онлайн-сервисы для проверки адаптивности веб-сайта. Если сайт будет выглядеть криво на мобильных устройствах — это сильно повлияет на поведенческие факторы и позиции сайта в результатах поисковых систем. Наша задача посмотреть, как сайт отображается на экранах с разным разрешением. Я заготовил список лучших сервисов для этих задач.

Отчет «Разрешение экрана» в Google Analytics

Первым делом нам нужно понять с каких устройств нам больше всего заходят на сайт. Для этого переходим, к примеру, в Google Analytics и смотрим отчет «Аудитория» -> Обзор -> Операционная система:

Выбираем нужную нам ОС (напр., Windows или Android) и добавляем Дополнительный параметр — «Разрешение экрана»:

Из отчета мы четко понимаем, на каких мониторах пользователи чаще всего смотрят наш сайт:

Эти разрешения экрана как раз и нужно будет проверить.

P.S. Чтобы просмотреть разрешения экрана без привязки к Операционной системе, перейдите в отчет: Аудитория -> Технологии -> Браузер и ОС и там добавьте параметр «Разрешение экрана»:

Website Resolution Test

Данный онлайн-инструмент тестирует отображение веб-сайта практически на всех разрешениях экрана — десктопе и мобильных устройствах:

В качестве платформы используется Mozilla Fifefox браузер. Сервис позволяет не просто увидеть картинку, но еще и посмотреть в действии с того или иного разешения, пооткрывать страницы, покликать кнопки и т.д. — такой себе эмулятор. Мне лично этот инструмент очень понравился и помог найти баги в верстке для нескольких сайтов. Радует, что можно бесплатно посмотреть как реально выглядит сайт на разных экранах. Однозначно, один из лучших бесплатных инструментов для веб-верстальщика. Находил похожие сервисы, но все они платные. Так, что Website Resolution Test — №1 для меня.

Читайте также:  Как с помощью Screaming Frog спарсить раздел или категорию сайта

Ссылка: 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

Оценка:
( 1 оценка, среднее 5 из 5 )
Виталий Крашенинин / автор статьи
Основатель блога, публицист, IT-специалист
Понравилась статья? Поделиться с друзьями:
Opt In Image
Хочешь первым получать свежую информацию от меня?
Тогда подписывайся ↓
Krasheninin IT Блог - все о веб-технологиях, и не только
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

5 + 10 =

>