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

Designing Windowed Web Applications

Steve Smith
PRO
December 17, 2010

Designing Windowed Web Applications

Learn how to design and code desktop-caliber web interfaces. Covers tips, techniques, and reasons behind what makes full-window interfaces effective, and how to best design for usability.

Steve Smith
PRO

December 17, 2010
Tweet

More Decks by Steve Smith

Other Decks in Design

Transcript

  1. for Web Applications

    View Slide

  2. Steve Smith
    Hi, I’m
    http://sidebarcreative.com
    http://orderedlist.com
    @orderedlist

    View Slide

  3. Windowed Interface?
    What is a

    View Slide

  4. View Slide

  5. Advantages
    • Important interface elements are always in
    sight and available
    • Allows for independent scrolling of various
    content sections
    • Feels more like a desktop application
    • Lends itself to more natural AJAX integration

    View Slide

  6. Concerns
    • Less room for content areas because of
    persistent navigation or header
    • Requires fluidity in your layout
    • More difficult to replicate the interaction of a
    desktop application

    View Slide

  7. Windowed Interface
    How to design a

    View Slide

  8. Common Elements
    Identify

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. Keep it Simple
    Remember to

    View Slide

  14. View Slide

  15. Remember to Think Thin
    • Thin doesn’t mean small
    • Take only the space necessary for each element
    • The fewer items you need to show, the more
    breathing room you can give them, which
    increases usability
    • Maximize the clickable area on any visually
    small elements

    View Slide

  16. View Slide

  17. Window Flexibility
    Prepare for

    View Slide

  18. View Slide

  19. View Slide

  20. Cursor Styles
    Think about

    View Slide

  21. vs.
    Arrow Cursor Pointer Cursor

    View Slide

  22. Fight!!!

    View Slide

  23. Use the arrow pointer everywhere
    except on standard text links.
    Suggestion:

    View Slide

  24. Why alter the default behavior?
    • No other application except browsers use the
    pointer cursor
    • The arrow cursor feels more precise
    • Often the click behavior only alters the current
    page, not loading a new one
    • Don’t rely on the pointer cursor to indicate if
    an element is clickable

    View Slide

  25. Consistency
    Notes about

    View Slide

  26. Be consistent in...
    • Navigational treatments
    • Button styles and placement
    • Cursor treatments
    • Graphical elements across sections
    • Section width, height, and placement

    View Slide

  27. View Slide

  28. Windowed Interface
    How to develop a

    View Slide

  29. Think in Groups
    Start simple:

    View Slide

  30. #header
    #content
    #secondary #main

    View Slide

  31. HTML

    My Web Application



    Main Content
    ...


    Secondary Content
    ...


    View Slide

  32. Position and Style
    Start to

    View Slide

  33. Style the Header
    #header {
    height:60px;
    line-height:60px;
    width:100%;
    position:absolute;
    overflow:hidden;
    }

    View Slide

  34. Style the Content Area
    #content {
    position:absolute;
    top:60px;
    left:0;
    right:0;
    bottom:0;
    }

    View Slide

  35. Style the Main Content
    #main {
    padding:10px 15px;
    position:absolute;
    top:0;
    left:280px;
    right:0;
    bottom:0;
    overflow:auto;
    border-left:1px solid #717171;
    }

    View Slide

  36. Style the Sidebar
    #secondary {
    padding:10px 15px;
    position:absolute;
    top:0;
    left:0;
    width:250px;
    bottom:0;
    overflow:auto;
    }

    View Slide

  37. Examine the Results
    Getting to

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. IE6 and CSS Expressions
    Working with

    View Slide

  43. Conditional Comments

    View Slide

  44. ie6.css: Basic Styles
    html {
    overflow:hidden;
    }
    body {
    height:100%;
    overflow:auto;
    }

    View Slide

  45. ie6.css: Fix the Height
    #secondary, #main {
    height:expression(
    document.body.scrollTop +
    document.body.clientHeight -
    document.getElementById('header').offsetHeight -
    20
    );
    }

    View Slide

  46. ie6.css: Fix the Width
    #main {
    width:expression(
    document.body.scrollLeft +
    document.body.clientWidth -
    document.getElementById('secondary').offsetWidth -
    31
    );
    }

    View Slide

  47. Internet Explorer 6
    Testing in

    View Slide

  48. View Slide

  49. Just the Begining
    This is

    View Slide

  50. Questions?
    Are there any

    View Slide

  51. Thank You
    A sincere
    Copyright © 2009 Steve Smith

    View Slide

  52. for Web Applications

    View Slide