340 likes | 494 Views
Advanced WebPAC Design and Best Practices: Discussion with the People who Create the Out-Of-The-Box WebPAC Default Sets. Dinah Sanders, Product Manager Charles Mihm, Product Engineer. WebPAC Example Sets. in CSDirect Downloads area separate sets for classic Web OPAC and WebPAC Pro
E N D
Advanced WebPAC Design and Best Practices:Discussion with the People who Create the Out-Of-The-Box WebPAC Default Sets Dinah Sanders, Product Manager Charles Mihm, Product Engineer
WebPAC Example Sets • in CSDirect Downloads area • separate sets for classic Web OPAC and WebPAC Pro • updated with new releases, with additional corrections/additions between releases • change notes provided
Role of the Example Set • out-of-the-box look & feel • no dead links to support iterative improvement - extend/alter as you have time • reference for customizable forms • easy starting point for redesigns
Contents • XHTML pages • images • example wwwoptions (what you need to compare most when using the set for a redesign) • javascripts supporting this look & feel • style sheets
Style sheets & the cascade • ProStyles.cssnot editable, provides default presentation • styles.csseditable, allows you to override defaults • ie_styles.csseditable, provides workarounds for Internet Explorer’s foibles
Ideal Web Design • Valid, standards based, and semantically meaningful markup with a complete separation of presentation (CSS), behavior (JavaScript) and content (X/HTML).
Challenges to the ideal • Variable support for standards in browsers used by your audience • Internet Explorer • Screen readers & other alternate tech • Small devices like PDAs & phones • Older HTML code which works but is not compliant with current standard
Screen Resolutions • 800 X 600 – 12% • 1024 X 768 – 53% • Larger – 21% These figures will vary based upon your audience. Stats for April 2007 from: http://www.thecounter.com/stats/2007/April/res.php
Current Browser Market Share • Internet Explorer – 58.7 % • IE 7 – 18% • IE 6 – 38.7% • IE 5 – 2% • Firefox – 31.8% • Safari – 1.7% • Opera – 1.6% Stats for March 2007 from: http://www.w3schools.com/browsers/browsers_stats.asp
Browser Differences • One of these kids is doing their own thing, one of the kids is not the same… • Firefox • Opera • Safari • Internet Explorer
IE likes to be different • Issues you need to learn about if you are doing design changes & run into problems • Box model • hasLayout • Incomplete CSS support • IE 6 non native PNG transparency support
Sanity-saving solutions • Accept imperfection & variability: this is not print design • Test in many browsers & platforms • Fix on fail • Iterate & improve • Do new work to current standards(test in Firefox and then adjust for IE behavior)
Moving on from the technical… What can you do with the example set?
Tools Aptana- an excellent multi-purpose editor Firefox- development tool FileZilla- powerful FTP client
Firefox Extensions • Web Developer • Firebug • ColorZilla • HTML Validator • IE Tab • JSView • Font Finder • CSSViewer • Lorem Ipsum Content Generator
Suggested Reading Don't Make Me Think: A Common Sense Approach to Web Usability by Steve Krug …if you were only to read one design book, this would be THAT book!
Suggested Reading HTML Mastery by Paul Haine CSS Mastery by Andy Budd, Cameron Moll & Simon Collison
Suggested Reading DOM Scripting by Jeremy Keith WEB Standards Creativity by Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Derek Featherstone, Ian Lloyd, Ethan Marcotte, Dan Rubin, Rob Weychert
Suggested Reading Transcending CSS: The Fine Art of Web Design by Andy Clarke & Molly E Holzschlag The Principles of Beautiful Web Design By Jason Beaird
Suggested Reading Bulletproof Web Design by Dan Cedarholm Bulletproof Ajax By Jeremy Keith
Appendix: Challenges • Explaining the IE differences • Box model • hasLayout • Incomplete CSS support • IE 6 non native PNG transparency support
Box Model CSS Implementation: The total width including borders and padding should be 400px 20+30+300+30+20 = 400 Microsoft Implementation: IE includes the borders and padding within the total width so you actually have a width of 200px for your content 300-20-30-30-20 = 200
Some boxy CSS: Microsoft Implementation: div.boxtest { border:20px solid #000; padding:30px; width:300px; }Standards Browser:
hasLayout • Most of the quirks that IE has in regards to the way it displays web pages are related to the “hasLayout” property • “hasLayout is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events” - Holly Bergevin, et. al. • “Understanding “layout” gives a huge insight into lots of other IE bugs and idiosyncrasies.”- Dean Edwards
Some hasLayout display issues • float handling • list marker display • relatively positioned parent and disappearing floated child • :hover reflow • background image positioning • margin collapsing (or lack thereof) • …the list goes on…
More hasLayout Resources • on having layout • Microsoft's documentation
See Innovative @ IUG 15! • Encore Booth / Millennium Self Check Exhibits • CC/Exhibit Hall 1 Open During Exhibit Hours • Innovative Help Desk Annex / Customer Sales Center • CC/Room B Tuesday 11 a.m. – 5:30 p.m.Wednesday 8 – 11 a.m., 1:30 – 5:30 p.m.Thursday 8 a.m. – 3 p.m.