Responsive Design Workflow (Mobilism 2012)

Responsive Design Workflow (Mobilism 2012)

Slides for my talk at Mobilism 2012, which are practically identical to the slides from BDConf, but some might find it useful to see the exact slides from Mobilism.

36857c1095dccf2f2c5ea470dc791530?s=128

Stephen Hay

May 11, 2012
Tweet

Transcript

  1. 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.
  2. 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.
  3. 5.
  4. 7.
  5. 8.
  6. 9.
  7. 10.
  8. 12.
  9. 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
  10. 16.

    — BRYAN RIEGER “One technique I've used for years is

    to 'design in text'… not necessarily describing everything in textual form[…]”
  11. 17.

    — BRYAN RIEGER “(which usually results in docs sounding oddly

    creepy, '–it puts the lotion on it's skin!')[…]”
  12. 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
  13. 21.

    MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS

    NOT DESKTOP: WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
  14. 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?
  15. 23.
  16. 24.
  17. 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
  18. 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
  19. 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
  20. 47.

    The device landscape is constantly changing. Capabilities are constantly changing.

    Properly structured content is portable to future platforms.
  21. 48.

    THINK, DONE. THE ZERO INTERFACE: ANY STEP WE ADD TO

    THAT HAS THE POTENTIAL TO RUIN EVERYTHING, SO CHOOSE WISELY.
  22. 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.
  23. 61.
  24. 62.

    VERSION CONTROL PREPROCESSORS / HELPER SCRIPTS FRAMEWORKS (BE CAREFUL, THOUGH)

    HTML TEMPLATING, STATIC SITE GENERATORS DEVELOPMENT APPROACHES (SMACSS, ETC.)
  25. 64.
  26. 65.

    8 & 9. SOME PRESENTATION PSYCHOLOGY 1. For the first

    presentation, use screenshots. 2. See above.
  27. 73.

    STYLE GUIDE YOU’VE JUST CREATED A AND THAT’S SO MUCH

    MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE
  28. 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