6 Steps to Create a Great School Library Website

6 Steps to Create a Great School Library Website - A School Library Website is the virtual version of the School Library and the School Librarian. It's also a powerful advocate for our services and materials. Follow these 6 steps to create a School Library Website that's a valuable information resource for the entire school community. #NoSweatLibraryA School Library Website is our most valuable online presence. We may have a blog, social media accounts, and resource links on proprietary services, but none of these will serve our students and our community—nor advocate for the school library—the way a School Library Website can.

Creating any website happens not with the tips of the fingers, but in the depths of the brain. It isn’t the result of fancy software, but rather of good planning. School Librarians aren’t professional Web designers, so here are 6 recommended steps to create a great School Library Website.

1. ESTABLISH AN IDENTITY & USE IT CONSISTENTLY

Viewers should know exactly who we are, and after following a link, should know that they’re still within our school library website. That doesn’t mean every page looks the same, but identifying characteristics are consistent throughout the site.

Decide on a theme to clearly convey our identity: the graphics and the color set (an eye-catching combination of colors for images, background, text, and links). School colors, the school mascot, and library-related images—books, the alphabet, numbers—are an obvious, but excellent, theme for a school library website.

Choose the main identifying image and colors for the homepage, and complementary graphics and colors for sub-pages. For example, we could have school mascot images in school colors, then use a light outline of the mascot for a background image. Or, we could have books, singly or in stacks, then use ABCs or Dewey decimal numbers as a border or background.

Sample images of Bronco school mascot as website images

Flashy graphics won’t help an inconsistently applied theme, so keep it simple and be sure that viewers see “us” on every page of the site.

2. SUPPORT THE NEEDS OF OUR USERS

School Librarians know their users and are responsive to their needs; successful school library websites are the same. Students, parents, and community members visit our site for information about the school and the library: they want to know what’s going on, how we can help them, and how they can get in touch with us.

Provide the school library phone number and all staff email addresses on the homepage, and include our School Librarian email on every page. Parents and students don’t want to click through several pages before they can send an email to us.

Our student requests and parent emails can pinpoint what information to offer on our school library site. We can also ask the school’s phone receptionist what information our community requests most often.

Instead of duplicating existing information, link to District webpages for book searches, online resources, and other district services. Web users know how to use a browser, so insert a short message under the link inviting visitors to return to our page by using the Back button. These intra-district links promote interactivity and support the entire school district. (And relieve us from having to keep them updated!)

Teachers usually have their own webpages for instructional purposes, but we can determine what students may need from the school library to support their classroom learning and provide links from our homepage to that information.

Mapping out what to provide and how to provide it will save time and effort later. All websites change over time, but we want that due to changed user needs, not because the site didn’t meet user needs in the first place.

3. CREATE USER-FRIENDLY NAVIGATION

A school library website provides quick access to information through well-planned site navigation. Our site may start small, but imagine the complexity when we have webpages for information, for instruction, for student projects, and for various programs and activities. By developing a good navigation system now, our viewers quickly get what they need, and we can easily insert new pages of content as the need arises.

Create a site map to organize information, grouped by users or topics. A site map can be a simple outline with sub-pages indented from top level pages, or it can be sets of bullet lists, or we can use a table with colorized cells to identify similar types of pages. Make it easy to add new types of pages so site navigation continues to be user-friendly.

A site map is also valuable for web viewers. It’s like the table of contents or index of a book—it shows what’s there and where. By linking each page of the site map, we provide another navigation tool for visitors.

Determine the hierarchy of the website and create page templates for each level of navigation. We might want the homepage to have very few links—10 links is the most we can expect young students to comprehend at a time. For higher grade levels, we can provide more links so students can scan the full range of available information to find a specific piece.

  • School Library Website few-to-many: For a school library homepage with few links but numerous support pages, create a unique homepage, a different unique template for 2nd-level navigation pages, and 3rd-level templates for each identified sub-group, using the same template for all a particular group's pages. #NoSweatLibrary #schoollibrary

    click to enlarge

    For a school library homepage with few links (1-6) and numerous support pages, create a unique homepage, a different unique template for 2nd-level navigation pages, and 3rd-level templates for each identified sub-group, using the same template for all a particular sub-group’s pages.
    linebreak

  • For a school library homepage with many links (10+), but fewer links off 2nd-level pages, create a unique homepage and a different unique template for each group of lower level pages. Use a unique icon on the homepage for each link to its 2nd-level page so the distinctive identity of each group is carried through all its sub-level pagesAs an example, school library pages can have books, student instructional pages can have pencils, school events pages can have yellow stars, student clubs can have notepads, parent pages can have apples.

