Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

1. RESPONSIVE DESIGNWORKFLOW STEPHEN HAY . BDCONF ORLANDO 20120415

2. SOME ASPECTS OF OUR WORK ARE DECIDEDLYUNSEXY(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.

5. OUR CLIENT WANTS SOME CHANGES MADE.

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

7. The answer is to design from the bottom up,which meansFROM THE CONTENT OUT.

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

9. MUCH DESIGN DECISIONMAKING IS BASED ONTECH THIS IS A BAD THING.

10. ANDY CLARKE ELLIOT JAY STOCKS PAUL BOAG RACHEL ANDREW LEA VEROU DAVID STOREY CHRIS HEILMANN AARRON WALTERAbsolutely ARAL BALKANshameless, BEN SCHWARZyet tasteful DMITRY FADEYEVbook plug MARC EDWARDS AND LITTLE OL’ ME

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

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

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

14. WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:

15. WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILE

16. WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILEWE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS

17. WE CURRENTLY HAVE A WORD FOREVERYTHING THAT IS NOT DESKTOP:MOBILEWE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS OR DO WE?

18. SMABLET

19. i SMABLET

20. WORKFLOWNOW

21. INFORMATIONARCHITECTUREﬂickr.com/photos/cannedtuna/4853380320/

22. INTERACTION DESIGNhttp://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png

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

24. DESIGNﬂickr.com/photos/zieak/2905918515/

25. DESIGNPHOTOSHOP, RINSE, REPEATﬂickr.com/photos/zieak/2905918515/

26. DESIGN IS NOTDECORATIONAND DECORATION IS NOT DESIGN

27. RESPONSIVE WORKFLOW

28. RESPONSIVEWORKFLOW:10 STEPS

29. 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 prototypeRESPONSIVE 8. Present prototype screenshotsWORKFLOW: 9. Present prototype after revision10 STEPS 10. Document for production

30. 1. CONTENT INVENTORY

31. 1. CONTENT INVENTORY1. Site navigation2. Logo3. Date & location4. Social media links5. Registration status/link6. Introductory text7. Speakers (with photo)8. Countdown9. Sponsors10. Secondary navigation

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

33. CONTENT REFERENCE WIREFRAMES

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

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

36. 3. DESIGNINGIN TEXTENVISIONINGSTRUCTURED CONTENT

37. 3. DESIGNING pandoc content.md -o content.html IN TEXT ENVISIONING STRUCTURED CONTENThttp://johnmacfarlane.net/pandoc/

40. THE WORLD’S FIRST WEBSITE IS ALMOSTMOBILE-READYhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.htmlOPERA BROWSER

41. OPERA MOBILE, SAMSUNG GALAXY TAB

42. The device landscape is constantly changing.Capabilities are constantly changing.Properly structured content is portableto future platforms.

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

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

45. 5. BREAKPOINT GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS

46. 5. BREAKPOINT GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHSTHINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.

47. 6. DESIGN FOR VARIOUS BREAKPOINTSDON’T FORGET TOSKETCH

48. 7. IF WE’RE NOT DELIVERING DESIGNS INPHOTOSHOP,WHAT DO WE DELIVER?

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

50. HOUSTON, WE HAVE A PROBLEM.

51. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES

54. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES CSS

55. STRUCTURED CONTENTLINEAR DESIGNCONTENT REFERENCE WIREFRAMES CSSPROTOTYPE

56. VERSION CONTROLPREPROCESSORS / HELPER SCRIPTSFRAMEWORKS (BE CAREFUL, THOUGH)HTML TEMPLATING, STATIC SITE GENERATORSDEVELOPMENT APPROACHES (SMACSS, ETC.)

57. 8 & 9. SOME PRESENTATION PSYCHOLOGY

58. 8 & 9. SOME PRESENTATION PSYCHOLOGY1. For the first presentation, use screenshots.

59. 8 & 9. SOME PRESENTATION PSYCHOLOGY1. For the first presentation, use screenshots.2. See above.

60. 10. AND WHAT DO WE GIVE TO THEDEVELOPERS?

61. INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer

62. INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer

63. WHAT I USE: DEXYhttp://www.dexy.it/

66. HOW DEXY WORKShttp://www.dexy.it/ MARKDOWN HTML CSS HTML SYNTAX HIGHLIGHTING

67. YOU’VE JUST CREATED ADESIGNGUIDEAND THAT’S SO MUCH MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE

68. 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 prototypeRESPONSIVE 8. Present prototype screenshotsWORKFLOW: 9. Present prototype after revision10 STEPS 10. Document for production

69. KEEP ADAPTING.KEEPLEARNING.

70. THX@STEPHENHAYTHE-HAYSTACK.COMSPECIAL THANKS TO BRYAN & STEPHANIE RIEGER

Responsive Design Workflow (Breaking Development Conference 2012 Orlando)

Stephen Hay

Responsive Design Workflow (Breaking Development Conference 2012 Orlando)