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

Designing Windowed Web Applications

Avatar for Steve Smith 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.

Avatar for Steve Smith

Steve Smith

December 17, 2010
Tweet

More Decks by Steve Smith

Other Decks in Design

Transcript

  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 ); }