New Concerns

We're back to school and have shifted the library link off the school website to the new site. However because it is not on the PHS server the library computers are not allowed to directly connect to the site. I'm not sure how big an issue this is going to be but may force me to return to the PHS district server site. I may be able to figure out with Cyrus how to keep the google sites interface but have it hosted on the district server.

That is the challenge of the week.

School Starting Problems and Solutions

School has started and so the problems with the web site build.

• A main concern is not being able to see the teacher reading lists. It does not seem to matter if they are docs or pdfs sometimes they just won't load. Other times they run a muck with iprism. I have put that one in trackit but will need to absorb some of the help forums for the rest.
• Favicon does not show up on the GoDaddy site. I've tried what the forum suggested about the GoDaddy settings. I even reloaded the favicon. I will post on the forum and see what people suggest.

Success:

• Added Analytics and had a brief lesson from Todd Parr on how to understand what they are telling me. Now know I need to test in IE, Firefox, Safari, and Chrome. Much of my traffic comes from Safari, which indicates an iPad or iPhone.
• Broke the page into 2 columns to get rid of the lengthy lines which are a big concern of James Erbe and other research we have read. Still need to be briefer and use bullets and numbers more often.
• Mobile site seems to be working. One teacher commented on its ease of use.

To Do:

• Add a calendar
• Add drop down links to databases.
• Look for icon sized database logos for sidebar.
• Add 50th anniversary slide show to encourage library visits.
  

Web Site Evaluation

Pasted below is the criteria used throughout the web design course to evaluate a site. I am going to review the library site and post my comments on how I have hoped to achieve each of the criteria.

Web Site Evaluation Criteria¹

Text

_____Consistent use of fonts, emphasis and color I think this is done well. I am trying to stick to the header codes designed with color schemer.
_____Concise - uses bulleted and numbered lists So far only bulleted lists
_____Does not use all uppercase Concerned about FAQs tab but think it is universal acronym and therefore can be uppercase. I had to adjust some web site name links because of all caps and will need to watch this in the future.
_____Uses sans-serif fonts (Arial or Helvetica) for titles, headings, or other short amounts of text I tend to use all sans-serif if not careful
_____Uses serif fonts (Times, Book Antiqua, Palatino) for body text Corrected body paragraphs to serif but must be careful and consistent.
_____Uses methods of emphasis other than underlining Tend to use bold and color.
_____Keeps line length to approximately 40 characters This is a problem. On the library home page I have a wide column that is at least 80 characters long. I like the look but know that this might just be me. I will work with my users and try to get their thoughts.
_____Utilizes left alignment for blocks of text Yes.

_____Uses whitespace. Breaks up long paragraphs and long chunks of text Working hard on this.

_____Includes a link to e-mail a contact person At footer of each page
_____Doesn't center everything on the page True
_____Doesn't overuse the bold option - keeps high contrast text short Headers all appear bold but I suspect this is not a problem. May need to work on controversial issues page and use of bold.

Color

_____Uses contrast Yes
_____Uses a light background to show off graphics and dark text for ease of printing Yes
_____Uses white backgrounds for pages which readers are likely to print All white backgrounds.
_____Doesn't allow the background to conflict with the foreground (text) True

Graphics

_____Uses graphics which relate to the subject matter minimal graphics, would like to use more
_____Limits physical size of photos as well as the size of the file to under 30K need to remember to check all when adding, gadgets don't count I hope (READ photo gadgets).
_____Utilizes the same style of graphics throughout site so far I am inconsistent, I use photos and clip art. I will question users to find out if this is annoying.
_____Limits the number of graphics per page to reduce page loading time limited except on READ Photos page.
_____Uses thumbnails when appropriate. Example: Click on the smaller painting to see a larger version. The READ photos and Slide new books display all do this.
_____Does not use distracting animated graphics and moving text I like animated graphics but so far have not used them on this site
_____Does not use "under construction" graphics" on the Web pages; all Web pages are always under construction No under construction graphics

Navigation