The real test of site navigation is what happens below the homepage. Don’t expect viewers on bottom-level pages to return to the homepage and then re-click through the same intermediate pages. Use a chain of links (called breadcrumbs) in the same place on every page showing the navigation:
Homepage↔2nd level page↔3rd level page↔Current page.

4. LAY OUT PAGES FOR EASY READING

We want pages to catch viewers’ attention so be creative with page layout, but don’t confuse viewers; rather, give them the information they need. The better we do that, the more likely they’ll use our website again and again.

Analyze how text will be most readable: a busy background image would be unsuitable behind a lot of text, and don’t use a dark background and light text color on a page we expect to be printed out.

Here’s a basic rule from print: use margins and empty space for balance and symmetry. Our eyes see empty space as a block, just as we see a block of text or a block image. An eye-catching webpage uses empty space to highlight page elements and enhance readability.

The human eye encompasses about 4″ of text at a time, so text stretching from one edge of a browser window to the other is difficult to read. Blockquote margins make heavy text pages easier to read by indenting sections of text, creating a larger margin on both sides of the page.

Creative Webpage table layout example - Tables are a tool with enormous variety for webpage layout. Using merged cells in rows & columns can make unique designs. #NoSweatLibrary #schoollibraryTables offer enormous variety for page layout. We can adapt an appealing table layout from anyone’s webpage—HTML is open source. One disadvantage of tables is that navigation inside tables may not be readable by machines for the disabled, so provide text navigation at the bottom of each table page.

Size, shape and color of text areas can convey our theme, and highlight or contrast with our images. Text in bright crayon-box colors suggests children, while dark, grayed colors suggest maturity and stability. Just be sure text is easy to read.

Note: A browser displays text in fonts that are installed on the viewer’s device, so use standard fonts, such as sans-serif Arial, Helvetica, or Verdana, or the serif Times New Roman. Since serif fonts don’t display well on computer screens, use sans-serif fonts for small text.

5. CRAFT PURPOSEFUL CONTENT

Viewers come to our school library website for information, and if they don’t get what they need, flash and glitz won’t bring them back. Pack essential information into well-organized segments, and write clearly and concisely; give the what, where, when, why, who and how. Then, cut it in half: our webpages aren’t the place for flowery writing.

Web users prefer concise, 2-3 sentence sections, with topic headers, so they can scan for the information they need. Use bullet or numbered lists to focus the eye on specific points.

A question-answer format is user-friendly, so create FAQs—Frequently Asked Questions—pages. Add information that might be needed when the school is closed.

6. USE GRAPHICS WISELY

A school library website filled with images can have charm and impact, but they can overpower the viewer. Use graphics to enhance the theme and identity of the website, and bring clarity to content. There are 3 types of images we can use on webpages: GIF, PNG, and JPEG.

  • GIFs (Graphics Interchange Format) are clipart-type images. Some are animated by a string of movements which cycle continually, or cycle once and freeze on a single image.
    A single animated GIF at the top of a page punctuates a theme and adds a bit of whimsy. When the visitor scrolls down, animation scrolls off the window, so a viewer is not distracted while reading. On navigation pages with little text, we can use more animated images because the viewer spends too short a time on the page for movement to become annoying.
    linebreak
  • PNG (Portable Network Graphics) was created as a replacement for GIF and supports a wider range of colors. It’s the most widely used format on the Internet.
    linebreak
  • JPEG images (Joint Photographic Experts Group) are typically photographs, with subtle shading and blending rather than crisp lines.

Size of Images

