Responsive Design Workflow: Webshaped 2012

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

Transcript

1. WORKFLOW RESPONSIVE DESIGN STEPHEN HAY . WEBSHAPED HELSINKI 20120516
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.
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. TECH MUCH DESIGN DECISIONMAKING IS BASED ON THIS IS A BAD THING.
20. 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
21. — BRYAN RIEGER “One technique I've used for years is to 'design in text'… not necessarily describing everything in textual form[…]”
22. — BRYAN RIEGER “(which usually results in docs sounding oddly creepy, '–it puts the lotion on it's skin!')[…]”
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. MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP:
26. MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP: WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
27. MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP: WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS OR DO WE?
28. SMABLET
29. SMABLET i
30. NOW WORKFLOW
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. INTERACTION DESIGN http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png LOOK, MA!
34. DESIGN flickr.com/photos/zieak/2905918515/
35. DESIGN flickr.com/photos/zieak/2905918515/ PHOTOSHOP, RINSE, REPEAT
36. DECORATION DESIGN IS NOT AND DECORATION IS NOT DESIGN
37. RESPONSIVE WORKFLOW
38. RESPONSIVE WORKFLOW: 10 STEPS
39. 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
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 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
46. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT
47. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT http://johnmacfarlane.net/pandoc/ pandoc content.md -o content.html
48. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT
49. 3. DESIGNING IN TEXT ENVISIONING STRUCTURED CONTENT
50. MOBILE-READY THE WORLD’S FIRST WEBSITE IS ALMOST 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. THINK, DONE. THE ZERO INTERFACE: 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. SKETCH DON’T FORGET TO 6. DESIGN FOR VARIOUS BREAKPOINTS
58. PHOTOSHOP , 7. IF WE’RE NOT DELIVERING DESIGNS IN 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. PROTOTYPE STRUCTURED CONTENT LINEAR DESIGN CONTENT REFERENCE WIREFRAMES CSS
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. DEVELOPERS? 10. AND WHAT DO WE GIVE TO THE
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/ CSS HTML SYNTAX HIGHLIGHTING MARKDOWN HTML DOCS SCREENSHOTS VIA CasperJS / PhantomJS
78. STYLE GUIDE YOU’VE JUST CREATED A AND THAT’S SO MUCH MORE USEFUL THAN A PIXEL-PERFECT PHOTOSHOP FILE
79. 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
80. KEEP LEARNING. KEEP ADAPTING.
81. THX @STEPHENHAY THE-HAYSTACK.COM SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER and ANA NELSON