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

Comparing your page to other Ricci Street pages, you will see that it has a top navigation area, all in one table, and a bottom navigation area, all in another table. These are often referred to as nav bars.

The top nav bars come in two varieties. Those on index.html pages, what I call welcome pages, have three graphical elements: logo, styled title, and Matteo Ricci head. They have a couple of links "up", usually to the Ricci Street home page. They also have a set of links to 1) all the "other pages" in the section they welcome you to and 2) "this page", which take you lower down the welcome page.

The top nav bars on *.htm pages, what I call content pages, have three dark strips along the top. The upper strip is like cookie crumbs, taking you to welcome pages up the hierarchy (to the left of the ||) and to frequently used Ricci Street areas (to the right of the ||).

The bottom nav bars have a set of links to welcome pages throughout the rest of Ricci Street. They are designed to keep every page two or three clicks away from every other page.

page 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.

HTML

Can you name every structural part of your page, every thing or object (the proper technical term), that is, every HTML tag?

View source and disassemble the page. Better yet, look at your page in FrontPage's HTML view. Make the connection between the sections of code and corresponding features on the page.

If there are any tags or attributes you don't understand, the Toolkit's The Anatomy of a Web Page or Webmonkey is a good place to clear up the confusion, especially Webmonkey's quick list of tags. Remember that the HTML Compendium has a complete list of all the tags, attributes, arguments, and (in)compatibilities.

head tags

Between the head tags, you should see several tag pairs that include the title tag <title>, several meta tags <meta>, and a link tag <link>. You may also have a script tag <script>, which we will ignore for now.

Please copy and paste the contents (the words between the quotation marks after content=) of the description and keyword meta tags and comment whether they seem appropriate to you. Learn more about meta tags.

Does the description succinctly describe the page's value? Learn more about meta tags.

The link tag brings in the style sheet that your page shares with every other page in Gizmos, Inc., or Port 80. The style sheets are called gizmos.css and port80.css. You will find this file in your C:\WINDOWS\Temprorary Internet Files\ folder. Go to Start | Find | Files and search for *.css. Sort the results by name and look for gizmos.css or port80.css. They may well have a [1] in them, for example gizmos[1].css.

Open that .css file in Notepad. It contains the style information (font, color, positioning, etc.) for all six h tags, the many classes of p tags, and the a tags.

body tags

Most pages use three levels of h tags; some use four. Look at the style sheet information for the head tags. For example:

H1 {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-large;
font-weight: bold;
line-height: 150%;
text-align: center;
margin-left: 10px;
margin-right: 10px;
background-color: #ffcc99;
color: #331A00;

}

h1 text - a standard font, large, bold, and centered, with a buffer of at least 10 pixels right and left and a background color the same as the rest of the page.

That produces:

A large bold centered heading

h2 text - centered within a bar, itself centered, for example "Structure" above on this form page and "Content" below. Most h2 tags have a triangle above left. It serves two purposes. Clicking on it will take you to the top of the page. It will also be where you click to when you click on the "this page" link at the top of the page.

h3 text - flush left, a light yellow on a dark background strip.

h4 text - flush left, smaller, on a darker background strip.

How many of each are on your page?

The rest of the text is in p tags, <p> and </p>. They come in five classes: body, lightbox, transbox, darkbox and foot. For example:

.body {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: normal;
line-height: 105%;
text-align: left;
margin-left: 10px;
margin-right: 5px;
background-color: #ffcc99;
color: #331A00;

}

That produces the look of the paragraph you're reading now. Compared to the h1, the .body class of p tag is smaller and flush left without as much padding -- 105% instead of 150%, and 5 pixels on the right instead of 10. However, it still has the 10 pixels on the left to indent it from the solid strip running down the left edge of every Ricci Street page.

Looking at the "body" of the page -- between the top and bottom nav bars -- how many of each class is on your page?

body

lightbox

transbox

darkbox

foot

Your page also has image tags, <img>. In addition, it may have horizontal rule tags <hr>. When you find them, note the attributes. Finally, some of the text may be nested between pairs of table tags, <table> and </table>. The table walls may be visible, as in the set of text boxes above. They may be invisible, as in the bottom nav bar on every page. You may also see tables nested within tables. The <tr> tags refer to table rows; the <td> to table cells. The <td> tags may well have p tags nested within them. The tables may also be nested within <div> tags to center them in Netscape's older browsers. Please ignore the <div> tags for now.

How many of each type of tags are on your page?

img

table (pairs of tags)

Are there any tags on your page that are not accounted for above? If so, please send the HTML code or a description.

Content

Look at the part of the page between the top and bottom nav bars.

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

What percentage of the links (excluding the top and bottom nav bars) are:

on-site (somewhere within RicciStreet.net)

off-site (different domain name)

What percentage of the text, roughly, was written by me? What percentage is annotated links? What percentage is a cited link?

Example of annotated link:

In Blown to Bits, Philip Evans and Thomas S. Wurster explain (p. 15) the difference between information (bits) and things (atoms).

When a thing is sold, the seller ceases to own it; when an idea, a tune, or a blueprint is sold, the seller still possesses it and could possibly sell it again.

Example of cited link:

What Comes Next?
by Erick Schonfeld
Business 2.0, September 14, 2001

Yesterday, another co-worker of mine bought a copy of Flight Simulator to see if the software could replicate the approach to the World Trade Center.

What percentage (roughly) of your page is the following kind of text?

written by me

annotated link

cited link

What is the page about? What is its context -- what other ideas does it relate to? Is it organized in a way that seems logical to you? Do the links, especially the off-site links, deliver what they promise? Do they deliver what you need? Do any words or links seem unnecessary, redundant, or confusing? Is anything missing?

Instead of making your response part of this form, please answer this question at the Bistro's MBA 504 Roundtable. Everyone will be able to read it, so don't forget to identify which page you are critiquing.

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 your page with both Netscape's Navigator 4 (or 6, if you're using it) and Microsoft's Internet Explorer 5 (or 6) browser. 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.

General

Compared to other sites you have visited on the web, how would you rate this one for ease of use?

Stewardship Page Design Critique

technique

Page Info

Structure

organizing principle