$30 off During Our Annual Pro Sale. View Details »

Web Design Process In a Responsive World

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.

Ben Callahan

January 10, 2013
Tweet

More Decks by Ben Callahan

Other Decks in Design

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
    [email protected]
    Thursday, January 10, 13

    View Slide