Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
91 likes42,279 views
The document outlines the responsive design workflow presented by Stephen Hay, emphasizing the need for a content-first approach as technology evolves and multiplatform design becomes essential. It details a ten-step process including content inventory, wireframing, and prototyping, illustrating the importance of structured content and adaptability to diverse screen sizes. Additionally, it discusses using tools and strategies for effective design communication and production documentation.
![“One technique I've used for
years is to 'design in text'… not
necessarily describing
everything in textual form[…]”
— BRYAN RIEGER](https://image.slidesharecdn.com/bdconf2012-120420134531-phpapp01/85/Responsive-Design-Workflow-Breaking-Development-Conference-2012-Orlando-16-320.jpg)
![“(which usually results in docs
sounding oddly creepy, '–it puts
the lotion on it's skin!')[…]”
— BRYAN RIEGER](https://image.slidesharecdn.com/bdconf2012-120420134531-phpapp01/85/Responsive-Design-Workflow-Breaking-Development-Conference-2012-Orlando-17-320.jpg)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
- 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
- 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
- 31. DESIGN IS NOT DECORATION AND DECORATION IS NOT DESIGN
- 32. RESPONSIVE WORKFLOW
- 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
- 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
- 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
- 76. THX @STEPHENHAY THE-HAYSTACK.COM SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER