Responsive Design Workflow

36857c1095dccf2f2c5ea470dc791530?s=47 Stephen Hay
April 20, 2012

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.

36857c1095dccf2f2c5ea470dc791530?s=128

Stephen Hay

April 20, 2012
Tweet

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.
  5. None
  6. OUR CLIENT WANTS SOME CHANGES MADE.

  7. None
  8. None
  9. None
  10. None
  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

  61. None
  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