• HomeThis will take you to the homepage
• BlogThis will take you to the blog. Hosted here, but formatted differently
• CSSThese are assignments from Eric Meyer's CSS book
• SummariesSummaries of web design articles, basically teaching how to design well on the web
• OtherThis is where you find all the other assignments I did for this class
• DemosThis page contains the demos that we worked on in class
• Jethro?A collection of what makes me me
• ContactThis is where you can find my contact information

Site Evaluation

For my website evaluation, I chose Lincoln Elementary School's website. I chose it because on the first screen I saw it on, it looked really bad. If the screen resolution is higher than 1024 pixels wide, it really messes up the look of the page. If it is less than 1024, then it is fine. I usually have my resolution higher than 1024, so it looked really bad for me.

Design Flaws

1. Site Navigation, Content, and Links below the Fold. When you open the page, you see a big green background with the words, "Welcome: Home Page of the Lincoln Elementary Cougars" None of this text contains links. You look around and move the mouse trying to find out where to go next. This is true for almost every page on the site. After you get used to seeing that the page is just the heading, you realize that you need to scroll down. After that, you scroll down to find a picture which is clickable, but is a...
2. Broken Link. It says that it should take you to an enlarged (I assume) picture of the school, but it doesn't. In addition, there are many pictures that are also probelmatic, and don't actually show you what they should. At the bottom of the main page, they link for "50 in a Minute Math Practice" also broken. There are two links that say the same thing, and I don't know if they are differnt or the same. I guess I will never find out.
3. Images. On the Faculty and Staff page it uses inconsistent images. The principal's picture (and many others' pictures), for instance, is really grainy. I am sure they have better technology than this, but those images really do look out of place.
4. Alignment. A lot of the text overflows onto the right and left border graphics. It is rather12/10/05e background image is a 1024 x 152 pixel image. That causes problems when the screen resolution is set to more than
5. Table. The table on the main page is used for general links. That is a problem because the top row is emphasized and looks like it is column headings. It is very misleading.

Design Fixes

1. Site Navigation and Links below the Fold. Move them up and make them part of the page.
2. Broken Link. Just fix it or remove it. It is not that difficult.
3. Images. Retake the pictures. It looks like they are "professional" pictures. If that is too difficult to arrange, it would be really easy to take some high-res candid pictures to add personality to the page.
4. Alignment. It looks like the designer tried to move things over to the right to get them off the page's background graphic. But, it looks like he moved them over too much, and now they are on the right one. The problem there is that it is only 1024 pixels. If you view it on a screen with resolution larger than that, it repeats, and is annoying. It is really easy to just make it wider so that does not happen.
5. Table. The simple solution for this is to make a table that is consistent and make the borders disappear. That would make things looks a lot more understandable. Also, if column headings are needed, use them, not just some filler text.

To see how I really think it should look, click here.

Design Commendations

1. Good choice of yellow on green. Even though it should be dark on light, the green and yellow color scheme is bad on the eyes, and it is still readable, even for color-blind people.
2. The graphics, (not the pictures) are well-done, not distracting, but add to the overall feel.
3. The handbook has links to the letters of the topics so that it is easy to navigate and find what you are looking for, assuming it is even there.
4. Parents and students can both use it and not feel like they are neglected for their demographics.
5. Almost all of the pictures are down under 20K, making for a fast load time.

Code Validity

1. The main problem is that he is using HTML 4.0 Transitional, so he is way behind the latest and greatest.
2. Use of proprietary attributes. In the table, he uses <table height=100%> when he should use at the very least <table style="height: 100%">, if not include a separate style sheet.
3. <img align=ABSCENTER> is not correct. ABSCENTER is an invalid value.
4. There are multiple errors that say, "trimming empty <font>", and suggest removing the attribute size=+1.
5. In one link he used a & sign in an href, and he should have used & to designate that it is supposed to be an & sign, and not an entity.

CSS Implementation

Sadly, our friend did not use any CSS except for throwing a couple divs in there that serve no purpose, because he is using tables to fulfill what would be their function otherwise.

Usability

Sadly, this website is not very usable.

1. The below-the-fold content requires time to search around.
2. The table looks like it should contain data, not links that are unrelated.
3. The contact info for the school is difficult to find and not where you would expect it to be. He put his contact info as the site designer in that place.
4. The handbook is difficult to navigate because the links to the top are pushed off to the right.
5. Words that are not links are underlined, while some links are not underlined, thus making it difficult to know when a link is really there and when it is not.