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

3,724 views
3,354 views

Published on

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

Published in: Technology, Education
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,724
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
107
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide



  • Mobile Me
    Google Maps
    AtMail
    Harmony
  • Mobile Me
    Google Maps
    AtMail
    Harmony
  • Mobile Me
    Google Maps
    AtMail
    Harmony
  • Mobile Me
    Google Maps
    AtMail
    Harmony
  • Mobile Me
    Google Maps
    AtMail
    Harmony
  • Mobile Me
    Google Maps
    AtMail
    Harmony
  • Mobile Me
    Google Maps
    AtMail
    Harmony
  • Mobile Me
    Google Maps
    AtMail
    Harmony





































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



  • 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

    ×