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.

Transcript

1. for Web Applications
2. Steve Smith Hi, I’m http://sidebarcreative.com http://orderedlist.com @orderedlist
3. Windowed Interface? What is a
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
13. Keep it Simple Remember to
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
17. Window Flexibility Prepare for
20. Cursor Styles Think about
21. vs. Arrow Cursor Pointer Cursor
22. Fight!!!
23. Use the arrow pointer everywhere except on standard text links. Suggestion:
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
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
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
49. Just the Begining This is
50. Questions? Are there any
51. Thank You A sincere Copyright © 2009 Steve Smith
52. for Web Applications