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

Classic Example Set

Pro Example Set

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?

Alternate Example Sets – one

Alternate Example Sets – two

Alternate Example Sets – three

Other Ideas

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 ReadingHTML Masteryby Paul Haine

CSS Masteryby Andy Budd, Cameron Moll & Simon Collison

Suggested ReadingDOM Scripting

by Jeremy Keith

WEB Standards Creativityby Cameron Adams, Mark Boulton, Andy Clarke,

Simon Collison, Jeff Croft, Derek Featherstone, Ian Lloyd, Ethan Marcotte, Dan Rubin, Rob Weychert

Suggested ReadingTranscending CSS: The Fine

Art of Web Design by Andy Clarke & Molly E Holzschlag

The Principles of Beautiful Web Design

By Jason Beaird

Suggested ReadingBulletproof Web Designby Dan Cedarholm

Bulletproof AjaxBy Jeremy Keith

Questions?

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.