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

Признавая эти проблемы, я объясню, как использовать Codeply в качестве инструмента для живого проектирования и тестирования в браузере. Это устранит задержки среды разработки и позволит вам или вашим клиентам сразу увидеть ход вашего адаптивного дизайна. Это очень просто…

1] Запустите Codeply.

Перейдите в браузере по адресу: http://codeply.com/go

2] Выберите адаптивную структуру.

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

В настоящее время Codeply интегрирован с Bootstrap, Zurb Foundation, PureCSS Yahoo, Skeleton, Materialise CSS, Semantic UI и Unsemantic.

3] Используете ли вы другие библиотеки?

Если вы похожи на меня, вы также используете одну или несколько микробиблиотек JS и CSS, таких как AngularJS, FontAwesome, BackboneJs и т. д. Codeply позволяет вам выбрать то, на что вы хотите ссылаться, из выпадающего списка.

Вот что сейчас включено в Codeply: AngularJs, Angular Material, AngularUI, Animate CSS, Backbone, Bootstrap Datepicker, Bootstrap Select, DropZone, Ember, FastClick, FontAwesome, Full Calendar, Google Maps API, Hammer.js, Handlebars, Ionic, Isotope. , Jasny, jQueryUI, Knockout, Masonry, Minicolors, PrototypeJs, Raphael, RequireJs и UnderscoreJs.

4] Начни играть!

Уникальной особенностью Codeply является его полная интеграция с классами и компонентами CSS многих адаптивных фреймворков. Есть много веских причин для дизайна в браузере… Вы можете увидеть контент в контексте и решить, подходит ли он для этого. Поскольку мы создаем прототип, клиент может фактически просматривать страницы, взаимодействовать и оставлять отзывы на основе реального пользовательского опыта, а не гипотетического конечного результата. Поскольку вы строите свое приложение на гибкой сетке (и в идеале работаете в первую очередь с мобильных устройств), вы можете мгновенно проверять и разрабатывать дизайн для разных устройств: мобильных и планшетных представлений. С Codeply очень быстро можно исследовать различные варианты цвета, макета и типографики для всего продукта.

При написании HTML и CSS с частыми проверками кода код прототипа может быть запущен непосредственно в производство — никаких дополнительных усилий не требуется! Как разработчик, я часто переключаюсь между разметкой вручную и обращением к документации фреймворка, чтобы найти подходящие классы или примеры кода. Это хлопотно. Codeply устраняет это, делая фрагменты примеров фреймворка доступными напрямую из редактора Codeply. В Codeply я выбираю фрагмент из меню, и он добавляется в качестве разметки:

5] Протестируйте и повторите.

Codeply хорошо подходит для исследовательского тестирования и предварительного просмотра вашего адаптивного макета в нескольких окнах просмотра. Я нажимаю «RUN», чтобы отобразить свой HTML/CSS/JS на панели предварительного просмотра. Затем я могу перетащить окно изменения размера, чтобы увидеть, как он будет выглядеть на устройствах разной ширины:

Я продолжаю шаги 4 и 5 итеративно. Сделайте еще немного ручного кодирования и нажмите RUN. Иногда я также разветвляю свой код, чтобы попробовать и протестировать изменения разметки и другие сценарии. Если вы используете Codeply, я бы порекомендовал создать учетную запись пользователя, чтобы вы могли находить и сохранять свои слои на панели инструментов Codeply. Вы также можете найти и разветвить примеры, созданные другими пользователями Codeply. Какие инструменты вы используете, чтобы ускорить создание макетов и тестирование адаптивного дизайна?

http://blog.codeply.com/2015/03/31/responsive-design-testing-in-browser/#sthash.miIQjoHP.dpuf