Your SlideShare is downloading. ×
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing and Developing Windowed Interfaces for Web Apps

2,786

Published on

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

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
2,786
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
107
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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



  • Transcript

    • 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

    ×