_____Names navigational items appropriately and does not use the word "back" to direct readers I believe this is true although I am not sure about the Information Literacy tab. I'll check and see how much use it gets and maybe delete or rename
_____Includes a home page link on each page Yes, on the sidebar
_____Reuses the navigational tools on each page Yes, the tabs and sidebar appear on all pages
_____If there are a number of subtopics on a web page, includes a table of contents and return links Table of Contents in Google Sites is clunky, planning on adding anchored links across top to some pages
_____Gives control to users - allows them the option of sound files and multimedia instead of using audio in the background and programming other ways to automatically download audio and video files No audio files as yet but some embedded video. May consider just linking to videos in future.
_____Includes a site map or visual outline to help site readers find information Yes
_____Does not leave users at a dead end - gives them a way to get back to previous pages.Would like to incorporate a better bread crumb trail. Will look into sites help for how to do this as the number of pages expand.

¹Adapted from Web Page Design Guidelines
Used with permission from Nicholle Stone, University of Wisconsin-Stout

Week 4 - Publish and Comments

This was the week that we were to publish our site and here the comments from classmates and professor. My blog went up with 5 pages as required. I am going to copy the comments from the discussion forum below. Professor Erbe sent me his comments in an audio file and I will try to include it as well.

Comment from Mary Sue:

Katherine, very nice site. I like the Wordle banner; it has a nice welcoming feel. I also like the GoAnimate. I had not heard of this program and I’m anxious to try it. I’m always looking for new ways to get my students to show their work through technology. I am not familiar with the slide.com presentation tool you have showing your new books. Could you tell me a little about that? Is it free, is it easy to use? Did you have to find the book covers and add them?

I wonder if it is redundant to have the databases listed on the side when you have a link across the top for them? When clicked on that link I saw that you didn’t have them all listed there. Do you plan on doing that at some point? I do like the use of the table and the annotations and links for help.

I love the Read posters!!!! What a great idea. You really have a great start here.

MarySue

Comment from Jennine:

Such a great start! There is so much I like about it, but I think the best is your placement of materials on the front page. My worst problem is sticking things 3 clicks in from the front page, and I worry about people getting tired of that many clicks. Thanks for the look!

I LOVE the "web worthy" spotlight--the old HS site used the words "web 2.0 tools" to highlight new to us web tools, and that wasn't interesting. This is a phrase I will place on my own.

Week 3 - Getting to Work

This week I spent 28 hours actually designing the look fo the site. I am not happy yet but have learned a lot.

• thanks to professor Jim Erbe for steering me to a group of web tutorials and website specifically on designing with google sites. The site is Google Sites Web Design.

Two of the things I learned that I incorporated right away were how to create a favicon and upload it to google sites. See for details: http://www.youtube.com/watch?v=MNTmfab-hXc&feature=youtube_gdata_player

Also, I was directed to a site for planning site colors: http://colorschemedesigner.com/. This helped me determine web friendly as well as artistically appealing color combinations. I came up with the colors for tabs, links and heading sizes. Here are the colors I plan to use throughout:
Unfortunately, I have not as yet figured out how within google sites management to set up heading colors across the site. I shall bring it up in our discussion forum.

Week 2 - Designing Your Website

The final project for the course is a 5 page web site. To get started we need a plan. This week we reviewed ways of planning out the web site. Some suggestions included:

• a storyboard: 2 examples & instructions http://www.mcli.dist.maricopa.edu/authoring/studio/guidebook/storyboard.html and http://accad.osu.edu/womenandtech/Storyboard%20Resource/
• a graphic organizer like Inspiration or use a word processor to create similar
• sketching out the site
• using a web site planning worksheet

Also suggested was a visit to other library web sites. The link to school-libraries.net was given for examples.
Finally, we were left with an article by Jennifer Kymin Top Tips to a Great Web Page that reminded us of the following:

1. Know your audience and keep them in mind when you design your site.
2. Keep pages short. Eliminate as much scrolling as possible.
3. Use tables of contents. Like side bars.
4. Keep images small. People get upset if they have to wait long for downloaded images.
5. Use web safe colors.
   
