Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Design Workflow

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.

Stephen Hay

April 20, 2012
Tweet

More Decks by Stephen Hay

Other Decks in Design

Transcript

  1. 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. 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. 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
  4. — BRYAN RIEGER “One technique I've used for years is

    to 'design in text'… not necessarily describing everything in textual form[…]”
  5. — BRYAN RIEGER “(which usually results in docs sounding oddly

    creepy, '–it puts the lotion on it's skin!')[…]”
  6. “essentially what is the message that needs to be communicated

    if I was ONLY able to provide the user with unstyled HTML?” — BRYAN RIEGER
  7. MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS

    NOT DESKTOP: WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
  8. MOBILE WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS

    NOT DESKTOP: WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS OR DO WE?
  9. 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
  10. 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
  11. 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
  12. The device landscape is constantly changing. Capabilities are constantly changing.

    Properly structured content is portable to future platforms.
  13. THINK, DONE. THE ZERO INTERFACE: ANY STEP WE ADD TO

    THAT HAS THE POTENTIAL TO RUIN EVERYTHING, SO CHOOSE WISELY.
  14. 5. BREAKPOINT GRAPHS STEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION

    FOR BREAKPOINT GRAPHS THINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.
  15. VERSION CONTROL PREPROCESSORS / HELPER SCRIPTS FRAMEWORKS (BE CAREFUL, THOUGH)

    HTML TEMPLATING, STATIC SITE GENERATORS DEVELOPMENT APPROACHES (SMACSS, ETC.)
  16. 8 & 9. SOME PRESENTATION PSYCHOLOGY 1. For the first

    presentation, use screenshots. 2. See above.
  17. DESIGN GUIDE YOU’VE JUST CREATED A AND THAT’S SO MUCH

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