The great thing about the web is that we can now express ideas in ways that mimic how our minds work. We link all sorts of information in unusual ways in our brains. Now we can do that readily on the web. As we do, we need to make sure our audience can follow and find what they want. You may want to amaze people with your clever ideas, but that does not mean dragging them into a maze of puzzled clicking. This week will not substitute for a class in web design. However, we will consider how to plan a site so that the content you want to share is available.
What to Do This Week
1. If you are using HTML 4 by Dave Raggett, read chapter 18 about "Designing Your Web Project." If you do not use the Raggett text, look over the style guides listed in the Readings for this topic. The book by Robin Williams and John Tollett, The Non-Designer's Web Book, is an excellent introduction to design issues.
2. Read these "Notes about Planning."
3. Visit the web site for the UC Berkeley Museum of Paleontology that Dave Raggett uses as an example when discussing navigation. Try the various sections and see how they are organized to display information.
4. If you know of a site that illustrates a good approach to structure and navigation, send the URL to the ListServ with your comments about what we can learn from it.
5. You have already begun planning your site in the homework submissions you have done to practice coding. Now do a "storyboard" using Post-Its as described in the "Notes about Planning." Instead of turning in a written storyboard, do a rough prototype of the project on the web. You will do a page for each of the Post-It notes you prepare.
This means that the file named "index.htm" (or "index.html" or "home.html"), the first page on your site for this class, should now be the sketch of the page that will be "index.htm" for your project. You should also include on it a link to your midterm and links to homework you submit for the next few weeks. Of course, you can take these down when you near completion of the project.
Most of the links from your "index.htm" page should go to the other pages that are rough sketches of the pages you are designing.
You do not need to worry about perfect coding and validation for these pages. These are merely rough sketches of your project pages. After you have read the "Notes about Planning," see the example of storyboard/prototype that is based on the example in the notes. As you work on each page, you can replace the rough sketch with the finished product.
6. Write out the "To Do" list described in the "Notes about Planning Your Site." Post the list, linked to your "index.htm" site, as a file called "assets.htm" for now. Of course, you will get rid of this when your project is finished, but it is good to have the list up now. You can either do up one list that describes all the graphics, links and objects you need to prepare for your site, or you can post the list broken down for each page.
If you do the page-by-page "To Do list" in Excel 97 (as was done in the example for "Notes about Planning"), you can then highlight the cells you have filled in and "Save as HTML". This will give you a file to post on the web for your list. (This will not work with the 95 version of Excel since the earlier version does not have the "html wizard." )
Once you have done all this, you will appreciate why I think we should call this process "reality check" instead of "storyboarding." When you do this work, you see what it will take to actually prepare and post your site!