Designing Windowed Web Applications

Learn how to design and code desktop-caliber web interfaces. Covers tips, techniques, and reasons behind what makes full-window interfaces effective, and how to best design for usability.

Transcript

1. for Web Applications
   

   View Slide

2. Steve Smith
   Hi, I’m
   http://sidebarcreative.com
   http://orderedlist.com
   @orderedlist
   

   View Slide

3. Windowed Interface?
   What is a
   

   View Slide

4. View Slide

5. 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
   

   View Slide

6. 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
   

   View Slide

7. Windowed Interface
   How to design a
   

   View Slide

8. Common Elements
   Identify
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. Keep it Simple
    Remember to
    

    View Slide

14. View Slide

15. 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
    

    View Slide

16. View Slide

17. Window Flexibility
    Prepare for
    

    View Slide

18. View Slide

19. View Slide

20. Cursor Styles
    Think about
    

    View Slide

21. vs.
    Arrow Cursor Pointer Cursor
    

    View Slide

22. Fight!!!
    

    View Slide

23. Use the arrow pointer everywhere
    except on standard text links.
    Suggestion:
    

    View Slide

24. 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
    

    View Slide

25. Consistency
    Notes about
    

    View Slide

26. Be consistent in...
    • Navigational treatments
    • Button styles and placement
    • Cursor treatments
    • Graphical elements across sections
    • Section width, height, and placement
    

    View Slide

27. View Slide

28. Windowed Interface
    How to develop a
    

    View Slide

29. Think in Groups
    Start simple:
    

    View Slide

30. #header
    #content
    #secondary #main
    

    View Slide

31. HTML
    
    My Web Application
    
    
    
    Main Content
    ...
    
    
    Secondary Content
    ...
    
    
    

    View Slide

32. Position and Style
    Start to
    

    View Slide

33. Style the Header
    #header {
    height:60px;
    line-height:60px;
    width:100%;
    position:absolute;
    overflow:hidden;
    }
    

    View Slide

34. Style the Content Area
    #content {
    position:absolute;
    top:60px;
    left:0;
    right:0;
    bottom:0;
    }
    

    View Slide

35. 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;
    }
    

    View Slide

36. Style the Sidebar
    #secondary {
    padding:10px 15px;
    position:absolute;
    top:0;
    left:0;
    width:250px;
    bottom:0;
    overflow:auto;
    }
    

    View Slide

37. Examine the Results
    Getting to
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. IE6 and CSS Expressions
    Working with
    

    View Slide

43. Conditional Comments
    
    

    View Slide

44. ie6.css: Basic Styles
    html {
    overflow:hidden;
    }
    body {
    height:100%;
    overflow:auto;
    }
    

    View Slide

45. ie6.css: Fix the Height
    #secondary, #main {
    height:expression(
    document.body.scrollTop +
    document.body.clientHeight -
    document.getElementById('header').offsetHeight -
    20
    );
    }
    

    View Slide

46. ie6.css: Fix the Width
    #main {
    width:expression(
    document.body.scrollLeft +
    document.body.clientWidth -
    document.getElementById('secondary').offsetWidth -
    31
    );
    }
    

    View Slide

47. Internet Explorer 6
    Testing in
    

    View Slide

48. View Slide

49. Just the Begining
    This is
    

    View Slide

50. Questions?
    Are there any
    

    View Slide

51. Thank You
    A sincere
    Copyright © 2009 Steve Smith
    

    View Slide

52. for Web Applications
    

    View Slide