Designing and Developing Windowed Interfaces for Web Apps

3,483 views
3,213 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,483
On SlideShare
0
From Embeds
0
Number of Embeds
2
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

    ×