1 / 34

Dinah Sanders, Product Manager Charles Mihm, Product Engineer

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

zona
Download Presentation

Dinah Sanders, Product Manager Charles Mihm, Product Engineer

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

  6. Classic Example Set

  7. Pro Example Set

  8. Ideal Web Design • Valid, standards based, and semantically meaningful markup with a complete separation of presentation (CSS), behavior (JavaScript) and content (X/HTML).

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

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

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

  12. Browser Differences • One of these kids is doing their own thing, one of the kids is not the same… • Firefox • Opera • Safari • Internet Explorer

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

  14. 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)

  15. Moving on from the technical… What can you do with the example set?

  16. Alternate Example Sets – one

  17. Alternate Example Sets – two

  18. Alternate Example Sets – three

  19. Other Ideas

  20. Tools Aptana- an excellent multi-purpose editor Firefox- development tool FileZilla- powerful FTP client

  21. Firefox Extensions • Web Developer • Firebug • ColorZilla • HTML Validator • IE Tab • JSView • Font Finder • CSSViewer • Lorem Ipsum Content Generator

  22. 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!

  23. Suggested Reading HTML Mastery by Paul Haine CSS Mastery by Andy Budd, Cameron Moll & Simon Collison

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

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

  26. Suggested Reading Bulletproof Web Design by Dan Cedarholm Bulletproof Ajax By Jeremy Keith

  27. Questions?

  28. Appendix: Challenges • Explaining the IE differences • Box model • hasLayout • Incomplete CSS support • IE 6 non native PNG transparency support

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

  30. Some boxy CSS: Microsoft Implementation: div.boxtest { border:20px solid #000; padding:30px; width:300px; }Standards Browser:

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

  32. 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…

  33. More hasLayout Resources • on having layout • Microsoft's documentation

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

More Related