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

Responsive Design Workflow: Webshaped 2012

Responsive Design Workflow: Webshaped 2012

Almost exactly the same slides as for BDConf 2012 Orlando and Mobilism 2012, but some might appreciate having the actual slides from this event.

Stephen Hay

July 06, 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. STYLE GUIDE YOU’VE JUST CREATED A AND THAT’S SO MUCH

    MORE USEFUL THAN A PIXEL-PERFECT 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