Webpage example with Icon Links - Icons are small GIF or PNG images, about 24-32 pixels square. Visually descriptive icons can represent various links, especially if the icon is carried through to the page being linked to. #NoSweatLibrary #schoollibrary

click to enlarge

Icons are small GIF or PNG images, about 24-32 pixels square. Visually descriptive icons can represent various links, especially if the icon is carried through to the page. Intuitive icons, such as arrows, help navigation when used consistently throughout a site (but always provide text links at the bottom of a page for accessibility by the disabled).

Digital camera photographs can enhance content, but remember that school district access may be faster than that of a visitor. Photos that display quickly on our workstation may load slowly for visitors, and several on a page can take much longer than viewers want to wait. (Average wait-time is 10 seconds before clicking away.) For faster loading, use an image editor to reduce the file size and limit large photos to 1 or 2 per page.

For better page balance, we can change the viewing size of an image. A large image can easily be reduced, but maintain the aspect ratio to avoid distorting the image. Avoid enlarging small images, which causes blurring and pixelation.

Placement of Images

Where we place images on a webpage can enhance or undermine a page. A right-facing graphic looks better on the left side of a page, and a left-facing graphic looks better on the right side of a page. Use an image editor to flip an image for better orientation.

Webpages are more 3-D than printed pages. We unconsciously experience gravity, and our senses are jarred by composition that ignores it. Place weightier graphics further down the page than lighter ones or balance them with heavy text areas.

Pages are often longer than a single window, so if a webpage looks odd, try rearranging text areas, graphics, and empty space for better balance within each window.

Include ALT tags for every image

What are ALT tags? ALT stands for “alternative text” and is part of the HTML that displays an image on a webpage. Use a descriptive phrase to identify the picture, like Westside Middle School Eagle Mascot.

ALT tags serve viewers using audio screen readers or braille displays. Without ALT tags, images are shown as the word “image” so a disabled visitor doesn’t know what is displayed. When the image is a link to another webpage, a disabled visitor is at a particular disadvantage if no ALT tag is provided–they don’t know what the link is or where it will take them.

We can also use ALT tags to increase our site’s identity with search engines. For example, with a school logo at the top of the page, incorporate the school motto or some special recognition or award: “Westside Middle School—A State Recognized Mentor School where every child will succeed.”

FOR YOUR SCHOOL WEBSITE’S CONTINUED SUCCESS

Keep the school library website current. Remove dead links and outdated information. Create a discussion forum that invites users to interact with us and each other. Periodically, add a survey to invite reader feedback about the school library and about the website.

We can also embed various features and media in our webpages to make the site more attractive and useful. For some ideas, read my post An “Embedded” School Library Website.

Our school library website is our virtual library, and it’s seen by the entire world. Build it wisely and it is a valuable information source for our school community.

For more in-depth information about creating a website, visit Ms. P’s Web Design Tutorial.

line of books laying down - indicates end of blog article

Join my mailing list to get a brief email about new posts on library lessons & management . You'll also gain access to my exclusive e-List Library of FREE resources!

Let’s Expand Our View of “School Library Orientation”

Let's Expand Our View of “School Library Orientation” - School Librarians can make each subject-area's “first” library visit of the school year more powerful if we think of it as a “school library orientation” especially for them! Here's how I customize unique orientation lessons with 6 different subjects. #NoSweatLibrarySchool Librarians know the importance of our students’ first library visit, so at the beginning of each school year, “school library orientation” becomes a hot topic on library listservs, social media, and blogs. Folks request ideas, asking, “What can I do differently this year?”

A couple years after I simplified and customized my school library orientations with English Language Arts classes, I came to an astounding realization:

EVERY subject-area’s “first” library visit of the school year is a “library orientation” for THEM!

I’m suggesting that you don’t need to keep trying new things every year with the same subject class. Rather, expand your view of what “library orientation” means and customize an “orientation” lesson for every grade level and subject area in your building!

Allow me share how I developed a series of “library orientations” that brought 6th grade ELA, Social Studies, Math, Science, and Elective classes into the library at various intervals during the first several weeks of school. Once you try this, I know you’ll love it, and your subject area teachers feel pretty special having their very own unique library orientation customized to their content. (Even an elementary librarian can focus each class’s visit on new library materials or features, so it’s a like another orientation.)

