Designing Windowed Web Applications

Transcript

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.

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