Best practices in school library website design
You're a librarian, not a web designer, but you can have a school library website that meets the needs of students and teachers if you keep it simple, don't take on more than you can manage, and focus on what you know.
In order to build a good, usable website for your school library, you need to think in two very different ways. First, you need to think like a librarian. What do your patrons need, and how can you best serve them? Since you all do this for a living, that should be the easy part.
Second, you need to think like a web designer. Since none of you (I assume) is trained as a web designer, that’s going to be the hard part.
My advice — my very, very, strong advice — is to focus on what you know and are good at, and do as little of what you don’t know as possible. Since you are trained and experienced in running a school library or media center, that’s where you should be putting your professional energy.
Think of your website as an extension of your physical media center — you didn’t build that yourself, did you? Of course not, because you’re not a general contractor!
What few people understand is that building a good, usable, accessible, attractive school website that meets the needs of students and teachers is every bit as difficult and as complicated as building a good, usable, accessible, attractive school building that meets the needs of students and teachers. If people built schools the way they build school websites, there would be rooms with no doors, rooms that nobody used, and hallways that didn’t go anywhere; you wouldn’t be able to tell what a room was for or even whether the door opened to the inside or the outside of the building until you opened it; and the roof would leak every time it rained! (Well, maybe that last part sounds familiar.)
The bad news is, you can’t afford to hire someone to build and maintain your website. The good news is, you don’t need a complicated website. Something very simple will probably meet your needs. And you don’t have to do the technical work yourself, even if you can’t afford to pay a designer.
First I want to look at a couple of examples of poorly designed websites, to show you what can happen when someone gets in over her head with web design. While I hate to pick on anyone who is making a sincere effort, the librarians who created these websites have each written or spoken publicly about their work, and each website has been held up within the school library/media profession as an example of good website design. Yet each website has serious problems. I’ll use them to explain principles of usability and accessibility — the core of good website design — and then explain how you can manage a website while keeping your technical worries to a minimum.
All that glitters is not gold: Images and accessibility
At first glance, this looks very attractive. Unfortunately, the reason it is so attractive is that the designer made all of the text into images using an application like Photoshop and then posted the images on the website. It’s not all that uncommon to do this for main site navigation (although I think it’s a bad idea, as I’ll explain), but in fact, every page of the website does this.
[Pullout:Using images to display text is almost always a bad idea. ]Incredibly, all of this text is inside a few images. There are links inside the text, but they are created with something called an image map, HTML code that turns specific parts of the image into clickable links. Both the images and the image map took a great deal of time to create. It’s also a great deal of work to maintain, since changing a single word requires rebuilding images and image maps.
Despite all the work that Ms. Bussiere put into it, though, this website is extremely difficult to use — and it’s completely useless for anyone who is visually impaired. In a word, this website is not accessible.
According to the World Wide Web Consortium’s Web Accessibility Initiative,
Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.
Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities.
Most often, web designers and developers consider the needs of people who are visually impaired. The web, like most things designed for personal computers since the 1980s, is based on a graphical interface — a visual interface. If you can’t see, you can’t use a graphical interface. For the blind, there are audio browsers and screen readers that read a web page’s content aloud. If an audio browser or screen reader gets to an image, animation, or video clip, it needs something to read — a text alternative — or the user simply won’t be able to access that content.
Note, too, that visually impaired does not mean blind! Users may be color-blind or simply farsighted. If your content and design are complex, making your site accessible can be equally complex. The best path for a novice web designer is simplicity. In particular, use images wisely and sparingly.
The problem with images
What’s wrong with building your website out of images?
- Images take longer to download. Download time is an important consideration if you want people to access your site off-campus, where they may have only a dial-up connection.
- Images take far more time to create and to maintain than plain text.
- If you are visually impaired — or just over a certain age — you have trouble reading small text on a screen. Browsers let you zoom in or set a larger default font size, but if the text is in an image, you’re stuck with whatever size the designer wanted.
- In fact, it is often harder to read text in an image than to read plain text of the same size, color, and font.
- You can’t copy and paste text from an image.
Using images wisely
Of course, there are excellent uses for images, like showing what a zebra looks like. An image is worth a thousand words, the saying goes, but not if every one of those thousand words is typed into the image. Children, especially, respond well to images, but you must use them judiciously, and only to communicate something that can’t be communicated in plain text or to provide an additional layer of explanation. Emerging readers will be helped by visual clues, but high school kids, one hopes, don’t need the little chain-link clip art next to the word “Links.”
Rules for image accessibility
When you use images, you must always be aware of the needs of people with various levels of visual impairment.
- If the image communicates any information at all, include an
altattribute with a brief description of the content. If you post a photo of a zebra, your image tag might look like this:
<img src="zebra.jpg" alt="zebra">. That’s enough to tell someone what they’re missing. Not to do that is frankly rude.
- If the image contains extensive information, provide a
longdescor “long description” attribute, which links to a file with a full text description of the content of the image:
<img src="zebra.jpg" alt="zebra" longdesc="zebra.html">.
- Make images as small as practical, to speed download time. Resize the image in appropriate software to fit the desired space, rather than setting the image width and height in the web page, which will cause the browser to download a much larger image than necessary.
- Don’t use image maps for navigation unless you have a really, really good reason, and if you do use them, provide alternate means of navigation, including
titleattributes for the individual links. If you think this may be beyond your abilities, avoid the image map.
The key point is that you must provide alternate content for purely visual information. If an image is more than mere decoration, you must provide a text replacement for that image in the form of an
longdesc attribute. The same is true of audio or video. (The Sheldon-Williams site does not provide any alternate content for images — there is no text at all on the website!)
In the references at the end of this article, you’ll find more information about making images usable and accessibile. Just as your physical library is accessible to people with disabilities, your virtual library needs to be accessible, as well.
A few additional rules for accessibility
Of course, accessibility is for more than images. There are other rules and guidelines, but most of them will be useful only to more advanced designers. See the references for more information. Here are a few basic guidelines:
- Because some people are color-blind, don’t rely on color alone to mark special content, such as web links. People expect links to be underlined; except in special cases like navigation bars, underline them. Don’t use red text to mark important text; make it boldface (but see the next rule).
- Don’t make your web page do unexpected things! Don’t make your links open in a new window, for example, and if you link to something that’s not a web page, such as a PDF file, warn people that the link will require a plug-in.
- Make your default font and font size readable.
[Pullout:Accessibility guidelines can keep a novice designer from doing everything she wants, but that’s not always a bad thing. ]If some of this sounds like I’m spoiling your fun, maybe I am. But suppose I told you I was going to build my school library in a treehouse. Wouldn’t that be cool? Sure, unless you were in a wheelchair, or had a bad back, or had nearly any other kind of physical impairment. You’d tell me it was a bad idea, wouldn’t you? The same is true for your website. The important thing is that people be able to use it.
And remember, accessibility is the law. The Americans with Disabilities Act applies to school websites as much as to school buildings.
Bottom line: keep your website simple and keep your audience — all of it — in mind, and you’ll be fine.
Where am I, and where am I going? Navigation and usability
The Sheldon-Williams website has another problem, which though small in comparison to its inaccessibility is all too common on websites. On the front page, under “Quick Links,” you can’t tell which links are internal (to other pages of the website) and which are external (pointing elsewhere on the web). This isn’t a show-stopper; if your website is otherwise well designed, people will figure out where they are. But it helps people tremendously.
The need for clearly marked navigation is more obvious in a second website, the Springfield Township High School Virtual Library from Springfield Township High School in Pennsylvania.
[Pullout:Content is only as good as a user’s ability to find it! ]First, I want to say that this website is a great example of the kind of content you can have on a school library website. The variety and depth of content is wonderful.
The problem with this site is that all the wonderful content is hard to find. The front page is, again, an image map. This image is accessible (alternate navigation is provided), but I still found it hard to use. Where, for example, is the link to policies? The visual metaphor of the library is interesting, and certainly the art itself is great, but if I can’t find the link I’m looking for, I’m going to get frustrated no matter how pretty the site is — especially if I’m fourteen and struggling through a research assignment.
In addition to the links on the image, there are several columns of text links at the bottom of the front page, added in what seems to me a haphazard order. There are no headers to help me navigate the list; the links aren’t organized in any way that I can discern. This, I suspect, may be a result of having used a picture for the primary site navigation — that image is impossible to update, so new content falls to the bottom of the page.
When I do find what I’m looking for, I discover that the rest of the pages on the site have a design completely different from the front page:
Some pages actually don’t even have the banner at the top to tell you that you are still in the Springfield Township HS Virtual Library. I had to look at the URL to make sure I was still in the same website, and realistically, your students aren’t going to do this. Keeping design consistent across all of your web pages will help to avoid confusion, and it’s also important for credibility — if you’re teaching students to be information literate by knowing where their information comes from, it’s good to help them along by telling them on your website!
Additionally, some of the other pages of the website have basic site navigation, but others have no navigation at all. Some of the links in the image on the home page are to categories of content (for example, policies) while others are to specific pages (research integrity policy), and there’s no way to know which is which until you click on the link. From the Policies page, you can get to the various pages of policies, but from the Research Integrity Policy, the only link is to the main Policies page, and it’s at the very bottom of the page — hard to find and to use. Providing consistent navigation on every page, with sections and subsections, would make all the great content on this site much easier to find and use.
This brings us to the second critical concept in website design: usability. Usability is simply the extent to which a website can be used by its intendend audience to achieve specific goals effectively and efficiently. If I’m a ninth-grade student using your media center website to begin a research project, I might need citation guides, policies and information about research integrity, a pathfinder, and/or some links to good external sites such as library databases. How easy is it for me to find all of that information on your website?
Making a website highly usable is a process involving several steps:
- Your audience. Consider first what your audience needs — or what your audiences need, since you may serve more than one audience.
- Organization. Next, how can you best organize that content so that your users will be able to find it (and so that your site can grow with their needs)?
- Navigation. Once you’ve organized your content logically, you need to design your site’s navigation to reflect that logical organization. Main site navigation should be the same on every page of the site, and pages of content should provide “breadcrumbs” — links back to categories or major divisions of the site.
- Content. Finally, each page of the website
should be clearly written, well organized, and readable. Use headings so that readers can skim to find what they need. Break content up into manageable chunks, and make each major topic its own page.
Practical options: Get a blog!
[Pullout:A blog does the hard work of building a website for you, while letting you focus on what you know — the content. ]
The Springfield Township High School site does a wonderful job with step 1 of the process I outlined above. It falls down on steps 2, 3, and 4. My suspicion is that it started out with fairly clear and consistent organization and then grew faster than it could be well maintained. Many websites have this problem. They begin with the best of intentions, but if you have to create every page by hand, it’s too much work to keep up with changing navigation, categories of content, and so on, let alone to keep all your content current.
Large websites are managed with content management systems, applications that allow people to post and edit content directly on the web (or through another interface) and automatically produce navigation for the website based on ever-changing content. If you don’t have access to such a thing, you have two options. You can develop a very small website — one or a few pages that provide the basic, essential information about your library for teachers and students, with timely information added (and removed) as appropriate. Or you can use a weblog.
Returning to the metaphor of the physical building, what do you do if you need more space and you can’t afford to hire an architect and a builder to put an addition on your house? You could build something simple yourself, or you could buy something prefabricated, like a storage shed. You have the same options for a simple website: do it yourself and keep it simple, or use something that’s more structurally sound but less tailored to your individual needs.
I recommend that you do the latter, and get a weblog.
Why use a blog?
Blogs (originally “web logs” before that term was inevitably shortened to a single syllable) are designed to publish timed information, with each “post” listed under the date and time it was posted. But you can use a blog to manage a small website, as well.
- You can post pages of text and images just like you can on a “regular” website.
- The design is already done for you. You can pick a “skin,” or appearance, for your blog, that’s already been created by a skilled designer, and simply install it. If need be, you can adapt it without too much expert knowledge. For the most part, prefab blog templates already meet basic standards for accessibility.
- You can get a blog and hosting for free, if you’re not too demanding about features.
- There’s no need to FTP files to the server, and no special software is necessary; you work right on the web.
- You can post and edit content on a blog using WYSYWIG tools, so you don’t need to know HTML.
- Site navigation and contents are created automatically for you, and blogs are searchable.
- Content is dated. If you wrote that pathfinder in 2001, astute readers will not expect all of the links to work.
- Keeping a blog is a good way to learn basic HTML and principles of web design, which you could use, later, to build your own website.
The problem with using a blog for a school library website is that you are limited to certain basic options for content and navigation. It is not a highly flexible content management system. Nevertheless, you can adapt it to meet most of your needs with a minimum of expertise — no more, certainly, than it would take to build your own site from scratch.
Example 1: Blogger
To demonstrate the possibilities for running a school library website on a weblog, I created two sample websites with two different blogging services, both free. The first I created with Blogger. Blogger is a free service provided by Google; you can either keep your blog on their website or have the files sent to your school’s own server, if you can get the appropriate permissions. Several templates or skins are available and (if you know HTML) are fairly easily edited to include special links and other information unique to your website.
The basic layout is like any blog:
- Recent posts appear in the main column of the home page, newest first.
- Older posts are archived (in this case, monthly). Links to the archives are created automatically.
- Blogger provides a search for your blog (it’s Google, after all), available at the very top of the page.
- Teachers and students can comment on posts, if you choose to let them, which encourages two-way communication.
I’ve also added some custom content to make this blog more useful as a school library website.
- In the sidebar, a list of “Important” links takes you to specific blog entries (mission, research integrity policy, citation guides). I had to add these to the blog template, which is not too difficult.
- Also in the sidebar, special “Quick Links” go to outside websites of particular value. This was built into the template, but I had to add the titles and URLs of the sites myself, of course.
- I added a special form to search LEARN NC’s collection for high school students. You can do this too; see the references section of this article for the code.
- At the bottom of the page, I’ve provided the name and address of the school and contact information for the librarian.
This blog allows me (or would allow me, were I a real librarian) to post pathfinders, policies, information about special collections, and other content useful to teachers, students, and parents, in a way that is usable, accessible, and attractive, with a minimum of effort. Setting up the blog and customizing the template took me a couple of hours (it would take a novice a bit longer), and then I was off and running.
Example 2: Wordpress
[Pullout:Categorizing posts makes a blog more usable, especially as a library website, but advanced features cost money. ]One feature that Blogger doesn’t provide is the ability to categorize your posts. Ideally, I’d like to create categories such as Policies, Pathfinders, Teachers, Assignments, and so on. More full-featured blog software will let you do this; you can assign each post one or more categories, and the list of categories (which you create) appears in the blog navigation. You do the cataloguing (for you, the easy part) and the navigation and links are made for you.
Wordpress is a sophisticated publishing platform that is open-source, which means that it can be obtained free of charge and that anyone can edit its source code. If you have the right kind of server, you can download, install, and run Wordpress any way you choose. Most people don’t have their own server or web hosting service, though, and so Wordpress also provides hosted blogging, at Wordpress.com. Here, you can set up a full-featured blog free of charge. (Or nearly free of charge; certain features will cost you, as I’ll note.)
To show what Wordpress can do, I created the Fictional High School Media Center at Wordpress.com. It’s similar to the site I made on Blogger, but note that content here is categorized, with categories appearing in the sidebar.
Wordpress has far more features and options than Blogger (I won’t explain them all here). That makes it more powerful and more useful, especially if you’re running a website rather than simply keeping a diary. In addition to the ability to categorize your content, Wordpress provides several features that will help you manage a school library website:
- Note the pages linked at the top of the blog. These are undated “pages” (as opposed to regular dated “posts”), which Wordpress provides for basic information about your blog (or in your case, about your media center, your website, and your school). There’s no need to make special links to these pages; they appear automatically.
- Sidebar “widgets” let you control what kinds of features and information appear in the sidebar, such as a search form, sections of text, and so on. You can customize these features without needing to know any HTML.
- Wordpress lets you manage a “blogroll,” or list of links that appear in the sidebar. (Since my fictional media center isn’t really a blog, I renamed it simply “links.”) Again, this list of links requires no technical knowledge to maintain.
Unfortunately, although Wordpress.com lets you choose among several templates (designs) for your blog, you can’t make any custom changes to them without paying for the privilege. Whether you want to customize your template will depend on how much technical knowledge and time you have (and maybe on how adventurous you are!).
A usable, accessible website
I’m very happy with the Fictional High School Media Center in Wordpress. It follows the rules for accessibility (and would even if I didn’t understand them). It’s easy to navigate, thanks to the categorized content, the key pages linked from the top, and the search function. The appearance and navigation are consistent and usable on every page. And I didn’t have to do any technical work at all to make this happen.
Reviewing the rules: Keep it simple!
[Pullout:Manage your library website just as you would your physical library. ]Every one of these rules applies to a physical school library, if you think about it. Every one applies to a school library website as well. Whether you use a blog or build your own, keep them in mind as you design and create your content.
- Content is king! (Or queen.) Without books there is no library; without content there is no website.
- Organize your content logically, and make your visual design reflect that organization — just like the stacks in a library.
- Provide clear and consistent navigation (like the card catalog).
- Label everything clearly — be literal, not cute. (The Dewey Decimal System isn’t metaphorical. Don’t you be, either.)
- Use images, audio, and animations only when necessary, and always provide alternate content.
- Keep your design clean and simple. Use a minimum of fonts (no more than two per page) and colors. More will distract from the content.
Accessibility and usability
- Introducing Web Accessibility
- An excellent place to start learning about accessibility. Part of the Web Accessibility Initiative of the World Wide Web Consortium, which built the web and writes standards for it.
- Usable Information Technology
- Website of Jakob Nielson, the foremost guru of web usability, includes basic tips as well as in-depth research-based studies. People responsible for large school websites may want to purchase Nielson’s reports on usability for children and teens.
- Building Accessible Websites
- Online version of a book by Joe Clark includes rationale for accessibility and guidelines for text, colors, fonts, images, and more. A very thorough and usable resource.
- Designing More Usable Websites
- A compendium of links on the topic, from the University of Wisconsin.
School libraries on the web
- School library websites in North Carolina
- A list that is probably not comprehensive. I haven’t looked at all of them; if you do, judge them by the content and how easy it is to find — don’t be taken in by a pretty face!