Slide 1

Slide 1 text

for Web Applications

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Windowed Interface? What is a

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Windowed Interface How to design a

Slide 8

Slide 8 text

Common Elements Identify

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Keep it Simple Remember to

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Window Flexibility Prepare for

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Cursor Styles Think about

Slide 21

Slide 21 text

vs. Arrow Cursor Pointer Cursor

Slide 22

Slide 22 text

Fight!!!

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Consistency Notes about

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Windowed Interface How to develop a

Slide 29

Slide 29 text

Think in Groups Start simple:

Slide 30

Slide 30 text

#header #content #secondary #main

Slide 31

Slide 31 text

HTML

My Web Application

Main Content

...

Secondary Content

...

Slide 32

Slide 32 text

Position and Style Start to

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Examine the Results Getting to

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

IE6 and CSS Expressions Working with

Slide 43

Slide 43 text

Conditional Comments

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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