TFML website redesign

New TFML HomepageI spent some time redesigning and restructuring MPOW’s website. The old site wasn’t getting much attention from me because I couldn’t stand to look at it anymore. The only way to update it was to rip is apart and start over. The bad part about it is that the navigation suffered a bit, I think, but I’ve got a plan to make it better.

The good part is that the site looks so much better, and is now ACTION ORIENTED and USER CENTERED. So instead of “Readers’ Advisory,” users see “find a book or movie.” Instead of “Adult Services,” “Young Adults” and “Youth Services” users see “adults,” “teens” and “kids.”* It is still fully liquid and scales down decently to 800×600.

I’m really tickled with the corner banner reading “support your library” which Brian points out is a visual metaphor as well, holding up the webpage. If you want to put a corner banner on your site, here’s the code I used:

<div style="position:absolute;top:0;left:0;float:left"><a href="PATHTOLINK"><img src="PATHTOIMAGE" /></a>

Also, here’s a link to the support your library gif [via]

It is a small touch, but I gave people the choice of three font sizes on the page. That is, if people are aware what those As on a page do.

Also, now that it doesn’t look like junk, take a look at our Click-A-Story page. It’ll be interesting to see if anyone uses it as a podcast, if people will just listen in their browsers.

I still have a huge laundry list for the site. Some of it is wishful thinking at this point, some of it is very realistic:

  • better action oriented nav
  • integration with OPAC (not holding my breath, but since John Blyberg has written some great code for the Innovative ILS, maybe I can get SWAN folk at the MLS to work with me at some point.
  • visual cues for being in a certain (age-based) section of the site. i don’t think it should be difficult to find some suitable color changes in the CSS. Also possibly a big, fun, “FOR KIDS” gif placed by the banner for the YS pages
  • breadcrumbs leading back to a page’s ‘parent’ (i.e. teen news >> homework help) displayed on each page. this will be simple to do if I make header includes for each department
  • better looking middle column content, without sacrificing its legibility
  • conversation! I didn’t want to tackle enabling comments right now. easy to do technical wise, but it’ll take some time to formulate and write a policy. this one is important and we’ve gotta get it right.
  • more content. the hard part.
  • expose RSS where it exits. the site needs some orange gifs, har har.
  • etc, etc…

We’re going to start a formal process of planning the next generation of our website in January. Participants will include a board member, four staff members and two or three members of the community.

Now that you’ve read the words, you can see some images with annotations in my flickr set new TFML site. Let me know what you think, feel free to point out anything you think is bad, and of course feel free to write me some CSS to accomplish anything I’ve listed above :P

*note: I got the okay from the head of Youth Services to use the word “kids.” I know sometime YS librarians see the word as derogatory.

UPDATE: you too can try this at home. there are many great open source and public domain CSS layouts available on the web. this one is from ruthsarian layouts. also take a look at blue robot.

3 thoughts on “TFML website redesign”

  1. Okay, so I’m a bit late to the commenting party, but it looks great (and works well, too, I have to say). I esp. like using “kids” and “teens.”

Leave a Reply