A Slight Frustration- Libraries and the ‘Net

I’ve been working on redesign of our library website.  Now I’m not a professional…at all and nearly everything I’ve learned about web design is stuff I’ve picked within the last year so take whatever I have to say with a (very minuscule) grain of salt.  I’ve gone from a straight HTML design to xhtml to PHP (which is where I’m staying dammit!) all three enhanced and spiced up via CSS.  Now one of the main tenets of CSS is the obligatory “Tables are Bad!”  At least from a design perspective.  Tables are to house data/information and SHOULD NOT be used in the LAYOUT of a web page.  Which is where CSS comes in.  Admittedly designing a layout via CSS that is accessible and (nigh) identical across a variety of browsers IS a bit of an uphill battle but the payoff, especially in terms of code simplicity,  is absolutely worth it.

In order to fuel my erstwhile designing I’ve been visiting a number of (mostly local) library websites in order to get a feel not only for how they have their websites laid out but for how they handle their coding as well.  Unfortunately what I’ve noticed is an increasing divide between current Web Design (from the professional world) and Web Design (in the library world).

Take a look at Princeton Public Library’s web page. I admit their design is attractive but a glance at their code reveals that, while readable, it lacks in some areas.  Most of the major content is delivered via tables, contains a fair amount of inline styling (again with the tables in particular), and a uses bunch of repeated code (header and footer).  Even if you didn’t want to use CSS for layout you could move the inline table styling to a style sheet (especially since most of the tables are contained in a div with a unique id).  Furthermore switching to PHP would allow a simple include once call for both the header and the footer leaving only the major content of each page.  I simplify of course, it is probably slightly more complicated than that, but designing an elegantly coded well designed page is within reach.

In terms of content PPL is a great example, I’ve seen some truly disgusting designs out there, and melding design with content, especially for libraries in this age of integrated services, isn’t exactly an easy task but that doesn’t mean that current web design practices and standards are inapplicable to libraries.  I’ve developed almost a perverse habit of running library websites through the W3C Validation service and have been almost universally disappointed with the results.  I suppose I’d have more to complain about if the choice in coding actually interfered in the operation of the web pages in question, as of now it doesn’t, but I still find it a little depressing that, if not out right ignored, current Web standards seems to be such a low priority for library web pages.

There is more I could say on this, but I’m already rambling and I have a stack of magazines that need to be checked in and shelved, so maybe more later.

Also if anyone knows of any literature, from either side of the information world (web designers/analysts, librarians, etc.) that discuss this please feel free to point in that direction.

CSS Stupidity

Well I wasted a whole morning on this.  See I have an imagemap of the library I work at. Clicking on a section of the map brings up a description of a collection and a search box specific to that area (or a link to the relevant area on the webpage). I decided today that I wanted these pop-up sections to have a translucent background. After a whole morning fiddling around with -moz-opacity, alpha filter, and opacity I threw in the towel and reverted to my old opaque background. You see, apparently setting opacity in CSS automatically applies the same setting to child elements.  Which, under normal circumstances wouldn’t be a problem since typically you can specify a different value for these child elements, or add a class or id with the differences.  Unfortunately, in the current version of CSS, opacity (once set) can’t be changed in child elements AT ALL.  There are several workarounds but (transparent PNG, tricking the cascade, etc.), IMO, they are all just bloated code. This is especially true given that my desire for a translucent background is entirely ascetic and doesn’t impact the function of the feature at all.  I’ve seen several mentions of using javascript to set opacity but again that seems to me a violation of the whole principle of separating structure, style, and function. Blah!!

I look forward to some of the CSS3 element currently being worked on.  Border-radius and  and RBGA can not come fast enough.  Lord knows when CSS3 will be ready, or even fully implemented in other browsers though.  I haven’t been paying attention too closely myself but after today’s opacity debacle I’ll be sure to keep a closer eye on developments.

CSS punch to the face

Today’s lesson:

When using absolute positioning (position:absolute;) for an element within a container div the the container must have a relative position (position: relative;) in order for the absolutely positioned element to be correctly positioned with said container.

….And it only too me 48 hours to learn that.   I could make that clearer, and even include an example, but f**k you guys.