Responsive toolbox

1,013 views
963 views

Published on

Slides from my recent talk at WebVisions Portland.

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,013
On SlideShare
0
From Embeds
0
Number of Embeds
231
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive toolbox

  1. 1. ResponsiveToolboxJacob SurberSr. Product Manager HTML Design@jacobsurber
  2. 2. EthanMarcotte#chuckapproved+ =
  3. 3. new#itsOKdifferentneeded a nameResponsiveDesign
  4. 4. ContentfocusedCleandesignMobilefirstHierarchicalinformation ?
  5. 5. It’s really justWeb Design#srsly
  6. 6. Jacob Surber @jacobsurberSr. Product Manager HTML Design#getitrightWeb DesignToolbox
  7. 7. We find ourselveson the edge
  8. 8. Team dynamic&individual responsibilities
  9. 9. What’s the workflow been?
  10. 10. DesignersWritersDevelopers#waterfail
  11. 11. #wrongexpectationsDesigners Developersdesignacuity
  12. 12. #harmony
  13. 13. First tool
  14. 14. Responsive Inspector
  15. 15. PIOTR WALCZYSZYNhttp://outof.me/@outof_me
  16. 16. #letsbehonest
  17. 17. 10questions#thecakeisrealhttp://goo.gl/RTXyv
  18. 18. 1.Do you consider yourself a web designer?
  19. 19. What is a “web designer”?
  20. 20. 2.What are your existing tools?
  21. 21. two design camps
  22. 22. Ona notepadIna text editor
  23. 23. Ina text editor
  24. 24. On a notepad
  25. 25. Layoutis Design
  26. 26. 3.Do you know HTML & CSS? Do you want to?
  27. 27. Do you know whatfloat:rightmeans?
  28. 28. Do you care about thebox model?
  29. 29. 4.How do you communicate your design intent?
  30. 30. #he’ssmart“ContentChoreography”@trentwalton
  31. 31. 5.Do you believe in design/prototype code?
  32. 32. #theWYSIWYGisDEADWYSIWYG
  33. 33. 6.Are you willing to work in the browser?
  34. 34. 7.Can you design using “web native graphics”
  35. 35. 8.Do technical limitations effect your design vision?
  36. 36. #betruetoyourdevHonesty in design
  37. 37. 9.What is your deliverable and to who?
  38. 38. IA / UX DesignInformation hierarchy Visual designssite maps Style guides
  39. 39. 10.What do you look for in a next-gen tool?
  40. 40. What’s out there?
  41. 41. Let’s talk about
  42. 42. DesignersdesignacuityDevelopers
  43. 43. #changeiscomingDesigners Developers
  44. 44. #anewdirectionDesign &TypographyHTML designsurfaceFlexible gridsystemIntelligent weblayout
  45. 45. Mobile or Desktop?#whichway??
  46. 46. screen grab
  47. 47. What is not?
  48. 48. Where are we going?
  49. 49. Style ManagementMultiple pagesHTML ElementsStatesCreative CloudIntegration
  50. 50. http://goo.gl/RTXyv
  51. 51. Thanks!html.adobe.com/edge/reflow@ReflowJacob SurberSr. Product Manager HTML Design@jacobsurber

×