Slides from my recent talk at WebVisions Portland.

1. Responsive
Toolbox
Jacob Surber
Sr. Product Manager HTML Design
@jacobsurber

3. Ethan
Marcotte
#chuckapproved
+ =

4. new
#itsOK
different
needed a name
Responsive
Design

5. Content
focused
Clean
design
Mobile
first
Hierarchical
information ?

6. It’s really just
Web Design
#srsly

7. Jacob Surber @jacobsurber
Sr. Product Manager HTML Design
#getitright
Web Design
Toolbox

8. We find ourselves
on the edge

10. Team dynamic
&
individual responsibilities

11. What’s the workflow been?

12. Designers
Writers
Developers
#waterfail

14. #wrongexpectations
Designers Developers
designacuity

16. #harmony

17. First tool

18. Responsive Inspector

19. PIOTR WALCZYSZYN
http://outof.me/
@outof_me

20. #letsbehonest

21. 10questions
#thecakeisreal
http://goo.gl/RTXyv

22. 1.Do you consider yourself a web designer?

23. What is a “web designer”?

24. 2.What are your existing tools?

25. two design camps

26. Ona notepad
Ina text editor

27. Ina text editor

28. On a notepad

31. Layout
is Design

32. 3.Do you know HTML & CSS? Do you want to?

33. Do you know what
float:rightmeans?

34. Do you care about the
box model?

35. 4.How do you communicate your design intent?

36. #he’ssmart
“Content
Choreography”
@trentwalton

37. 5.Do you believe in design/prototype code?

38. #theWYSIWYGisDEAD
WYSIWYG

39. 6.Are you willing to work in the browser?

40. 7.Can you design using “web native graphics”

41. 8.Do technical limitations effect your design vision?

43. #betruetoyourdev
Honesty in design

44. 9.What is your deliverable and to who?

45. IA / UX Design
Information hierarchy Visual designs
site maps Style guides

46. 10.What do you look for in a next-gen tool?

47. What’s out there?

48. Let’s talk about

49. Designers
designacuity
Developers

50. #changeiscoming
Designers Developers

51. #anewdirection
Design &
Typography
HTML design
surface
Flexible grid
system
Intelligent web
layout

52. Mobile or Desktop?
#whichway??

53. screen grab

55. What is not?

57. Where are we going?

59. Style Management
Multiple pages
HTML Elements
States
Creative Cloud
Integration

60. http://goo.gl/RTXyv

61. Thanks!
html.adobe.com/edge/reflow
@Reflow
Jacob Surber
Sr. Product Manager HTML Design
@jacobsurber