Designing and Developing Windowed Interfaces for Web Apps

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=quot;headerquot;> <h1>My Web Application</h1> </div> <div id=quot;contentquot;> <div id=quot;mainquot;> <h2>Main Content</h2> ... </div> <div id=quot;secondaryquot;> <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

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?

for Web Applications

Designing and Developing Windowed Interfaces for Web Apps

by Steve Smith

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 9

Statistics

Designing and Developing Windowed Interfaces for Web Apps Presentation Transcript

http://www.slideshare.net	5
http://jackychong.tumblr.com	2
http://uxfactory.tumblr.com	2