Thursday, June 8

Interactive Tutorial

Dear Diary,

I attended a really fun lunch with our Director today. There are monthly informal lunches paid for by our Director wherein everyone introduces themselves and informs the group of the current events in each person's department. That is a great idea since people who do not work in other departments may miss out on valuable information. We also had a productive lunch. We discussed blogs as a tool for the library.

I gave them the link from our May Institute that shows a sample library catalog in the form of a blog. This is the software behind the catalog/blog combination: http://maisonbisson.com/blog/post/11133/

I have to discuss web page layout and design with our High School students. I found this really great interactive tutorial:http://library.albany.edu/imc/webdesign/#define

But as always you need a contingency plan so I created a handout based on the website. Ideally, I plan to demo the site as some portions are beter understood if viewed online.

Below is the text from my handout.

Layout & Design
online interactive tutorial http://library.albany.edu/imc/webdesign/

Identify the Purpose of the Site
A website may have several purposes. So determine the primary/ secondary purpose(s).
o This site is meant to be informative.

Identifying Who Will Visit the Site
If visitors may log in from home, design the pages for users with slow modem connections.
Ø Visitors using dialup access and modems.
Ø People between the ages of 18 and 24.
Ø Mom? (Keep it clean) :)

Proximity
Proximity refers to the distance between elements and how they relate to one another, including text, navigation, etc. Closer together have a stronger relationship than elements farther apart.

Alignment
Alignment can enhance or detract from the appearance of a web page. But in addition, it can significantly affect the readability of material on a page.

Repetition
All pages on a web site don’t have to be the same; there should be similarities for a consistent look and feel. This consistency is one of the things that help make a site easy to navigate.

Contrast
An example of contrast is the color of text against a background. It is easier to read text that contrasts highly with the background.

Navigation
In general, the styles are identified by position and orientation on a page. They include:
Top, Left Side, Right Side, Bottom, Horizontal or Vertical

Fonts
Text is displayed by browsers using the fonts available in the viewer's computer. Most PCs have Arial and Times New Roman. Macintosh computers usually have Helvetica and Times.

Images
Images are displayed by browsers differently, especially if animated. Should add to the site.

Page Size and Layout
Of the biggest challenges for designer is the variability of the screen sizes. Deciding on how wide a web page should be is based on several factors. Most computer monitors are set for a width of 800 pixels. Older monitors and ones smaller than 15", have a width of 640 pixels. Large monitors have widths of 1024 pixels or larger. One of the biggest decisions when creating a web page is choosing the most appropriate size for design.

Tables
Tables are used to control the width of material presented on a web page. Table width can be specified in either percent or pixels. Specifying table width in percent change the table size depending on what the viewer's screen size is.

Browser Question
There are several browsers one the Web. One is much more popular than the others.
* Images look funny on AOL.
*
*
Top Tips to Annoy and Insult Your Web Site Visitors

"This site best viewed with ___"
Sites should be designed to work right on all.

"Under Construction"
Just annoying. You'd rather aggravate them than finish the site.
*Remember, people take detours around roads that are under construction.

Background music
Takes too long to download may not hear it, and it may sound bad.

Horizontal scrolling
Avoid it, people will click out rather than use arrows to scroll.

Animated GIFs
Take longer to download.

Scrolling text or marquees
Some browsers don't run the JavaScript that makes them work. Avoid the tag, it is proprietary and doesn't work with all browsers.
*
*
Other Online Resources
*Webmonkey at http://www.webmonkey.com/
*Dynamic Drive at http://www.dynamicdrive.com/