Announcing the CSS Zen OPAC
It's time for a CSS Zen OPAC. Remember the CSS Zen Garden, and how that changed your opinion of what's really possible with CSS? If you look around today, you'll see many libraries experimenting with slicker new user interfaces for their data (if you haven't seen any for yourself, see Ryan Eby's post, which is Solr-specific, but there are also plenty of non-Solr projects doing the same thing, too). Right now, though, a lot of the experimentation is being done by us #code4lib types - usually systems folks comfortable with coding but not necessarily the best design eyes.
One thing we could do to push the boundaries further is a CSS Zen OPAC (Garden) - think about if the HTML sitting behind the CSS Zen Garden were an OPAC screen? Think about all the crazy ideas that might bubble up if we could throw a cleanly-designed, thoughtfully semantic-html OPAC screen up and let the world's best graphic designers and CSS gurus explore new directions and designs.
It's one thing just to have nice facet boxes, and clean record layouts, and helpful links and navbars and so forth. But we've all seen that now. What else could we do?
A side benefit of such a project could be converging on some semantic html patterns for OPAC markup - an OPAC macroformat, perhaps, or perhaps a handful of cooperating microformats.
Maybe we could change opinions of what's possible with OPACs. What do you think?
Ross (not verified) on July 25th 2007
Ok, I'm willing to throw my OPAC into the ring here. You're right; I'm a developer, not a designer.
First things first, though.
I need to know how to mark it up.
Because I'm not a designer, I'm not even sure where to begin to assign ids or classes to best exploit the CSS garden.
Anyway, if someone would be willing to tell me how it needs to be marked up, I'll set up a means to upload stylesheets for a garden.
Any takers?
dchud on July 26th 2007
Hmm, maybe we should just pick a place to work on this, and we could solicit 3-5 other example screens like yours, and go from there? Hopefully there will be some common element/id/class patterns or at least some that we think are a good starting point.
For now, if anybody else is interested in submitting a sample query result page like Ross's, just post a link here in the comments.
Josh (not verified) on July 26th 2007
A few points:
A CSS Zen Opac would actually need to encompass several pages (home & search, results, item details)...ideally, these would be ajax-powered when live, but you could simulate all this in one file with some DHTML + Javascript in the header (or just several static pages pointing to a single stylesheet).
As for the actual page elements, I think you could distill down essential elements pretty quickly. For example, on a results page, you'd want nested unordered lists of facets (with greeking in place of actual text) and a single ordered list of results (and for each result, the standard metadata field options, as well as standard functionality links and a book cover, etc)...you can follow the css zen garden page for actual naming conventions.
I'll mull this over and see if I could come up with a first pass, partly just as an exercise for myself...
dchud on July 27th 2007
I agree that we'd need to cover a few different screens, but then again, to get some momentum going for this as a project, it might be easiest just to focus on a results list/browse screen at first and then go from there. Encouraging more folks to jump in by keeping it straightforward at the beginning, etc.
Awesome that you're going to take a first pass! I was thinking of looking at several of the screen that Ryan pointed out, and VuFind, PINES, and NCSU's endeca implementation for starters. And then take a rough cut at integrating sensible class names and ids from those as appropriate...
Emily (not verified) on July 31st 2007
You'll find some ideas for class/id names on the NCSU endeca site. We obviously tried to use css for styling as much as possible, but some of the choices we made were geared toward our specific needs, rather than generalized classes that would be useful for any OPAC.
We'd love to see some better design ideas grow for library OPACs!
Peter Murray on July 30th 2007
The problem is that a title like "Announcing the CSS Zen OPAC" makes it sound like it's been done, not a call to get it started. I agree with Dan that we should just start with one page -- and the index-browse/search-results screen is the best place to begin. Have a shot at it, Josh, but don't wait too long before showing us what you've come up with; it doesn't have to be perfect right from the start.
Josh Greenberg (not verified) on August 03rd 2007
I've gotten into this a bit, and should have a first draft up by the end of the weekend. A question, though; does it make more sense to choose a canonical work and put in actual data, or use pure Lorem Ipsum as filler content? I've been building up using greeking, and it doesn't quite look right (especially the facet menus)...
Post new comment