The document discusses windowed interfaces for web applications. It describes advantages like important elements always being visible and allowing independent scrolling. It also notes concerns like less content area and requiring fluid layouts. It provides tips for designing windowed interfaces such as identifying common elements, keeping it simple, using thin elements, and preparing for window flexibility. It also discusses cursor styles, consistency, and developing the interface by starting simple and grouping elements, then positioning and styling.

1. for Web Applications

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

3. What is a
Windowed Interface?

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

8. Identify
Common Elements

13. Remember to
Keep it Simple

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. Prepare for
Window Flexibility

20. Think about
Cursor Styles

21. vs.
Arrow Cursor Pointer Cursor

22. Fight!!!

23. Suggestion:
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. Notes about
Consistency

26. Be consistent in...
• Navigational treatments
• Button styles and placement
• Cursor treatments
• Graphical elements across sections
• Section width, height, and placement

28. How to develop a
Windowed Interface

29. Start simple:
Think in Groups

30. #header
#content
#secondary #main

31. HTML
<div id=quot;headerquot;>
<h1>My Web Application</h1>
</div>
<div id=quot;contentquot;>
<div id=quot;mainquot;>
<h2>Main Content</h2>
...
</div>
<div id=quot;secondaryquot;>
<h2>Secondary Content</h2>
...
</div>
</div>

32. Start to
Position and Style

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. Getting to
Examine the Results

42. Working with
IE6 and CSS Expressions

43. Conditional Comments
<!--[if IE 6]>
<link rel=quot;stylesheetquot;
href=quot;css/ie6.cssquot; />
<![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. Testing in
Internet Explorer 6

49. This is
Just the Begining

50. Are there any
Questions?

51. A sincere
Thank You
Copyright © 2009 Steve Smith

52. for Web Applications