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