Remaking Your Web Site in Seven Easy Steps

We've all heard that the Internet is a great communication tool. But unfortunately, it's hard to tell what most children's library Web sites have to offer. In fact, many school and public library sites are unattractive and ineffective.

Here's how to create a terrific site that is easy to navigate, presents clear information, and provides links to great Web sites, while giving users quick access to your catalog and subscription databases. You'll end up with a site that conveys the implicit message that libraries are essential and that skillful librarians are ready to guide students, teachers, and parents through the overwhelming world of information.

Follow these seven 'commandments' to get started on a successful Web makeover:

1.   Create a standard template to ensure that every page has a consistent layout and style, and is readily identifiable as part of your site. Every page should include your library's name and logo (keep them small) and a navigation bar (on the top or left-hand side of each page) that enables visitors to move easily throughout the site. To make sure your site meets these basic requirements, try the 'search-engine test': if a page that's buried deep within your site-say, a booklist or a toddler-time calendar-was to turn up on Google or on another search engine, would visitors know immediately that it was your site?

2.   Put yourself in your users' shoes. Find out what they most want from your Web site. Kids always want public libraries to provide a page of links to online games, and students want school libraries to offer a list of online resources that's tied to homework assignments. Both public and school library Web sites should always provide annotated lists of homework sites and recommended books by grade level.

3.   Organize all text into brief chunks. The most important bits of information should appear as soon as an online visitor arrives at your home page. And almost every paragraph on your home page should include at least one hyperlink. Why? Research shows that online visitors spend 90 seconds or less viewing a page. They want to find the information they need, and move on quickly. Also, make sure that your home page includes those things that are most essential to what your library offers, including links to available databases with brief descriptions.

4.   Get rid of all generic clip art and animated images, or GIFs. They distract viewers, and generic images say nothing about your particular library. Instead, use small digital photographs (no larger than 35K) and other images, such as your logo and mascot, which are representative of your library and its personality. To assist visually handicapped users, be sure to accompany each image with an 'ALT' tag-those are the tags that display small boxes of text over each image when you place your mouse pointer on the picture.

5.   The more your site's pages resemble the pages of a book, the easier they will be to read, especially by those who are visually impaired. Make sure that every page has a white background with black text, or at the very least, that there is sufficient contrast between the background and text. Avoid using a textured or multicolored background, as well as light-colored text against a black background.

6.   Follow the 'cat box' rule. If you want frequent visitors to your site, you must keep changing it. Most resources on your site should be permanent, but there should also be a place where there's new information-seasonal, topic-related, or fun stuff that remains on your site no longer than a month.

7.   Design your pages so visitors can tell your library is the coolest ever, and they could miss something important if they're not regular visitors. To do that, explain in simple, user-friendly language what your library has to offer. If possible, try to include something on your home page that no other site has.

The following real-life scenarios demonstrate how to put the seven rules to work. In the first example, I redesigned a public library's children's and young adults Web site. In the second, I started virtually from scratch, building a school library's site. Both sites endeavor to deliver what their users want in a clear, easy-to-use, and enjoyable way.

My plan was to turn the site into one that would help kids, teens, parents, and teachers locate the information and tools they needed quickly and easily. You can see what I did by visiting BPL's old children's services Web site (www.futuris.net/bpl/ys/burro.htm) and then comparing it to the new site (www.bridgeportkids.org).

Bina Williams, one of BPL's children's librarians and the creator of its original children's Web site, knew that the site needed improvement. She took my proposal for a Web makeover to her boss, BPL Director Michael Golrick. Much to his credit, Golrick recognized that BPL's entire Web site needed a redesign, and eagerly accepted my offer to create a template for the site. To help make the site more attractive, he gave me a CD-R disk full of digital photos of the library at work.

I began the makeover by creating a template using Macromedia Dreamweaver (see table of recommended software), a popular Web site management program that BPL had already purchased. The template ensured that every page would have a consistent layout, as well as a uniform style for text, links, and the placement of visual images. I made it easier to find the navigation bars by placing them on the left side of each screen, in a narrow column about one and three-quarters inches wide, or 125 pixels across. Web text and images are typically small-they're often tiny fractions of an inch-and it's easier to work in pixels, the discrete picture elements that make up an image, than in inches. There are 72-75 pixels to an inch.

Using the City of Bridgeport's logo-a gold tree with stars as its leaves-I created a banner, 622 pixels long, across the top of each Web page. The banner's width was 71 pixels, or a little less than an inch, so that it wouldn't take up a lot of the site's precious on-screen real estate.

Studies have shown that visitors' initial perceptions determine whether they stay or leave. So I included a number of links on the children's home page, as well as a photo showing young children and parents having a great time at a story hour and a bright children's logo that appears on every children's service page. I avoided using long expanses of text. Instead, there are short statements, such as 'We Help You with Your Homework!' and 'Parents-We Have Fun, Activities, and Answers,' that include links to other children's pages.

Each page has a white background, black type, and wide margins-the easiest kind of page for people of all literacy levels to read. Dreamweaver let me easily create what's called a Cascading Style Sheets document for the entire site. That means that all of the text, including the headlines and subheads, is in the same font and the appropriate typeface. Of course, the true value of any Web site is in the information it offers, and the library has pledged that its links will be checked regularly, each link will be annotated, all booklists and lists of Web sites will be annotated and alphabetized, and new information will be added regularly.

Rodeph Sholom School. Rodeph Sholom, a small, private, Jewish K-8 school in New York City, didn't have a Web site until recently. A couple of parent volunteers created an attractive site, designed not for students, but as a recruiting tool, aimed at parents of prospective students. Sharon Elswit, the school's head librarian, loved the idea of using the Web to share information with students and their parents. So I offered to build a site that would do just that. You can visit it at www.rodephsholomschool.org/library.

I created the template and files for Rodeph Sholom's library site using Dreamweaver, the same site management program used in Bridgeport. That made it fairly easy for me to get 'under the hood' and modify the site's style sheets and HTML (Hypertext Markup Language), the code that tells the Web browser how to display words and images. I retained the original pages' deep indigo background with light-colored text (as much as possible, I wanted to respect the site's original design), but I added a large table cell, or overlay, with a white background and black text, so the information was easier to read. Like the Bridgeport Library, Rodeph Sholom had recently purchased a digital camera, and I placed photos throughout the site that Elswit had taken. I wanted to emphasize the enjoyable learning environment.

Elswit would love for users to be able to access the library's catalog from home, but the software isn't in place yet, and won't be until fall at the earliest. But that doesn't mean there hasn't been any progress. Now students can find all of their summer reading lists online, along with Elswit's recommendations on how to use them. The lists are available as compact, easy-to-print PDF documents, which give kids and parents the option of printing them out. The lists can, of course, be printed as seen on-screen, but the HTML format consumes a lot more paper.

Rodeph Sholom's library site includes an ever-changing column of recommended books and sites on Jewish history and culture, with a photo of the library's mascot, Solomon the bear, busily reading. There's also an annotated list of Web sites that are geared to the school's curriculum and arranged according to grade level. With her middle-graders in mind, Elswit has created a page of research tips for using the ProQuest database, Google, and other online tools. The Rodeph Sholom community is eager to keep its traditions alive, and there's an online history of the school's library. I think the Web is a great place for schools and other institutions to post their histories. Let your community, whether large or small, see its roots and story.