Web Page Design Critique

Site Info

 Content

Scrolling the whole page, what percentage of the surface area is devoted to offsite (third-party; paid) advertising?

This is almost the same question, but what percentage of the links are:

Example | At Travelocity.com, every page's URL that starts with travelocity.com is on-site. URLs such as

www.insession.com/travelocity.htm

and

www.insession.com/travelocity/tools.htm

are off-site. They are on InSession's site.

Is the page's url visible in the browser's main page-display area? That is, not just in the address window; would it be on the page if it were printed?

Is a contact person or email address visible?

Is a last update visible?

How many words are in the largest text chunk (probably a paragraph) on the page?

Structure

organizing principle

How is the page organized overall? (examples: two narrow columns around a wider column; one column with a navigation area on the top/left/right; frames, etc.)

Could you draw a picture or diagram of that organization? To give you the maximum flexibility, use whatever medium you find easiest -- from a paint program to a doodle on a dinner napkin -- and hand it in separately.

page size

Length | Even though it may depend on the width, how long is the page? By right-clicking on your desktop and choosing Properties | Settings, you can see whether your screen is 480, 600, 768, or 1024 pixels high. The browser within it will be somewhat less than that. By carefully scrolling, you should be able to tell how many screens the page takes up from top to bottom.

Width | Do you have to do any horizontal scrolling?

Make your browser window wider and then narrower and keep doing it until your eye tells you that you've found the optimum width for your page's design. By right-clicking on your desktop and choosing Properties | Settings, you can see whether your screen is 640, 800, 1024, or 1280 pixels wide. The browser within it will be somewhat less than that.

parts

Can you name every part of your page, every thing (how's that for a technical term?) on your page, with one of the below? If not, please send the code or a description.

almost every web page

text: headings and paragraphs, often boxed
images: sometimes hot
links: some text, some images, some images as text
navigation areas (nav bars): onsite links
graphics: buttons, bars, bullets, borders, backgrounds (sometimes textured), icons

many web pages

banner ads: almost always hot
forms: places for you to enter text or make choices
tables and charts

some web pages

frames: you can usually tell because they're separately scrollable
animations: simple .gifs or complex flash
Java applets: usually a gray or white box and the message "applet loading" at the brower's bottom left edge; similar to the chat client on the Office page. The source code will show a .class file.
JavaScript: features that change when your mouse moves over them. For example, a link may change color.
other media: embedded files such as audio and video

Roughly, what percentage of the whole page is (should add to 100%):

Roughly, what percentage of the whole page is (should add to 100%):

Navigation within the site

First impression

How would you describe the page visually? Cluttered, pretty, slick? Please give examples, too. I'm looking for a very subjective response. How does the page's look-and-feel make you feel? How do you feel about it?

Look at the page with both Netscape's Navigator 4 and Microsoft's Internet Explorer 5 browser. While you're at it, you might look at this page critique, also, in both browsers. It looks better in Internet Explorer 5 than in Navigator 4 or Internet Explorer 4, as does all of Ricci Street, I believe. The point is that it looks different.

Does the page you're critiquing look different in the two browsers? Look carefully.

In which does it look better, in your opinion?

graphics

How are shapes and colors used?

Hover over the graphics until a little text box appears.

Images

This critique page has two images, the lantern at top and Matteo Ricci at bottom. You can find them by searching for the img tag. On the site you're critiquing, look at the images that are not ads.

Hover over the images until a little text box appears. The contents of the img tag's alt attribute will appear. They 

Visually, what did you like best about the page?

Visually, what did you like least about the page?

Mechanics

Try to get the page with and without the www in the URL. For example, any page on Ricci Street will work with or without it. Does the page you're critiquing work with and without it?

in Netscape's Navigator

View the source code, the HTML, by right-clicking or by pulling down the View menu and choosing Page Source. The code is conveniently colored to make it easier to read. If your page uses frames, you need to look at the source for each frame separately.

The tags are in purple, the attributes are in bold black, and the values are in blue. The text that appears on the page is in a regular (not bold) black, as are any scripts. Ignore the scripts, text, and values for now and concentrate on the tags and attributes.

in Microsoft's FrontPage

If you have the latest Microsoft browser and you have FrontPage on your machine, you should be able to find Edit with Microsoft FrontPage either from the toolbar's Edit icon or the File pull-down menu at the top left. Depending on how many graphics you have, it may take a few moments. 

Otherwise, in the browser, save the page to your hard drive (as HTML in the Save As ... menu) and then open it in FrontPage. All the gifs will be broken in Normal view because you didn't save them, too, but we don't need them right now.

Choose the HTML view. The colors will be a little different than Netscape's, but they will still help you read the code.

Split your monitor into the source code in one half and the web page in the other.

You should be able to "read" the code just as I do in class by putting it into English sentences and by pointing to the corresponding feature on the page as displayed in the browser.

reading the HTML

In the second half of your oral presentation, you should instruct us all to view source and then you should disassemble the page. Point out the sections of code and corresponding features on the page. If there are any tags or attributes you don't understand, Webmonkey is a good place to clear up the confusion, especially the quick list of tags. Remember that the HTML Compendium has a complete list of all the tags, attributes, arguments, and (in)compatibilities.

You should copy and paste the confusing parts into the scrolling text box below. Speculate about what they may be.

goofiness

I don't want to call them errors. Embarrassments, perhaps. Let's just say they're things that the designer could not have intended and that don't look right or work right.

While online, view your page in the browser (not in Front Page) at the largest and smallest text sizes. View it in both browsers on a 17" or larger monitor. Re-size the browser window from widest to very narrow. Turn off the images (in IE: pull down the Tools menu, select Internet Options | Advanced. Under Multimedia, uncheck the Show pictures option) (in Netscape: I'm not sure how to do that).

In other words, try to "break" the design. Stress it a little.

Under this stress, are there any goofy parts or features on your page? Does anything appear in a way that the designer could clearly not have intended? Describe the goofiness in the text box below. If you can, copy and paste the relevant code. Speculate about what may be going on.

General

In print, how would it be done?

as well better not as well because ...

Overall rating bad poor average fair good

Any final comments about the site

Comments about this form