Almost exactly the same slides as for BDConf and Mobilism 2012, but some might appreciate having the actual slides from this event.

1. RESPONSIVE DESIGN
WORKFLOW STEPHEN HAY . WEBSHAPED HELSINKI 20120516

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.

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

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

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

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

20. 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

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

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

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

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

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

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

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

28. SMABLET

29. i SMABLET

30. WORKFLOW
NOW

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

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

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

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

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

36. DESIGN IS NOT
DECORATION
AND DECORATION IS NOT DESIGN

37. RESPONSIVE
WORKFLOW

38. RESPONSIVE
WORKFLOW:
10 STEPS

39. 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

40. 1. CONTENT INVENTORY

41. 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

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

43. CONTENT REFERENCE WIREFRAMES

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

45. 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

46. 3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT

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

48. 3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT

49. 3. DESIGNING
IN TEXT
ENVISIONING
STRUCTURED CONTENT

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

51. OPERA MOBILE, SAMSUNG GALAXY TAB

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

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

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

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

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

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

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

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

60. HOUSTON, WE HAVE A PROBLEM.

61. STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES

62. STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES

63. STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES

64. STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
CSS

65. STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
CSS
PROTOTYPE

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

68. 8 & 9. SOME PRESENTATION PSYCHOLOGY

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

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

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

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

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

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

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

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

77. HOW DEXY WORKS
http://www.dexy.it/
MARKDOWN
HTML CSS
HTML
DOCS
SYNTAX HIGHLIGHTING
SCREENSHOTS VIA
CasperJS / PhantomJS

78. YOU’VE JUST CREATED A
STYLEGUIDE
AND THAT’S SO MUCH MORE USEFUL THAN A PIXEL-PERFECT PHOTOSHOP FILE

79. 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

80. KEEP ADAPTING.
KEEPLEARNING.

81. THX
@STEPHENHAY
THE-HAYSTACK.COM
SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER and ANA NELSON