ENGLISH LANGUAGE ARTS “ORIENTATION”

I’ve written about how I simplified my 6th grade library orientation, so students aren’t overwhelmed with too much new information. Keep in mind that for lowest-grade-level, new-to-the-school students, our school library is completely new to them, and our lesson is “fresh” for them, even if we’ve done it a dozen times! Because each new year is a totally new group of students, I’m as enthusiastic about this lesson as I was the first time.

Our ELA classes begin the year studying narrative text, so we focus on how to choose one good book from the new-to-them Fiction area. My lesson is followed by plenty of time to browse the Fiction area of this “new” library, after which we have extended silent reading while I do a quiet invited checkout. This standard procedure establishes a reading culture for ELA’s every-other-week library visits for the rest of the school year.

SOCIAL STUDIES “ORIENTATION”

After the ELA visit, we can bring in other 6g subject-area classes and do a “library orientation” customized to their particular content. I’ve written about my Special Collections for Social Studies, so I have 6th grade Social Studies classes visit a couple weeks after ELA to learn more about their “new” school library: the GlobeTrekkers Special Collection of fiction & Dewey books that support their study of World Cultures.

Photo of the GlobeTrekkers Special Collection for 6g Social Studies

The first part of the lesson is returning books and a library expectations lesson, giving students a few policies & procedures for their “new” school library. Then I introduce Content Area Reading and why it is important.

Educators have learned that reading comprehension isn’t so much about word recognition as it is about conceptual understanding in context. That is, students become better readers as they accrue background knowledge of various topics, so the more they read, the more they know.

Yes, Dr. Seuss instinctively told us this years ago in his book
“I Can Read With My Eyes Shut!” and it just took brain researchers a while to confirm that.

Now I don’t tell all this to kids…I just tell them that the more GlobeTrekkers books they read, the better they’ll do in Social Studies and get better grades!

I show them how to identify GlobeTrekker books in the search results from our online book catalog, and when they hear they can check out a GlobeTrekker Dewey book and, if needed, a new fiction selection for their ELA class they are excited to begin browsing. We follow the same procedure—silent reading & invited checkout—which reinforces with Social Studies the reading culture that was established with ELA.

MATH “ORIENTATION”

I’ve also written how it makes sense to do our Dewey lesson with math classes which has students locate decimal numbers on the bookshelves. When 6th grade Math classes enter the library, students are so puzzled about what they are doing here…with their math class? That, in itself, sustains engagement for students—who apparently have never done anything like this before.

Keeping the lesson focused on numbers makes it easy for students to relate the Dewey number they see in a book search to a location on a shelf, regardless of the topical content of the book. After the lesson there is plenty of time for students to browse for up to new books, either Fiction or Dewey depending on what they already have checked out. The 6g boys are especially eager to find their favorite informational books in this “new” school library: aliens, cars, sports, and drawing, as well as the Guinness and Believe-It-Or-Not books. And we continue our standard reading & checkout procedure, which reinforces with Math the reading culture we established with ELA and Social Studies.

Expand School Library Orientation to All Core Subjects - Don't overwhelm new-to-school students with a long, complex library orientation. Scaffold it into a customized library orientation with each of the 4 core subjects--English Language Arts, Social Studies, Math & Science. #NoSweatLibraryThree customized lessons with 3 different subject area classes have progressively given our “newbies” what they need to effectively use their “new” school library.

  • We have imparted our policies & procedures when applicable, so students are not overwhelmed with too much new information to remember.
  • We have established our school’s reading culture of silent sustained reading (we call ours DEAR—Drop Everything And Read).
  • We have gradually built up the number and type of books students can check out, so during the early weeks of their new school experience they needn’t keep track of too many books.

SCIENCE “ORIENTATION”

By now our 6th grade Science classes are well into their unit on Energy and are ready to begin their project on alternative energy resources. The timing is perfect for an introduction to our online subscription services for middle school, which are completely different from those in elementary school.

