windowed interfaces
TRANSCRIPT
-
8/7/2019 Windowed Interfaces
1/52
forWeb Applications
-
8/7/2019 Windowed Interfaces
2/52
Steve Smith
Hi, Im
http://sidebarcreative.com
http://orderedlist.com
@orderedlist
-
8/7/2019 Windowed Interfaces
3/52
Windowed Interface?What is a
-
8/7/2019 Windowed Interfaces
4/52
-
8/7/2019 Windowed Interfaces
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
-
8/7/2019 Windowed Interfaces
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
-
8/7/2019 Windowed Interfaces
7/52
Windowed InterfaceHow to designa
-
8/7/2019 Windowed Interfaces
8/52
Common ElementsIdentify
-
8/7/2019 Windowed Interfaces
9/52
-
8/7/2019 Windowed Interfaces
10/52
-
8/7/2019 Windowed Interfaces
11/52
-
8/7/2019 Windowed Interfaces
12/52
-
8/7/2019 Windowed Interfaces
13/52
Keep it SimpleRemember to
-
8/7/2019 Windowed Interfaces
14/52
-
8/7/2019 Windowed Interfaces
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
-
8/7/2019 Windowed Interfaces
16/52
-
8/7/2019 Windowed Interfaces
17/52
Window FlexibilityPrepare for
-
8/7/2019 Windowed Interfaces
18/52
-
8/7/2019 Windowed Interfaces
19/52
-
8/7/2019 Windowed Interfaces
20/52
Cursor StylesThinkabout
-
8/7/2019 Windowed Interfaces
21/52
vs.
Arrow Cursor Pointer Cursor
-
8/7/2019 Windowed Interfaces
22/52
Fight!!!
-
8/7/2019 Windowed Interfaces
23/52
Use the arrow pointer everywhereexcepton standard text links.
Suggestion:
-
8/7/2019 Windowed Interfaces
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
-
8/7/2019 Windowed Interfaces
25/52
ConsistencyNotesabout
-
8/7/2019 Windowed Interfaces
26/52
Be consistent in... Navigational treatments
Button styles and placement
Cursor treatments
Graphical elements across sections
Section width, height, and placement
-
8/7/2019 Windowed Interfaces
27/52
-
8/7/2019 Windowed Interfaces
28/52
Windowed InterfaceHow to developa
-
8/7/2019 Windowed Interfaces
29/52
Think in GroupsStartsimple:
-
8/7/2019 Windowed Interfaces
30/52
#header
#content
#secondary #main
-
8/7/2019 Windowed Interfaces
31/52
HTML
My Web Application
Main Content
...
Secondary Content
...
-
8/7/2019 Windowed Interfaces
32/52
Position and StyleStartto
-
8/7/2019 Windowed Interfaces
33/52
Style the Header
#header {
height:60px; line-height:60px; width:100%; position:absolute; overflow:hidden;}
-
8/7/2019 Windowed Interfaces
34/52
Style the Content Area
#content {
position:absolute; top:60px; left:0; right:0; bottom:0;}
-
8/7/2019 Windowed Interfaces
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;}
-
8/7/2019 Windowed Interfaces
36/52
Style the Sidebar#secondary { padding:10px 15px; position:absolute; top:0; left:0; width:250px; bottom:0; overflow:auto;}
-
8/7/2019 Windowed Interfaces
37/52
Examine the ResultsGettingto
-
8/7/2019 Windowed Interfaces
38/52
-
8/7/2019 Windowed Interfaces
39/52
-
8/7/2019 Windowed Interfaces
40/52
-
8/7/2019 Windowed Interfaces
41/52
-
8/7/2019 Windowed Interfaces
42/52
IE6 and CSS ExpressionsWorking with
-
8/7/2019 Windowed Interfaces
43/52
-
8/7/2019 Windowed Interfaces
44/52
ie6.css: Basic Styleshtml { overflow:hidden;}
body { height:100%; overflow:auto;}
-
8/7/2019 Windowed Interfaces
45/52
ie6.css: Fix the Height
#secondary, #main {
height:expression(
document.body.scrollTop +
document.body.clientHeight -
document.getElementById('header').offsetHeight -
20
);
}
-
8/7/2019 Windowed Interfaces
46/52
ie6.css: Fix the Width
#main {
width:expression(
document.body.scrollLeft +
document.body.clientWidth -
document.getElementById('secondary').offsetWidth -
31
);
}
-
8/7/2019 Windowed Interfaces
47/52
Internet Explorer 6Testing in
-
8/7/2019 Windowed Interfaces
48/52
-
8/7/2019 Windowed Interfaces
49/52
Just the BeginingThis is
-
8/7/2019 Windowed Interfaces
50/52
Questions?Are thereany
-
8/7/2019 Windowed Interfaces
51/52
Thank YouA sincere
Copyright 2009 Steve Smith
-
8/7/2019 Windowed Interfaces
52/52
forWeb Applications