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

Полезное в сети
19 октября 2013, 20:19

Адаптивность сайта — это уже стандарт. 90% современных веб-сайтов уже разрабатываются адаптивно. Появилось множество css фреймворков, таких как Twitter Bootstrap или Metro Bootstrap, которые существенно облегчают и ускоряют верстку страниц.
Адаптивная верстка подразумевает под собой отличное отображение веб страницы на всех устройствах и расширениях мониторов. Наверное, не у каждого верстальщика имеется полный набор девайсов со всеми возможными расширениями дисплеев, для тестирования своей верстки. Это и не удивительно, ведь техника нынче не дешевая.
Итак. Покупать горы мобильников и планшетов, не вариант — разоримся. Что же делать? Для этих задач были разработаны сервисы для тестирования адаптивных сайтов. Принцип работы их очень прост. Чаще всего имеется фрейм определенного размера, где открывается страница. Эффект получается примерно такой же, как и при просмотре на мобильном устройстве. Хочу заметить, что сервис не всегда в точности покажет отображение страницы на телефоне или планшете. При верстке следует тестировать с помощью сервисов, но после завершения, по возможности, протестировать на наиболее распространенных устройствах.
Итак. К вашему вниманию лучшие инструменты для тестирования адаптивных сайтов.

mattkersley.com

Это первый сервис, который я открыл для себя. Очень удобно спроектирован. Можно посмотреть все варианты разрешений на одной странице.

Responsive Design Bookmarklet

Интересный сервис для тестирования адаптивной верстки с отличным дизайном, хотя я не сразу интуитивно понял как начать работать с ним. Чтоб протестировать страницу, ее нужно сначала открыть в отдельной вкладке браузера, перейти на страницу сервиса и мышкой перетащить кнопку «RWD Bookmarlket» на вкладку в браузере, в которой открыт ваш сайт. Вверху страницы появится панель с иконками девайсов. При клике на любое устройство, рабочая область будет принимать размеры этого устройства. При переключении устройств следут нажать на кнопку обновления на этой же панели.

quirktools.com

Один из наиболее приятных в использовании сервисов для тестирования адаптивных сайтов. В нем сочетается отличный дизайн, множество возможностей и удобство использования. Инструмент позволяет тестировать страницы на устройствах, разделяемых не только разрешением экрана, но и производителем, моделью девайса и т. д. Плюс ко всему, можно скопировать ссылку и отправить ее заказчику, который заказывал у вас адаптивную верстку.

Deviceponsive

Сервис для тестирования и презентации адаптивной верстки. Позволяет отобразить сайт в разных устройствах. В первую очередь его предназначение не для тестирования, а для презентации работы. Можно настроить цвет фона, загрузить логотип студии и сделать скриншот с помощью любого плагина для браузера, который можт захватить все страницу целиком. Далее можете загрузить скрин в портфолио или отправить заказчику.

resizemybrowser.com

Перейдя на сайт данного сервиса мы увидим кнопки с различными разрешениями. При нажатии откроется новое окно браузера соответствующее размерам указанных на кнопке.

Respondr

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

Responsinator

Инструмент покажет как выглядит адаптивный сайт на множестве устройств. Все это на одной странице.

Screenqueri.es

Инструмент, внешне напоминающий фотошоп, позволяет с помощью линейки управлять размерами окна как по ширине, так и по высоте. Для использования сервиса требуется регистрация.

Designmodo Responsive Test

Сервис очень похож на предыдущий, но не требует обязательной регистрации.

Adobe Edge Inspect

Инструмент для тестирования адаптивных сайтов от компании Adobe. Для его использования требуется установить соответствующее ПО себе на компьютер.
Программа позволяет синхронизировать ваши устройства по WIFI и просматривать сайт так, как он будет отображаться на вашем девайсе. На данный момент поддерживаются устройства с такими ОС: iOS, Android, Kindle Fire.