Most “newbies” come to us from feeder elementaries, but many are new-to-district students. Thus, I begin this “online library orientation” with Digital Citizenship and direct students to our online library resources webpage to prepare for the WebQuest lesson.

I’ve written about my guided WebQuest that introduces just 3 subscription services to 6th graders—an encyclopedia, a periodical database, a topical reference e-book—with each segment looking only at the specific features of a service they’ll need for the project.

This is a full-period lesson, and each segment has students reading for content information and citing sources as they fill in the WebQuest worksheet (or HyperDoc). Students come away well-prepared to research their project, and I also provide a cart of books for the classroom to supplement the online tools.

To illustrate how favorably teachers respond to customized lessons, shortly after this, 6g Social Studies has an “online orientation” WebQuest using our countries of the world databases. Students gather country data into a spreadsheet app for comparison, and then learn to automatically generate a graph.

ART & SPANISH “ORIENTATION”

By this time we are through the first 9-week grading period, yet I’m not quite finished. Remember, any subject-area class that visits the library for the first time gets a “library orientation.” So, I begin the second grading period with a customized orientation for 6g Art and 6g Spanish. Because these 2 subjects alternate semesters, all 6g students receive this lesson during the first semester.

Both these lesson visits introduce Cloud Computing & Netiquette featuring our online email service. It is a guided lesson, similar to the WebQuest, that examines 3 features of the service: email, blogging, and discussion forums. I always let the other 6g teachers know when I do this popular lesson, so they can begin using the service for their own courses.

INFORMATIONAL CONTENT “ORIENTATION

8 Collaboration Ideas That Bring Subject-Area Classes into the School Library - School Librarians are always looking for new ways to collaborate with teachers and integrate library skills into subject area curriculum. Here are 8 Library Lessons I have with 6th grade content-area classes during the 1st semester...plus a list of 8 more lessons with 7th & 8th grade! #NoSweatLibraryI’ve written, too, that making ELA and Math orientations about location allows me to bring other subject areas into the library for content-specific lessons. During the second grading period, 6g Science returns to the library during their Classification & Organization unit.

The lesson allows students to explore the Dewey 590 Animals section, whose disciplinary organization mirrors that of scientific classification, thus reinforcing content for both science & library. The lesson also reviews the parts of informational books so students learn ways to dig into a book’s content to find and extract what they need.

HIGHER GRADE LEVEL “ORIENTATIONS”

Lest you think I ignore our 7th and 8th graders, here’s a list of the “library orientations” I’m providing for them during this same time period:

  • 7g & 8g ELA – Narrative Fiction & first book checkout
  • 8g Social Studies – The American colonies, a U.S. History project
  • 7g Math – adding/subtracting decimals & locating Dewey numbers
  • 7g Social Studies – First Texans, a TX History cooperative learning activity
  • 7/8 Theater – Multicultural folktales, creating one-act plays
  • 7g Social Studies – WebQuest on European explorers, a TX History project
  • 8g Spanish – Weather reports & introduction to video broadcasting
  • 8g Health, 8g Careers – books, ebooks, online services & websites

I know you may not think of these as “orientations,” but if view each library visit as an entirely new experience for that group of students in that subject class, all our lessons become “library orientations.”

THE POWER OF “SCHOOL LIBRARY ORIENTATIONS”

I’ve discovered it doesn’t matter how good a librarian students have had before they arrive in our school. These “library orientation” lessons are always powerful because they are bite-sized pieces, scaffolded over time, helping students gradually learn—and remember—how to use every aspect of our library services.

To make successful, carefully crafted lessons, we must have a comprehensive view of each grade level’s total library experience, for both subject-area curricula and the library curriculum. I created my Curriculum Matrix for just this reason, and I keep it updated so it is always ready to be referred to.

Our attitude toward “library orientation” is a reflection of our mindset about our entire School Library Program. We want every student experience with us to be a memorable one, offering meaningful lessons that never get old.

line of books laying down - indicates end of blog article

Join my mailing list to get a brief email about new posts on library lessons & management . You'll also gain access to my exclusive e-List Library of FREE resources!