АКТУАЛЬНО:

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

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

Отчет “Разрешение экрана” в 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

Оценка:
( 2 оценки, среднее 5 из 5 )
Подписка на KRASHENININ.TECH

Получайте регулярные обновления на почту!


Виталий Крашенинин/ автор статьи
Основатель блога, публицист, IT-специалист. Предоставляю услуги по администрированию, техническому обслуживанию, поисковой оптимизации и продвижению веб-сайтов.
Не забудьте поделиться материалом в соцсетях:
KRASHENININ.TECH - блог о веб-технологиях, и не только
Подписаться
Уведомление о
guest
0 Комментарий
Встроенные отзывы
Просмотреть все комментарии
0
Есть мысли? Прокомментируй!x
()
x