6. Minimize text.
7. Use a spell checker.
8. Make sure to check for working links regularly.
9. Annotate links.
10. Provide contact information on all pages

My first attempt at reorganizing the library web site:

Week One Readings - Part 2

Each of the links below will take you to an excellent article on what constitutes a good library web site. Skim them all, then choose one to read in depth.

The one I chose to read in depth is :
Ten Essentials for Any Library Site By Brian Mathews -- Library Journal, 02/15/2009
1) Promotion - "ultimate sales tool". Placement important, sidebars and footers easily ignored. Update content regularly so "people don't just tune out". A site that does not require updating at school is essential if content is to be kept current. Also calendaring time to update regularly
2) Segmentation - "communicate with our users in a manner that is most effective for them". Consider developing multiple pages to meet the needs of each of your main users. For PHS perhaps students, staff, and parents.
3) Visual Clues - use icons to break up the monotony of text. This seems at odds to some of the articles that suggest you limit graphics to just what is essential. Perhaps this is a revision from older web site design criteria.
4) Inspiring Photos - help people get to know your library by selecting pictures that show distinctive features, the personality of the library. Choose wisely and reduce clutter. This might be a good time to update the PHS Virtual tour. Maybe an assignment using Web 2.0 tools for a library assistant.
5) Search Boxes - add a search box to every page, perhaps in the navigation bar. They suggest a federated search bar. I only wish I was so talented or had the money to really make this happen. I can however, add a Google search bar for the site. I'm not sure if I want it to be on the prime real estate navigation bar.
6) Mobile-Friendly Pages - "The future of web design is planning for the portable experience." This is something I want to do this summer while developing the new design. I will follow up with the professor for some additional reading/help.
7) Feedback - provide a way for patrons to give their compliments, complaints and concerns. Post responses to feedback so that the community can become "more actively engaged with the library". I am bad about the evaluation piece. It is required for my TLC so this is a good way of going about it.
8) Redundancy - "People interpret things differently." Build into your website numerous ways to find things. Be careful with vocabulary, try not to use library-talk.
9) Analytics - install Google Analytics to see how your site is used. Look at popularity of pages and click patterns. Look, analyze and then rework regularly.
10) An Easy Way To Ask for Help - Make it as easy as possible to ask. Don't bury the Ask-A- Librarian link. "Meebo is great because it presents web visitors with a simple textbox eliminating the need for them to log in install software or click any further." Work on Meebo again with Mark Ludwig at DO.

Week One Readings - Part 1

Required Readings:

• Good Design Features by Robin Williams- Considers elements that must be addressed to have a decent web page. The elements include text, navigation, links, graphics and general design. When reviewing these, I wonder if I need an index or site map. Also, my links are capitalized. In the new web site I will change this.
  

• Bad Design Features by Robin Williams - These pages are what makes a web site look "dorky". Elements to be considered are backgrounds, text, links, graphics, tables, blinking and animations, junk, navigation and general design. I need to be careful about text that stretches across the page, consider breaking it up and using columns. Remember also not to use default blue links. I also need to make sure I alt label all graphics. No borders on tables (I sometimes leave them on, I guess I am a dork). Animations that never stop (I must figure out a way to get them to stop, like in my AP Assignments wave/sand graphic). They suggest you avoid counters. I suppose this is a good idea but I do keep track for my statistics at the end of the year.
  

For Beginning Web Designers (Skim the following and read two in depth):

• 9 Essential Principles for Good Web Design by Collis Ta'eed -

1. Precedence (Guiding the Eye) with position, color, contrast, size and design elements
2. Spacing (Simplicity) , pay attention to line spacing (css default too tight), padding (no touching) and white space (adds elegance).
3. Navigation, Where can you go? Are buttons easy to find (at top) if rollover, change the color or image on rollover. Where are you now? Consider breadcrumb trails, subheadings and site map.
4. Design to Build, think about what can be done, consider screen resizing options as it will effect backgrounds and alignment. Simplify.
5. Typography includes font choices, font sizes, spacing, line length (longer the line the harder to read), color (watch out for low contrast text) and paragraphing (left align, do not justify).
6. Usability means adhering to standards, thinking about what users will actually do on the site (list different tasks people might need to do and how they will achieve them).
7. Alignment makes site more ordered and "digestible"; more polished look.
8. Clarity (sharpness) particularly pay attention to borders (consistency) and sharpness of text.
9. Consistency means making everything match including heading sizes, font choices, coloring, buttons, spacing, design elements, illustrations and photos. There should be a theme across all pages.

