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. for Web Applications

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

  3. Windowed Interface? What is a

  4. None
  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
  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
  7. Windowed Interface How to design a

  8. Common Elements Identify

  9. None
  10. None
  11. None
  12. None
  13. Keep it Simple Remember to

  14. None
  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
  16. None
  17. Window Flexibility Prepare for

  18. None
  19. None
  20. Cursor Styles Think about

  21. vs. Arrow Cursor Pointer Cursor

  22. Fight!!!

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

  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
  25. Consistency Notes about

  26. Be consistent in... • Navigational treatments • Button styles and

    placement • Cursor treatments • Graphical elements across sections • Section width, height, and placement
  27. None
  28. Windowed Interface How to develop a

  29. Think in Groups Start simple:

  30. #header #content #secondary #main

  31. 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>
  32. Position and Style Start to

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

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

    bottom:0; }
  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; }
  36. Style the Sidebar #secondary { padding:10px 15px; position:absolute; top:0; left:0;

    width:250px; bottom:0; overflow:auto; }
  37. Examine the Results Getting to

  38. None
  39. None
  40. None
  41. None
  42. IE6 and CSS Expressions Working with

  43. Conditional Comments <!--[if IE 6]> <link rel="stylesheet" href="css/ie6.css" /> <![endif]-->

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

    overflow:auto; }
  45. ie6.css: Fix the Height #secondary, #main { height:expression( document.body.scrollTop +

    document.body.clientHeight - document.getElementById('header').offsetHeight - 20 ); }
  46. ie6.css: Fix the Width #main { width:expression( document.body.scrollLeft + document.body.clientWidth

    - document.getElementById('secondary').offsetWidth - 31 ); }
  47. Internet Explorer 6 Testing in

  48. None
  49. Just the Begining This is

  50. Questions? Are there any

  51. Thank You A sincere Copyright © 2009 Steve Smith

  52. for Web Applications