responsive design for non-techies

Me Non Techy. Ouch. It hurts.

RESPONSIVE! DESIGN? UXCampDC, Jan 5 2013

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

Photo by bagera3005 (http://bagera3005.deviantart.com/art/)

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

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

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

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

We were solving the wrong problem for

our UX team.

Designers, Architects, Developers...

Media queries!

Media queries?

We needed a new tool!

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

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

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

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

Gorongosa - Large

Gorongosa - Medium

Gorongosa - Small

Time for a demo!

forumone.com/careers@forumone #uxdc@protytype

WE'RE HIRING!Download: protytype.com