• Everything Else: The Top Fifteen Mistakes of First Time Web Design by Holly M. Burns

1. Using Frames - don't.
2. Going Overboard with High Tech - avoid too many tricks like input boxes, background music, opening in new browser window.
3. Under Construction Signs - don't put up a page until it is ready.
4. Misusing Graphics - graphics should add value, shrink large graphics.
5. Ransom Notes Fonts - limit to one or two fonts, use normal size and headers a little bigger, no BIG.
6. Complex Backgrounds - avoid busy backgrounds, use contrasting colors for background and text.
7. Too Many Animations- one or two page per page only.
8. Orphan Pages - all pages should indicate what site they belong to, all should have a return home link.
9. No Organization - consider an index or menu, all pages should have similar layouts.
10. No Unique Content - forget the site, don't just create a web search tool there are plenty out there already.
    
11. Too Many Ideas - focus on one element, create a menu page that takes you to separate topics.
12. No Authoritativeness - include name and credentials on web site.
13. Outdated Links or Information - check for broken links and current information.
14. Negative Declarations - bad approach, stay positive.
15. Link Problems - "keywords should be highlighted and link-able within the text", text should stand alone and be printable.

Time: 7/4 2.5 hrs.

Introductory Assignment

The first assignment is in black below. I have entered my initial comments that were not required to be posted here in my blog in purple. I will print out all of my postings to the group discussions for reference.
This is the initial work we were to do after introducing ourselves.
Let's begin by examining several school library web pages. As you look at each one, consider these questions:

* Is the site attractive?
* Can you determine the school and its location? Is there a link to the school or district web site?
* Who is responsible for the page? Is there someone you can contact for more information?
* Are the contents up to date?
* Does this look like information that your students could use?
* Can you easily navigate from page to page and from sub-pages back to the library's home page?

For each one, identify something that you think is especially effective or something that you think could be improved. If you find something you really like (or dislike), make a note of it for future reference -- and perhaps to include (or avoid) in your own library web site.

* Van Allen Elementary Library, Iowa City, IA
The colors and graphics on this site gave it a youthful feel. The search this site box is a good idea. I found the frames within the site (the Iowa group databases) difficult to use. Also, I found it frustrating to click on a link and get to a blank page or one with little or no information.
* The BerkleyCarroll School Lower School Libraries, Brooklyn, NY
Appears to be multiple websites; the school's library website, the librarians' website, the elementary blog and then the middle school/high school libguides. I felt a bit mixed up. I know I feel that way with my website when I go back and forth between the web pages and my wiki pages. Very formal in appearance. Much more depth to the information. Much money for tools, like LibGuides. Easy to access buttons. My favorite part was the lower elementary school blog with all the multimedia.

* Westland Middle School, Bethesda, MD
Three button approach with wordle as the buttons very clever! The site does not provide easy contact information or date updated. * Athens High School Library, Athens, AL
Meet the librarian not linked and no further information. The table with the resources needed more information. This made me realize I need to put more explanations on my site. I know that icons are not enough. The pictures of students were labeled and the page I found most interesting and well done.
* Newton South High School Library, Newton, MA
Color combinations good. Three column layout with a banner and a horizontal drop down bar. Also, a banner across the top with mascot lion reading a book. A book in an orange circle icon displays in front of the URL line. I'd like to figure out how to do that on my site. The site appears to be up-to-date. Most pages have links back to the library except when lead to the district or other other libraries. How do you work around this?

Time Spent: 2 hours

TLC: Improving the PHS Library Web Site

This blog will document the work on the redesign of the PHS Library web site. The TLC for this work begins July 1, 2011.