Responsive Design for Non-Techies

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

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 jordoncooper (http://www.flickr. com/photos/jordoncooper/)

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 thewrong 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

Protys 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

Protys 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

Protys 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!

Download: protytype.comWERE HIRING!forumone.com/careers@forumone #uxdc@protytype

http://lanyrd.com	13
http://www.goodmanmfg.com	11
http://soyaranguibel.com	1
http://www.facebook.com	1

Responsive Design for Non-Techies

by Malcolm Jones on Jan 08, 2013

Accessibility

Upload Details

Usage Rights

4 Embeds 26

Statistics

Responsive Design for Non-Techies Presentation Transcript