designing and developing windowed interfaces for web apps
DESCRIPTION
Learn to design and code rich, desktop caliber application interfaces for your web applications.TRANSCRIPT
![Page 1: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/1.jpg)
for Web Applications
![Page 2: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/2.jpg)
Steve SmithHi, I’m
http://sidebarcreative.comhttp://orderedlist.com@orderedlist
![Page 3: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/3.jpg)
Windowed Interface?What is a
![Page 4: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/4.jpg)
![Page 5: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/5.jpg)
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
![Page 6: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/6.jpg)
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
![Page 7: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/7.jpg)
Windowed InterfaceHow to design a
![Page 8: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/8.jpg)
Common ElementsIdentify
![Page 9: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/9.jpg)
![Page 10: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/10.jpg)
![Page 11: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/11.jpg)
![Page 12: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/12.jpg)
![Page 13: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/13.jpg)
Keep it SimpleRemember to
![Page 14: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/14.jpg)
![Page 15: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/15.jpg)
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
![Page 16: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/16.jpg)
![Page 17: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/17.jpg)
Window FlexibilityPrepare for
![Page 18: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/18.jpg)
![Page 19: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/19.jpg)
![Page 20: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/20.jpg)
Cursor StylesThink about
![Page 21: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/21.jpg)
vs.
Arrow Cursor Pointer Cursor
![Page 22: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/22.jpg)
Fight!!!
![Page 23: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/23.jpg)
Use the arrow pointer everywhere except on standard text links.
Suggestion:
![Page 24: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/24.jpg)
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
![Page 25: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/25.jpg)
ConsistencyNotes about
![Page 26: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/26.jpg)
Be consistent in...• Navigational treatments
• Button styles and placement
• Cursor treatments
• Graphical elements across sections
• Section width, height, and placement
![Page 27: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/27.jpg)
![Page 28: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/28.jpg)
Windowed InterfaceHow to develop a
![Page 29: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/29.jpg)
Think in GroupsStart simple:
![Page 30: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/30.jpg)
#header
#content
#secondary #main
![Page 31: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/31.jpg)
HTML
<div id="header"> <h1>My Web Application</h1></div><div id="content"> <div id="main"> <h2>Main Content</h2> ... </div> <div id="secondary"> <h2>Secondary Content</h2> ... </div></div>
![Page 32: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/32.jpg)
Position and StyleStart to
![Page 33: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/33.jpg)
Style the Header
#header { height:60px; line-height:60px; width:100%; position:absolute; overflow:hidden;}
![Page 34: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/34.jpg)
Style the Content Area
#content { position:absolute; top:60px; left:0; right:0; bottom:0;}
![Page 35: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/35.jpg)
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;}
![Page 36: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/36.jpg)
Style the Sidebar
#secondary { padding:10px 15px; position:absolute; top:0; left:0; width:250px; bottom:0; overflow:auto;}
![Page 37: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/37.jpg)
Examine the ResultsGetting to
![Page 38: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/38.jpg)
![Page 39: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/39.jpg)
![Page 40: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/40.jpg)
![Page 41: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/41.jpg)
![Page 42: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/42.jpg)
IE6 and CSS ExpressionsWorking with
![Page 43: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/43.jpg)
Conditional Comments
<!--[if IE 6]><link rel="stylesheet"
href="css/ie6.css" /><![endif]-->
![Page 44: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/44.jpg)
ie6.css: Basic Styles
html { overflow:hidden;}
body { height:100%; overflow:auto;}
![Page 45: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/45.jpg)
ie6.css: Fix the Height
#secondary, #main {height:expression(
document.body.scrollTop + document.body.clientHeight - document.getElementById('header').offsetHeight - 20
);}
![Page 46: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/46.jpg)
ie6.css: Fix the Width
#main { width:expression(
document.body.scrollLeft + document.body.clientWidth - document.getElementById('secondary').offsetWidth - 31
);}
![Page 47: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/47.jpg)
Internet Explorer 6Testing in
![Page 48: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/48.jpg)
![Page 49: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/49.jpg)
Just the BeginingThis is
![Page 50: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/50.jpg)
Questions?Are there any
![Page 51: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/51.jpg)
Thank YouA sincere
Copyright © 2009 Steve Smith
![Page 52: Designing and Developing Windowed Interfaces for Web Apps](https://reader033.vdocuments.site/reader033/viewer/2022051816/5456f343b1af9fc0638b5082/html5/thumbnails/52.jpg)
for Web Applications