for Web Applications

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

What is a
Windowed Interface?

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

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

How to design a
Windowed Interface

Identify
Common Elements

Remember to
Keep it Simple

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

Prepare for
Window Flexibility

Think about
Cursor Styles

vs.
Arrow Cursor Pointer Cursor

Fight!!!

Suggestion:
Use the arrow pointer everywhere
except on standard text links.

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

Notes about
Consistency

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

How to develop a
Windowed Interface

Start simple:
Think in Groups

#header
#content
#secondary #main

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>

Start to
Position and Style

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

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

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

Style the Sidebar
#secondary {
padding:10px 15px;
position:absolute;
top:0;
left:0;
width:250px;
bottom:0;
overflow:auto;
}

Getting to
Examine the Results

Working with
IE6 and CSS Expressions

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

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

ie6.css: Fix the Height
#secondary, #main {
height:expression(
document.body.scrollTop +
document.body.clientHeight -
document.getElementById('header').offsetHeight -
20
);
}

ie6.css: Fix the Width
#main {
width:expression(
document.body.scrollLeft +
document.body.clientWidth -
document.getElementById('secondary').offsetWidth -
31
);
}

Testing in
Internet Explorer 6

This is
Just the Begining

Are there any
Questions?

A sincere
Thank You
Copyright © 2009 Steve Smith

for Web Applications