A talk members of the Forum One Communications UX team gave at UXCampDC 2013. The focus was on some pain points we hit while trying to wrap our brains around Responsive Design and the tool we've made to help sketch solutions more easily and quickly.

1. RESPONSIVE! DESIGN?
Me Non Techy. Ouch. It hurts.
UXCampDC, Jan 5 2013

2. Photo by bagera3005 (http://bagera3005.deviantart.com/art/)
Photo by jordoncooper (http://www.flickr.
com/photos/jordoncooper/)

3. Photo by justincooper (http://www.flickr.com/photos/justincooper/)
Photo by jordoncooper (http://www.flickr.
com/photos/jordoncooper/)

4. Photo by juehuayin (http://www.flickr.com/photos/juehuayin/)

5. Photo by juehuayin (http://www.flickr.com/photos/juehuayin/)
Photo from myfoxdc.com

6. We were solving the
wrong problem for
our UX team.

7. Designers, Architects, Developers...

8. Media queries!

9. Media queries?

10. We needed a new tool!

11. Set our Requirements
■ Fast sketching of ideas
■ Show how elements respond in actual
environment (the web)
■ The entire team can use it
■ Projects are customizable
■ Can be iterated upon

13. Proty's Heart
■ Aims to minimize need for unicorns
when planning responsive design
■ Bring up conversations pertaining to
responsive design sooner in the process
■ Loves the web
■ Open Source

14. Proty's Guts
■ Pattern based library of largely self-
contained (HTML/CSS/JS) fully
customizable "primitives"
■ custom.css file for site-wide changes
and style elements page
■ Inspired by Drupal and the responsive
Omega theme

16. Proty's Brains
■ Core Web technologies
(HTML5/CSS3/JS)
■ 20 column grid, three basic responsive
sizes (mobile/tablet/desktop)
■ Firefox extension, project export
creates cross-browser compatible files

18. Gorongosa - Large

19. Gorongosa - Medium

20. Gorongosa - Small

21. Time for a demo!

22. Download: protytype.com
WE'RE HIRING!
forumone.com/careers
@forumone #uxdc
@protytype