Web Design Process In a Responsive World

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 Ben Callahan
January 10, 2013

Web Design Process In a Responsive World

Slides from @drewtclemens and I's presentation at #codemash on January 10, 2013 in Sandusky, Ohio.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

January 10, 2013
Tweet

Transcript

  1. @bencallahan @drewtclemens WEB DESIGN PROCESS IN A RESPONSIVE WORLD Thursday,

    January 10, 13
  2. WEB DESIGN PROCESS IN A RESPONSIVE WORLD A SHIFT IN

    MINDSET Thursday, January 10, 13
  3. Where we’ve been. Thursday, January 10, 13

  4. A SHIFT IN MINDSET Traditional Linear Workflow DESIGN FRONT-END BACK-END

    LAUNCH! Thursday, January 10, 13
  5. A SHIFT IN MINDSET Traditional Linear Workflow DESIGN FRONT-END BACK-END

    LAUNCH! TH IN K A B O U T U SER S Thursday, January 10, 13
  6. A SHIFT IN MINDSET Traditional Linear Workflow DESIGN FRONT-END BACK-END

    LAUNCH! TH IN K A B O U T U SER S TH R O W IN C O N TEN T Thursday, January 10, 13
  7. A SHIFT IN MINDSET Slightly Better Linear Workflow CONTENT UX

    DESIGN FRONT-END BACK-END LAUNCH! Thursday, January 10, 13
  8. What happens when you throw RWD into this process? Thursday,

    January 10, 13
  9. A SHIFT IN MINDSET Linear Workflow CONTENT UX DESIGN FRONT-END

    BACK-END LAUNCH Now with RWD! Thursday, January 10, 13
  10. This doesn’t work. Thursday, January 10, 13

  11. (example: seesparkbox.com) Thursday, January 10, 13

  12. Jakob Nielsen Says... ‣ Build a separate mobile site ‣

    Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/ Thursday, January 10, 13
  13. Jakob Nielsen Says... ‣ Build a separate mobile site ‣

    Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/ PLEASE, NO. Thursday, January 10, 13
  14. We need to invite others into the process. Thursday, January

    10, 13
  15. A SHIFT IN MINDSET A Responsive Workflow Thursday, January 10,

    13
  16. Disciplines BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January

    10, 13
  17. Collaborative Timeline Thursday, January 10, 13

  18. Cycle BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January

    10, 13
  19. Differing Cycle BACK-END FRONT-END DESIGN C O NTENT UX Thursday,

    January 10, 13
  20. Life Cycle BACK-END FRONT-END DESIGN C O NTENT UX Thursday,

    January 10, 13
  21. Phased Release BACK-END FRONT-END DESIGN C O NTENT UX DELIVERABLE

    DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE RELEASE RELEASE Thursday, January 10, 13
  22. A SHIFT IN MINDSET A Responsive Workflow ‣ Cons -

    Requires Change - May Conflict with Organizational Structure - Dependent on Team Make-up Thursday, January 10, 13
  23. A SHIFT IN MINDSET A Responsive Workflow ‣ Pros -

    Natural Decisions - Encourages Collaboration - Encourages Iteration - Better Results Thursday, January 10, 13
  24. BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January 10,

    13
  25. What happens when you invite others into the process? Thursday,

    January 10, 13
  26. The quality as a whole improves. Thursday, January 10, 13

  27. (example: m.people.com) Thursday, January 10, 13

  28. So, how do we actually do this? Thursday, January 10,

    13
  29. WEB DESIGN PROCESS IN A RESPONSIVE WORLD A SHIFT IN

    PROCESS Thursday, January 10, 13
  30. A SHIFT IN PROCESS A Process Myth Each client deliverable

    needs to look more like a final, beautiful end-product than the previous one. Thursday, January 10, 13
  31. A SHIFT IN PROCESS Which Results In Pushing toward nearly-designed

    wireframes quickly and completely designed comps soon after. (This sets up all sorts of unrealistic client expectations.) Thursday, January 10, 13
  32. A SHIFT IN PROCESS A Better Approach Deliverables that best

    serve the organization and prioritization of content and function across multiple resolutions. (Not deliverables made just to impress clients.) Thursday, January 10, 13
  33. A SHIFT IN PROCESS Our Deliverables ‣ Research Deliverables ‣

    Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13
  34. A SHIFT IN PROCESS Let’s Focus On... ‣ Research Deliverables

    ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13
  35. A SHIFT IN PROCESS Priority Deliverables ‣ Content Priority Prototypes

    - Takes the place of a traditional wireframe. - As much real content as you can. - Linear in nature, priority implied. - Possibly created in HTML, viewed in a browser. - Generated by content/UX people. Thursday, January 10, 13
  36. A SHIFT IN PROCESS Priority Deliverables ‣ Content Priority Examples

    - Non HTML examples • Smashing Article: Design Process In The Responsive Age • New Sparkbox site early efforts - HTML example • building.seesparkbox.com Thursday, January 10, 13
  37. A SHIFT IN PROCESS Style Deliverables ‣ Style Prototype -

    Like Style Tiles, but in the browser (styletil.es). - Very fast to build. - Accurate web typography. - Easy to show web interaction. - Client reviews in their browser of preference. Thursday, January 10, 13
  38. A SHIFT IN PROCESS Style Deliverables ‣ Style Prototype Examples

    - building.seesparkbox.com • new Sparkbox web style prototype - dressresponsively.com • dress responsively style prototype Thursday, January 10, 13
  39. A SHIFT IN PROCESS Use What The Project Needs ‣

    Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13
  40. WEB DESIGN PROCESS IN A RESPONSIVE WORLD LET’S DISCUSS Thursday,

    January 10, 13
  41. LINKS ‘N STUFF Join Us! seesparkbox.com/foundry @hearsparkbox If you really

    like this sort of thing... buildresponsively.com @brworkshop Thursday, January 10, 13
  42. THANKS! @hearsparkbox info@heysparkbox.com Thursday, January 10, 13