responsive design for non-techies

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

Upload: malcolm-jones

Post on 02-Jul-2015

2.475 views

Category:

Documents


3 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Responsive Design for Non-Techies

Me Non Techy. Ouch. It hurts.

RESPONSIVE! DESIGN? UXCampDC, Jan 5 2013

Page 2: Responsive Design for Non-Techies

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

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

Page 3: Responsive Design for Non-Techies

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

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

Page 4: Responsive Design for Non-Techies

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

Page 5: Responsive Design for Non-Techies

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

Page 6: Responsive Design for Non-Techies

We were solving the wrong problem for

our UX team.

Page 7: Responsive Design for Non-Techies

Designers, Architects, Developers...

Page 8: Responsive Design for Non-Techies

Media queries!

Page 9: Responsive Design for Non-Techies

Media queries?

Page 10: Responsive Design for Non-Techies

We needed a new tool!

Page 11: Responsive Design for Non-Techies

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

Page 12: Responsive Design for Non-Techies
Page 13: Responsive Design for Non-Techies

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

Page 14: Responsive Design for Non-Techies

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

Page 15: Responsive Design for Non-Techies
Page 16: Responsive Design for Non-Techies

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

Page 17: Responsive Design for Non-Techies
Page 18: Responsive Design for Non-Techies

Gorongosa - Large

Page 19: Responsive Design for Non-Techies

Gorongosa - Medium

Page 20: Responsive Design for Non-Techies

Gorongosa - Small

Page 21: Responsive Design for Non-Techies

Time for a demo!

Page 22: Responsive Design for Non-Techies

forumone.com/careers@forumone #uxdc@protytype

WE'RE HIRING!Download: protytype.com