Website Design Notes

skip navigation bar and jump to content
Leeward Community College Library
Highlights of the new library website design:

The library website serves several audiences: people who want to find information about the library and its services; people who want to use library resources to do research; and people who want to learn how to use the library. Rather than having a single website that tries to serve everyone's needs, the library has three interconnected websites that are tailored to the needs of each of these audiences.

The "About the Library" view brings together information about the library's services, resources, and policies. Self-explanatory links to frequently-sought information, like library hours, location, contact information, etc., are placed near the top of the page.

The "Research Tools" web page presents links to the library's online research databases and information resources. The page is organized by the types of tools or resources. Because we serve searchers with different levels of experience, brief descriptions and notes are provided to indicate what each of the tools do, or what they would be useful for. The descriptions are deliberately brief, to keep the list compact so that experienced researchers can quickly access the tools they need. For people who desire more information or need additional guidance, links are provided to other web pages with more detailed descriptions of these tools, and more information about the research process. Links to information about print resources are also provided.

Because the library has an active library instruction program, which includes self-directed online information literacy courses required by many English courses, a separate page was created to serve students in those classes, as well as those looking for information about using the library and its resources.

The top level "home page" mainly serves to direct users to one of these three views. However, direct links to frequently-accessed information are also provided. This page is designed to display without scrolling at common screen resolutions.

Web pages are designed with accessibility in mind. Links hidden near the top of the page allow users of screen-reading software to skip over navigation links to go straight to page content. On some pages, additional hidden links are used to aid navigation on the page. These links are also used to aid navigation on the mobile browser view of the website. All meaningful graphic images have text descriptions or text alternatives.

After viewing a variety of fonts on different popular web browsers, Arial at 15 pixels was chosen as the default screen font for page content. It was found to be easily readable, even in browsers that don't automatically smooth the display of fonts.

Current web-authoring practices are followed for creating new web pages. XHTML code is validated before publication, and CSS is used to control formatting. Headings and sub-headings are marked with appropriate tags (i.e., H1 for major headings, H2 for headings below major headings, etc.), to enhance accessibility and facilitate automated analysis of page content. HTML tables are not used to control formatting on newly-created pages.

Pages are automatically reformatted for printing in compliant browsers. The print format enhances readability by specifying margins and print fonts. It also reduces the space taken up by page titles and navigation links, and keeps large images (such as maps of the library and campus) constrained to a single page.

Mobile browsers that recognize the "handheld" media code will automatically reformat pages for a small screen. This is done with a special style sheet to reformat regular content, rather than by presenting a simplified version of the regular page.

The standard page layout is less cluttered, more flexible, and easier to maintain than it was in the previous library website. Navigation links are limited to links to the major website sections, the library and college home pages, and other pages related to the content of that particular page. Links that do nothing, because they just retrieve the page you're already on, were banished. By restricting navigation links to the top and bottom of the page, the full width of the page is available for content.

The website is designed to accommodate a range of screen resolutions. On smaller screens with a horizontal resolution of at least 800 pixels, most pages can be viewed without horizontal scrolling. On higher-resolution screens, page content may readjust itself to use the full available width of the screen, thereby reducing the need for vertical scrolling.

During development, the design of the website was viewed in the Internet Explorer (vers. 6, 7, 8), Firefox, Opera, Chrome, Safari, and Lynx web browsers.

Mobile Website Update (April 2011) – After formatting for small-screen displays was incorporated into the library website in the Spring 2010 redesign, we discovered that most, if not all, mobile browsers on currently-sold smartphones ignore the "handheld" media code, which is intended to signal mobile browsers to use an alternate stylesheet designed to make content easier to read on a small screen. Mobile browsers now make it possible to view regular web pages by zooming and scrolling, and some browser designers feel that smartphone users prefer to view a regular web page than a mobile version of the page.

In light of this discovery, work on mobile user support was put on the back burner, and the idea of forcing mobile users to view a mobile version of a website was reexamined.

Since then, the librarians have become aware of several developing trends. The use of smartphones is expanding rapidly. There is also a trend for libraries to deliver services to mobile users – not necessarily a re-creation or repackaging of the regular library website, but the kind of often-sought information and services that can quickly and easily be accessed on a small mouseless interface. We became aware that, despite what mobile browser developers might think, mobile users don't like having to zoom and scroll a lot to access information. Also, the UH libraries developed a mobile web interface to the Hawaiʻi Voyager online library catalog, and research database companies have started to develop mobile interfaces for their products.

The library has developed a mobile website, with links to information such as library hours, location, contact information, and a brief listing of services and resources, presented in a small-screen friendly format. It also has links to the online databases and guides that offer a mobile interface. Use of the mobile website is optional, so mobile device users still have the option of viewing the regular website.