Web Design Process In a Responsive World

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

7. A SHIFT IN MINDSET
   Slightly Better Linear Workflow
   CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!
   Thursday, January 10, 13
   

   View Slide

8. What happens when you
   throw RWD into this
   process?
   Thursday, January 10, 13
   

   View Slide

9. A SHIFT IN MINDSET
   Linear Workflow
   CONTENT UX DESIGN FRONT-END BACK-END LAUNCH
   Now with
   RWD!
   Thursday, January 10, 13
   

   View Slide

10. This doesn’t work.
    Thursday, January 10, 13
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

14. We need to invite others
    into the process.
    Thursday, January 10, 13
    

    View Slide

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

    View Slide

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

    View Slide

17. Collaborative Timeline
    Thursday, January 10, 13
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

23. A SHIFT IN MINDSET
    A Responsive Workflow
    ‣ Pros
    - Natural Decisions
    - Encourages Collaboration
    - Encourages Iteration
    - Better Results
    Thursday, January 10, 13
    

    View Slide

24. BACK-END
    FRONT-END
    DESIGN
    C
    O
    NTENT UX
    Thursday, January 10, 13
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

33. A SHIFT IN PROCESS
    Our Deliverables
    ‣ Research Deliverables
    ‣ Content Deliverables
    ‣ Priority Deliverables
    ‣ Style Deliverables
    ‣ Functional Deliverables
    Thursday, January 10, 13
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

39. A SHIFT IN PROCESS
    Use What The Project Needs
    ‣ Research Deliverables
    ‣ Content Deliverables
    ‣ Priority Deliverables
    ‣ Style Deliverables
    ‣ Functional Deliverables
    Thursday, January 10, 13
    

    View Slide

40. WEB DESIGN PROCESS IN
    A RESPONSIVE WORLD
    LET’S DISCUSS
    Thursday, January 10, 13
    

    View Slide

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
    

    View Slide

42. THANKS!
    @hearsparkbox
    info@heysparkbox.com
    Thursday, January 10, 13
    

    View Slide