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

Designing Windowed Web Applications

Steve Smith
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

December 17, 2010

More Decks by Steve Smith

Other Decks in Design


  1. 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
  2. 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
  3. 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
  4. 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
  5. Be consistent in... • Navigational treatments • Button styles and

    placement • Cursor treatments • Graphical elements across sections • Section width, height, and placement
  6. HTML <div id="header"> <h1>My Web Application</h1> </div> <div id="content"> <div

    id="main"> <h2>Main Content</h2> ... </div> <div id="secondary"> <h2>Secondary Content</h2> ... </div> </div>
  7. 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; }
  8. ie6.css: Fix the Height #secondary, #main { height:expression( document.body.scrollTop +

    document.body.clientHeight - document.getElementById('header').offsetHeight - 20 ); }