Forum One Responsive Design UXCampDC 2013

8,174 views

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 to help sketch solutions more easily and quickly.

1 Comment
2 Likes
Statistics
Notes
  • we tried to make a website responsive like www.smallmarketingcompany.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,174
On SlideShare
0
From Embeds
0
Number of Embeds
942
Actions
Shares
0
Downloads
33
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Forum One Responsive Design UXCampDC 2013

  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

×