(Not The) Lawrence Public Library...Why?LibrarianGeek Home

image1 image2 image3 image4 image5

About this project

Inspiration

The current Lawrence Public Library site, at http://www.lawrence.lib.ks.us/, is laid out primarily using tables. There is a large chunk of javascript code driving the rotating banner images at the top of the template, and the layout has a distracting, busy feel to it, making it difficult to focus on a single area of the page.

Approach

I wanted to design a page template that would use server-side include files for the header, footer, left navigation column, and right navigation column. I also wanted to extract as much of the javascript out of the page as possible, and call javascript files from within the header.

Javascript

I first copied all of the javascript on the home page into a separate file, essentially extracting it and making it easier to reuse.

Accordions

As I began laying out better structure for the sub-pages, such as Books in a Bag, it made sense to add an accordion to collapse and expand the content in discrete sections, making it easier for the user to quickly scan the content and select a section to view with a single click.

A benefit of using accordions to manage content this way is that it is still accessible to users who are using a screen reader, in that all of the content is available, and it is structured logically (moreso than if it was laid out in a table).

Slideshow

The existing slideshow javascript was clunky and complex, so I chose to use a jquery cycle.all plugin instead. I have used the plugin before, and it is easy to implement, requiring only 5 lines of javascript within the document, and a div tag with a list of images to display within it.

CSS

I discarded all css from the existing site, as there wasn't anything particularly useful or attractive in it.

Some minor changes and additions to the appearance included:

  • Image alignment using the "img_cap_right" and "img_cap_left" styles
  • Creation of list styles including "spaced" and "spacedNobullets", which add extra margins to the list items, and allow for non-bulleted lists
  • Div and span styles for document type icons, (class="pdf", which appends a pdf icon to the beginning of the links), and contact type icons, which append either an envelope (class="email") or telephone (class="phone") image to contact information
  • Creation of an "indented" class, which adds a 40-pixel left margin to the content

Blueprint

The Blueprint CSS framework allows a site to be laid out in columns, without the need for tables to manage structure.

For this project, the site is laid out 950 pixels wide, with 24 30-pixel columns and 10-pixel margins between them. The left and right columns are each 5 columns wide, leaving 14 columns for the main content in the middle section.

The stylesheet for the Blueprint layout is grid.css.

Javascript CSS and Validation

The accordion menus come with custom stylesheets (ui.accordion.css, ui.core.css, and ui.theme.css). One issue with these stylesheets is that they contain some browser-specific styles, such as "-moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/;", which are not considered valid styles in CSS2. These styles do not render in Internet Explorer, but they do not affect the functionality or content of the page, just the appearance; in this case, borders on the accordion sections are not rounded like they are in Firefox.

Layout and Appearance

Navigation

In the current site, library services and information are in the left column, with events highlighted in the right column. I decided to leave the structure this way, but wanted to modify the blue section boxes to make them less obtrusive.

The current sections are not in a hierarchy (h1, h2, h3, etc.); the section headings are bolded to make them stand out, but this is not good practice for helping users quickly identify headings. In the revised site, the sections are level 2 headings (h2), which should also assist screen reader users. The headings are no longer blue, but are offset from the navigation links with a different font color and size, and a gray background with a dotted bottom border.

The navigation links are now better spaced, which helps to prevent a user from missing their target and accidentally clicking a nearby link.

Header

The original site has the new library logo on the top left of the page, a rotating banner image in the center section with social tools icons below, and the library events calendar even with the top of the page on the right side.

I moved the social tools icons into a separate section on the right, above the calendar, and shrank them to make them less obtrusive. Keeping the social icons near the top of the page is more important for a public library, where users may be interested in easily subscribing to updates and checking out the most current updates about the library.

The library logo image contains the text "Lawrence Public Library", but there is no level-one heading on the page, making the site a fail in terms of accessibility. I added a text header to the top of the page, which will immediately clue users in to the name of the site they are visiting, including screen reader users.

Footer

In the original layout, the library location and hours information is crowded together on three lines at the bottom of the center section, where it feels lost and is difficult to read.

I added a distinct footer section as a server-side include file, and styled it with css. It is now better spaced, with three separate sections for address, phone numbers, and hours information. A horizontal line visually separates the content from the rest of the page without feeling obtrusive.

Stay in Touch With Your Library

Library Events