Windowed Interfaces

8/7/2019 Windowed Interfaces

1/52

forWeb Applications


2/52

Steve Smith

Hi, Im

http://sidebarcreative.com

http://orderedlist.com

@orderedlist


3/52

Windowed Interface?What is a


4/52


5/52

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

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

Windowed InterfaceHow to designa


8/52

Common ElementsIdentify


9/52


10/52


11/52


12/52


13/52

Keep it SimpleRemember to


14/52


15/52

Remember to Think Thin Thin doesnt 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/52


17/52

Window FlexibilityPrepare for


18/52


19/52


20/52

Cursor StylesThinkabout


21/52

vs.

Arrow Cursor Pointer Cursor


22/52

Fight!!!


23/52

Use the arrow pointer everywhereexcepton standard text links.

Suggestion:


24/52

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

Dont rely on the pointer cursor to indicate if

an element is clickable


25/52

ConsistencyNotesabout


26/52

Be consistent in... Navigational treatments

Button styles and placement

Cursor treatments

Graphical elements across sections

Section width, height, and placement


27/52


28/52

Windowed InterfaceHow to developa


29/52

Think in GroupsStartsimple:


30/52

#header

#content

#secondary #main


31/52

HTML

My Web Application

Main Content

...

Secondary Content

...


32/52

Position and StyleStartto


33/52

Style the Header

#header {

height:60px; line-height:60px; width:100%; position:absolute; overflow:hidden;}


34/52

Style the Content Area

#content {

position:absolute; top:60px; left:0; right:0; bottom:0;}


35/52

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

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


37/52

Examine the ResultsGettingto


38/52


39/52


40/52


41/52


42/52

IE6 and CSS ExpressionsWorking with


43/52


44/52

ie6.css: Basic Styleshtml { overflow:hidden;}

body { height:100%; overflow:auto;}


45/52

ie6.css: Fix the Height

#secondary, #main {

height:expression(

document.body.scrollTop +

document.body.clientHeight -

document.getElementById('header').offsetHeight -

20

);

}


46/52

ie6.css: Fix the Width

#main {

width:expression(

document.body.scrollLeft +

document.body.clientWidth -

document.getElementById('secondary').offsetWidth -

31

);

}


47/52

Internet Explorer 6Testing in


48/52


49/52

Just the BeginingThis is


50/52

Questions?Are thereany


51/52

Thank YouA sincere

Copyright 2009 Steve Smith


52/52

forWeb Applications

Windowed Interfaces

Documents

Transcript of Windowed Interfaces