Resources
All Things Web
Clipart
HTML 4
Introduction to HTML
Intro to Copyright
Keeping it Legal
Web4Lib (E-list)
Web Accessibility
Web Pages That Suck
Yale Style Manual

LNOCA Examples
Benedictine  
Brecksville
Brooklyn
Garfield Hts
Hudson
Lakewood
Orange  
Rocky River 
Shaker Hts 
South Euclid-Lyndhurst 
Solon 
Western Reserve

Other Examples
Bay Village HS 
Beachwood HS 
Cool Schools
Kenston HS
Lawrence HS 
School Libraries Net
School Libraries Web

HTML Editors
Netscape Composer (free)
Microsoft FrontPage 
Macromedia Dreamweaver 

Getting started

• Identify the target audience.
• Provide the site's mission (explicitly or implicitly).
• Give the site an unambiguous title (indexing).
• Prepare an outline
  • Choose subheadings as if you were indexing the site.
  • Do not assume that the physical organization of the library can be superimposed on the web site.
• Prepare header with logo and/or text banner; consider incorporating navigational tools in the header.
• Prepare footer with author and/or institutional affiliation, revision date, contact information, and link to home page for every page or submenu page, as appropriate.
• Check school policies about permission to use photos, etc.
• Consider copyright.

Interface design | graphic identity

• Consider the interplay of form and function: 
  • Avoid gratuitous use of icons and graphics
  • Consider the download time images require.
  • Think of a road sign - a quick glance and you recognize the message it conveys - the graphics you choose should do the same. 
  • Consider what the site looks like with graphics turned off.
• Provide a consistent and predictable set of navigational tools that reflect the organization and mission of your web site.  
• Choose between frames vs. no-frames, keeping in mind how you will update the navigational links when pages are added.
• Consider web accessibility - it's the law. 
  • Submit web pages to Bobby 3.2 for accessibility review. 
  • Provide alternate text labels for graphics and links.
• Plan for maintenance.

Site organization

"Interface studies have shown that users prefer menus that present a minimum of five to seven links, and that users prefer a few very dense screens of choices over many layers of simplified menus."

• Organize content
  • Home page - major submenus - content pages.
  • Shallow vs. deep organization.
  • Sequence or grid or hierarchy or web.
  • Partnerships with public libraries.
• Cover page?
• Graphics? Imagemaps?
• Consider speed, intuitiveness, audience.
• Create a "style sheet" to ensure consistent use of fonts, white space, heading size, navigational tools, headers, and footers on every page throughout the site. Consistency  allows users to adapt quickly and to predict where information can be found.
  • Limit number of colors.
  • Limit variations in font size. 
  • Basic links should be on every page.
  • Every page should have at least one link.
• Updating: date pages; "new" graphic; what's new page.
• FAQ? Sitemap? Search engine?
• Plan for maintenance.

Page layout

• Stating the obvious: Users in western cultures read left to right, top to bottom. If you want an item of information to catch someone's attention, place it to the left, near the top of the page.
• Search engines give priority to the following when indexing documents: Title, headings, first 50-100 words.
• Background colors and wallpapers: subtle pastel shades provide best contrast with type. 
• Graphic embellishments: use sparingly.
  • This includes horizontal rules, bulleting, icons, large fonts, and bold text.
  • Underlining should be avoided because users may confuse it with hyperlinks.
• Type
• Use downstyle (capitalize only the first word and proper nouns).
• Avoid CAPS, because it looks like we're shouting, and because we tend to scan the tops of words when reading.
• Layout: use (borderless) tables for formatting.
• Text: organize in 3 inch wide columns (the eye's span of movement).  
• Consider printed version.
• Plan for maintenance.

Testing

• Check site using different browsers and monitors; empty cache and check load times.
• Test on users from target audience; remind them to think aloud while navigating.
• Plan for maintenance.