Your SlideShare is downloading. ×
0
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Responsive Design for Non-Techies
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Design for Non-Techies

2,460

Published on

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 …

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,460
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 thewrong 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. Gorongosa - Large
  • 16. Gorongosa - Medium
  • 17. Gorongosa - Small
  • 18. Time for a demo!
  • 19. Download: protytype.comWERE HIRING!forumone.com/careers@forumone #uxdc@protytype

×