1. RESPONSIVE DESIGN
WORKFLOW STEPHEN HAY . BDCONF ORLANDO 20120415

2. SOME ASPECTS OF OUR WORK ARE DECIDEDLY
UNSEXY(AND WORKFLOW IS ONE OF THEM)

3. Technology is advancing constantly.
We’re starting to design for multiple platforms.
We’re learning & using new tech all the time.
Web design workflow generally remains unchanged.

4. Technology is advancing constantly.
We’re starting to design for multiple platforms.
We’re learning & using new tech all the time.
Web design workflow generally remains unchanged.
THIS IS *^%$#@! WEIRD.

6. OUR CLIENT WANTS SOME CHANGES MADE.

11. The answer is to design from the bottom up,
which means

12. The answer is to design from the bottom up,
which means
FROM THE CONTENT OUT.

13. Content and form are lovers,
THEIR LOVE-CHILD IS DESIGN

14. MUCH DESIGN DECISIONMAKING IS BASED ON
TECH THIS IS A BAD THING.

15. ANDY CLARKE
ELLIOT JAY STOCKS
PAUL BOAG
RACHEL ANDREW
LEA VEROU
DAVID STOREY
CHRIS HEILMANN
AARRON WALTER
Absolutely ARAL BALKAN
shameless, BEN SCHWARZ
yet tasteful DMITRY FADEYEV
book plug MARC EDWARDS
AND LITTLE OL’ ME

16. “One technique I've used for
years is to 'design in text'… not
necessarily describing
everything in textual form[…]”
— BRYAN RIEGER

17. “(which usually results in docs
sounding oddly creepy, '–it puts
the lotion on it's skin!')[…]”
— BRYAN RIEGER

18. “essentially what is the message
that needs to be communicated
if I was ONLY able to provide
the user with unstyled HTML?”
— BRYAN RIEGER

19. WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:

20. WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
MOBILE

21. WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
MOBILE
WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS

22. WE CURRENTLY HAVE A WORD FOR
EVERYTHING THAT IS NOT DESKTOP:
MOBILE
WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
OR DO WE?

23. SMABLET

24. i SMABLET

25. WORKFLOW
NOW

26. INFORMATION
ARCHITECTURE
flickr.com/photos/cannedtuna/4853380320/

27. INTERACTION
DESIGN
http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png

28. LOOK, MA!
INTERACTION
DESIGN
http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png

29. DESIGN
flickr.com/photos/zieak/2905918515/

30. DESIGN
PHOTOSHOP, RINSE, REPEAT
flickr.com/photos/zieak/2905918515/

31. DESIGN IS NOT
DECORATION
AND DECORATION IS NOT DESIGN

32. RESPONSIVE
WORKFLOW

33. RESPONSIVE
WORKFLOW:
10 STEPS

34. 1. Content inventory
2. Content reference wireframes
3. Design in text (structured content)
4. Linear design
5. Breakpoint graph
6. Design for various breakpoints
7. HTML design prototype
RESPONSIVE 8. Present prototype screenshots
WORKFLOW: 9. Present prototype after revision
10 STEPS 10. Document for production

35. 1. CONTENT INVENTORY

36. 1. CONTENT INVENTORY
1. Site navigation
2. Logo
3. Date & location
4. Social media links
5. Registration status/link
6. Introductory text
7. Speakers (with photo)
8. Countdown
9. Sponsors
10. Secondary navigation

37. CONTENT REFERENCE WIREFRAMES
http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png

38. CONTENT REFERENCE WIREFRAMES

39. CONTENT REFERENCE WIREFRAMES
1
2, 3 4
5
6
7
8
9
10

40. CONTENT REFERENCE WIREFRAMES
1
2, 3 4
1. Site navigation 5
2. Logo 6
3. Date & location
4. Social media links
5. Registration status/link 7
6. Introductory text
7. Speakers (with photo)
8. Countdown 8
9. Sponsors 9
10. Secondary navigation
10

41. 3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT

42. 3. DESIGNING
pandoc content.md -o content.html
IN TEXT
ENVISIONING
STRUCTURED CONTENT
http://johnmacfarlane.net/pandoc/

43. 3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT

44. 3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT

45. THE WORLD’S FIRST WEBSITE IS ALMOST
MOBILE-READY
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
OPERA BROWSER

46. OPERA MOBILE, SAMSUNG GALAXY TAB

47. The device landscape is constantly changing.
Capabilities are constantly changing.
Properly structured content is portable
to future platforms.

48. THE ZERO INTERFACE:
THINK, DONE.
ANY STEP WE ADD TO THAT HAS THE POTENTIAL TO RUIN EVERYTHING,
SO CHOOSE WISELY.

49. 4. LINEAR “DESIGN”
THE BARE ESSENTIALS. START PLAYING AROUND A BIT.

50. 5. BREAKPOINT GRAPHS
STEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS

51. 5. BREAKPOINT GRAPHS
STEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
THINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.

52. 6. DESIGN FOR VARIOUS BREAKPOINTS
DON’T FORGET TO
SKETCH

53. 7. IF WE’RE NOT DELIVERING DESIGNS IN
PHOTOSHOP,
WHAT DO WE DELIVER?

54. AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:

55. HOUSTON, WE HAVE A PROBLEM.

56. STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES

57. STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES

58. STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES

59. STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
CSS

60. STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
CSS
PROTOTYPE

62. VERSION CONTROL
PREPROCESSORS / HELPER SCRIPTS
FRAMEWORKS (BE CAREFUL, THOUGH)
HTML TEMPLATING, STATIC SITE GENERATORS
DEVELOPMENT APPROACHES (SMACSS, ETC.)

63. 8 & 9. SOME PRESENTATION PSYCHOLOGY

64. 8 & 9. SOME PRESENTATION PSYCHOLOGY
1. For the first presentation, use screenshots.

65. 8 & 9. SOME PRESENTATION PSYCHOLOGY
1. For the first presentation, use screenshots.
2. See above.

66. 10. AND WHAT DO WE GIVE TO THE
DEVELOPERS?

67. INSPIRATION: JEREMY KEITH’S PATTERN PRIMER
https://github.com/adactio/Pattern-Primer

68. INSPIRATION: JEREMY KEITH’S PATTERN PRIMER
https://github.com/adactio/Pattern-Primer

69. WHAT I USE: DEXY
http://www.dexy.it/

70. WHAT I USE: DEXY
http://www.dexy.it/

71. WHAT I USE: DEXY
http://www.dexy.it/

72. HOW DEXY WORKS
http://www.dexy.it/
MARKDOWN
HTML CSS
HTML
SYNTAX HIGHLIGHTING

73. YOU’VE JUST CREATED A
DESIGNGUIDE
AND THAT’S SO MUCH MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE

74. 1. Content inventory
2. Content reference wireframes
3. Design in text (structured content)
4. Linear design
5. Breakpoint graph
6. Design for various breakpoints
7. HTML design prototype
RESPONSIVE 8. Present prototype screenshots
WORKFLOW: 9. Present prototype after revision
10 STEPS 10. Document for production

75. KEEP ADAPTING.
KEEPLEARNING.

76. THX
@STEPHENHAY
THE-HAYSTACK.COM
SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER