Инструменты для тестирования верстки и отзывчивого дизайна

Подходы к клиентской части разработки веб-сайтов меняются и усложняются. Сегодня в моде responsive дизайн, то есть дизайн сайтов отзывчивых относительно того или иного устройства. Я не удивлюсь если через несколько лет у меня закажут сайт для тостера или микроволновой печи. Почему нет?

Усложняются подходы, усложняется и возможность тестировать свою работу. В идеальном случае тестировать клиентскую часть, лучше на клиенте. То есть непосредственно на устройстве. Но различных устройств сегодня очень много, и не всегда представляется возможным посмотреть ваш сайт сразу и на iPad под OS X и на стареньком PC под Windows  с IE6. Редко можно встретить одновременно и то и другое в одном месте.

Некоторые устройства уже морально устарели, а некоторые стоят слишком много, для того чтобы покупать одно устройство ради тестирования.

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

Тестирование отзывчивого дизайна. онлайн сервисы

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

Таких сайтов много, наиболее популярный из них mattkersley.com

http://mattkersley.com/responsive/

mattkersley

Сайты обладающие подобным функционалом:

http://responsivepx.com
http://quirktools.com/screenfly/
http://responsive.victorcoulon.fr/
http://quirktools.com/screenfly/
http://deviceponsive.com
http://resizemybrowser.com
http://respondr.webhoard.net
http://designmodo.com/responsive-test/
https://www.responsinator.com/

Более подробное описание по каждому из этих сайтов вы можете прочитать на сайте http://postovoy.net/35.html

Эмуляторы устройств

http://www.mobilexweb.com/emulators - все доступные эмуляторы мобильных устройств. В большей степени эмуляторы требуются разработчикам программ под устройства, чем тем кто тестируют под них верстку. Для тестирования клиентской части чаще можно обойтись средствами браузера, или встроенными плагинами.

mobile-emulators

Тестирование кроссбраузерности

Кроссбраузерность это свойство сайта отображаться и работать во всех популярных браузерах идентично. Обычно речь идет не о функционале, а о клиентской части.

Часто под требованием к верстке быть кроссбраузерной понимают попиксельное соответствие дизайн-макету. К счастью с появлением отзывчивого дизайна про попиксельную кроссбраузерность приходится просто забыть, так как она становится не возможной чисто логически.

Наиболее популярным и старейшим инструментом для тестирования кроссбраузерности является сервис browserhosts который генерирует скриншоты с реальных браузеров, и вы буквально в считаные секунды получаете сотни изображений со всех возможных браузеров. Это удобно.

http://browsershots.org/ - тестирование в 181 браузере на кросс-браузерность при помощи скриншотов

browser-shot

Вторым по популярности на мой взгляд является IE Tester

http://www.my-debugbar.com/wiki/IETester/HomePage - IE Tester. Тестирование во всех версиях IE начиная с версии 5.5

IE-Tester

Прочие инструменты для тестирования кросс-браузерности
https://browserlab.adobe.com/en-us/index.html
http://browsershots.org/
http://www.lunascape.tv/
http://www.ipinfo.info/netrenderer/
http://spoon.net/browsers/
http://saucelabs.com/
http://www.browsera.com/
http://browserling.com/

Подробный обзор: http://www.avalon.ru/OpenLessons/WebDev/Lessons/testing-tools/

Встроенные Инструменты браузеров для тестирования верстки

Firefox

- Web Developer Toolbar. Вкладка Resize пункт меню View Responsive Layouts

https://addons.mozilla.org/ru/firefox/addon/web-developer/

Плагин Web Developer Toolbar предоставляет веб-разработчику множество вариантов для тестирования сайта. Среди них есть отдельная закладка Resize в которой можно через Edit Resize Dimensios добавить расширений для изменения размера окна, или нажав на View Responsive Layouts увидеть как ваш сайт будет отображаться для наиболее популярных расширений.

view-responsive-layouts

Так же в работе я использую Firebag с кнопкой Исследовать элемент
и плагин L-Square browser pixel rulers который вводит в браузер линейку.

Google Chrome

Для этого браузера есть большое количество расширений для тестирования responsive верстки. Пожалуй даже больше чем для браузера Firefox

Основное расширение для Google Chrome это Window Resizer и порядка 12 похожих

windows-resizer

- Resize Window

WindowResizer

- Viewport Resizer

Viewport-Resizer

Расширения как правило работают таким образом что изменяют или размер browser (разрешение) или размер viewport  (внутри окна browser).

Всего в Google Chrome как я уже написал порядка 12 расширений. Рекомендую установить все и протестировать, оставив те, что больше понравятся.

Полезные ссылки

http://postovoy.net/35.html
http://www.avalon.ru/OpenLessons/WebDev/Lessons/testing-tools/
http://www.mobilexweb.com/emulators
http://habrahabr.ru/company/eastbanctech/blog/230291/

http://www.w3.org/TR/css3-grid-layout/
http://www.w3.org/TR/css3-mediaqueries/