Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 variou...
Concerns
• Less room for content areas because of
  persistent navigation or header
• Requires fluidity in your layout

• ...
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 ...
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 m...
Notes about
Consistency
Be consistent in...
• Navigational treatments

• Button styles and placement

• Cursor treatments

• Graphical elements ac...
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;>
 ...
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;
	 ...
Style the Sidebar

#secondary {
	 padding:10px 15px;
	 position:absolute;
	 top:0;
	 left:0;
	 width:250px;
	 bottom:0;
	 ...
Getting to
Examine the Results
Working with
IE6 and CSS Expressions
Conditional Comments


<!--[if IE 6]>
 <link rel=quot;stylesheetquot;
        href=quot;css/ie6.cssquot; />
<![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.clie...
ie6.css: Fix the Width

#main {
  width:expression(
      document.body.scrollLeft +
      document.body.clientWidth -
   ...
Testing in
Internet Explorer 6
This is
Just the Begining
Are there any
Questions?
A sincere
Thank You



Copyright © 2009 Steve Smith
for Web Applications
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
Upcoming SlideShare
Loading in …5
×

Designing and Developing Windowed Interfaces for Web Apps

4,274 views

Published on

Learn to design and code rich, desktop caliber application interfaces for your web applications.

Published in: Technology, Education
  • Be the first to comment

Designing and Developing Windowed Interfaces for Web Apps

  1. for Web Applications
  2. Hi, I’m Steve Smith http://sidebarcreative.com http://orderedlist.com @orderedlist
  3. What is a Windowed Interface?
  4. 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
  5. 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
  6. How to design a Windowed Interface
  7. Identify Common Elements
  8. Remember to Keep it Simple
  9. 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
  10. Prepare for Window Flexibility
  11. Think about Cursor Styles
  12. vs. Arrow Cursor Pointer Cursor
  13. Fight!!!
  14. Suggestion: Use the arrow pointer everywhere except on standard text links.
  15. 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
  16. Notes about Consistency
  17. Be consistent in... • Navigational treatments • Button styles and placement • Cursor treatments • Graphical elements across sections • Section width, height, and placement
  18. How to develop a Windowed Interface
  19. Start simple: Think in Groups
  20. #header #content #secondary #main
  21. 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>
  22. Start to Position and Style
  23. Style the Header #header { height:60px; line-height:60px; width:100%; position:absolute; overflow:hidden; }
  24. Style the Content Area #content { position:absolute; top:60px; left:0; right:0; bottom:0; }
  25. 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; }
  26. Style the Sidebar #secondary { padding:10px 15px; position:absolute; top:0; left:0; width:250px; bottom:0; overflow:auto; }
  27. Getting to Examine the Results
  28. Working with IE6 and CSS Expressions
  29. Conditional Comments <!--[if IE 6]> <link rel=quot;stylesheetquot; href=quot;css/ie6.cssquot; /> <![endif]-->
  30. ie6.css: Basic Styles html { overflow:hidden; } body { height:100%; overflow:auto; }
  31. ie6.css: Fix the Height #secondary, #main { height:expression( document.body.scrollTop + document.body.clientHeight - document.getElementById('header').offsetHeight - 20 ); }
  32. ie6.css: Fix the Width #main { width:expression( document.body.scrollLeft + document.body.clientWidth - document.getElementById('secondary').offsetWidth - 31 ); }
  33. Testing in Internet Explorer 6
  34. This is Just the Begining
  35. Are there any Questions?
  36. A sincere Thank You Copyright © 2009 Steve Smith
  37. for Web Applications

×