Responsive Design Workflow

Slides from my presentation at Breaking Development 2012 in Orlando. This deck is not intended to be standalone, and probably made more sense in combination with my talk. At least, I hope so. I understand that a video of the talk will be available in the near future on the Breaking Development website.

Transcript

1. WORKFLOW RESPONSIVE DESIGN STEPHEN HAY . BDCONF ORLANDO 20120415
2. UNSEXY SOME ASPECTS OF OUR WORK ARE DECIDEDLY (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. TECH MUCH DESIGN DECISIONMAKING IS BASED ON THIS IS A BAD THING.
15. ANDY CLARKE ELLIOT JAY STOCKS PAUL BOAG RACHEL ANDREW LEA VEROU DAVID STOREY CHRIS HEILMANN AARRON WALTER ARAL BALKAN BEN SCHWARZ DMITRY FADEYEV MARC EDWARDS AND LITTLE OL’ ME Absolutely shameless, yet tasteful book plug
16. — BRYAN RIEGER “One technique I've used for years is to 'design in text'… not necessarily describing everything in textual form[…]”
17. — BRYAN RIEGER “(which usually results in docs sounding oddly creepy, '–it puts the lotion on it's skin!')[…]”
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. MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP:
21. MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP: WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
22. MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP: WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS OR DO WE?
23. SMABLET
24. SMABLET i
25. NOW WORKFLOW
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. INTERACTION DESIGN http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png LOOK, MA!
29. DESIGN flickr.com/photos/zieak/2905918515/
30. DESIGN flickr.com/photos/zieak/2905918515/ PHOTOSHOP, RINSE, REPEAT
31. DECORATION DESIGN IS NOT AND DECORATION IS NOT DESIGN
32. RESPONSIVE WORKFLOW
33. RESPONSIVE WORKFLOW: 10 STEPS
34. RESPONSIVE WORKFLOW: 10 STEPS 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 8. Present prototype screenshots 9. Present prototype after revision 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 5 6 7 8 9 10 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
41. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT
42. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT http://johnmacfarlane.net/pandoc/ pandoc content.md -o content.html
43. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT
44. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT
45. MOBILE-READY THE WORLD’S FIRST WEBSITE IS ALMOST 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. THINK, DONE. THE ZERO INTERFACE: 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. SKETCH DON’T FORGET TO 6. DESIGN FOR VARIOUS BREAKPOINTS
53. PHOTOSHOP , 7. IF WE’RE NOT DELIVERING DESIGNS IN 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. PROTOTYPE STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES CSS
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. DEVELOPERS? 10. AND WHAT DO WE GIVE TO THE
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/ CSS HTML SYNTAX HIGHLIGHTING MARKDOWN HTML
73. DESIGN GUIDE YOU’VE JUST CREATED A AND THAT’S SO MUCH MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE
74. RESPONSIVE WORKFLOW: 10 STEPS 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 8. Present prototype screenshots 9. Present prototype after revision 10. Document for production
75. KEEP LEARNING. KEEP ADAPTING.
76. THX @STEPHENHAY THE-HAYSTACK.COM SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER