for Web Applications

Steve SmithHi, I’m

http://sidebarcreative.comhttp://orderedlist.com@orderedlist

Windowed Interface?What is a

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

Windowed InterfaceHow to design a

Common ElementsIdentify

Keep it SimpleRemember to

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

Window FlexibilityPrepare for

Cursor StylesThink about

vs.

Arrow Cursor Pointer Cursor

Fight!!!

Use the arrow pointer everywhere except on standard text links.

Suggestion:

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

ConsistencyNotes about

Be consistent in...• Navigational treatments

• Button styles and placement

• Cursor treatments

• Graphical elements across sections

• Section width, height, and placement

Windowed InterfaceHow to develop a

Think in GroupsStart simple:

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

Position and StyleStart to

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

Examine the ResultsGetting to

IE6 and CSS ExpressionsWorking with

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

);}

Internet Explorer 6Testing in

Just the BeginingThis is

Questions?Are there any

Thank YouA sincere

Copyright © 2009 Steve Smith

for Web Applications