"Web Design for the Average Professor:
A Discussion of the Development of the 'Rood and Ruthwell' Web Site"

Alexander M. Bruce

In the summer of 1999, I participated in the NEH Institute on Anglo-Saxon England. As a part of that institute, all participants were required to complete a project of some magnitude; I decided that I would create a web site focusing on two artifacts of Anglo-Saxon culture: the poem "The Dream of the Rood," preserved in The Vercelli Book, a tenth-century manuscript, and the Ruthwell Cross, an eighth-century object found in southern Scotland that contains some lines of "The Dream of the Rood" as runic inscriptions.

As I began the Institute and started to concentrate on my project, I soon realized that I was a bit out my element. I have a doctorate in English; I focused on Old and Middle English language and literature in my studies; I now teach medieval literature and, primarily, freshman composition, at a small school in Florida. I know how to write, how to design written, textual papers, and I can teach others to do the same. My training and experiences have not been in web site design. In graduate school, I had designed simple web pages for several of my classes; these were single-page web projects with only a few links. But prior to the NEH Institute I had never designed an extensive web site of numerous interlinked, inter-textual web pages. I felt frustrated and a bit lost, and I also felt a greater affinity for my freshman students who too often begin my classes not knowing how to get their ideas into a presentable form.

Coming to that realization, however, is precisely what saved me, for I began to think about how I teach freshman students to write in my composition classes. I applied to my new writing situation the same principles that I encourage my students to follow. To me as a writer of conventional texts with many years of practice, these principles had become second nature; I no longer consciously say to myself, "First I'll do some pre-writing, and now some drafting, and now some revising." I have my own methods of invention firmly in place; I know what works for me - at least for writing papers. Acknowledging that creating a web site was a new form of writing prompted me to treat myself as a freshman: I would have to re-discover how to write, in a sense, with my composition-teacher alter-ego leading the way.

I began the process by thinking about two broad facets of my composition pedagogy. First, I teach that writing is a recursive process, one in which the writer might plan, draft, plan some more, revise, draft, plan, draft, revise, revise, and so on; writing does not so tidily consist of the linear process of "pre-write, write, re-write, turn in." Every textbook I've used, such as the St. Martin's Handbook or The Little, Brown Handbook, has reinforced such a recursive approach, as does my own experience with the writing process. Yet even while the process is recursive, there are discernible elements of planning, drafting, and revising - and planning certainly comes first.

The second facet of my composition pedagogy relates to my role as an evaluator; that is, I thought about how I grade papers. When I grade, I focus on four domains. First, I consider the writer's content, and with that, the writer's treatment of the audience, because content and audience are intimately related. I look for a thesis and developed content that speaks to the audience. I consider next the organization: there should be a clear, controlled plan to the paper. Then I evaluate the style, the use of effective and engaging language. Finally I turn to mechanics, the proper use of grammar and punctuation. Mechanics come last because, if used properly, they aren't even noticed by the reader. If the improper use of mechanics becomes too distracting, I stop reading the paper. This hierarchy of concerns - content and audience, organization, style, and mechanics - makes such good sense to me that I will use it as my outline for the rest of the paper.

Before getting into the particulars of my approach to web site design, though, I first need to define two terms I have used and will continue to use. First is the term web site: in my definition, a web site is a group of related web pages. Just as a journal presents a number of essays on a common topic, so too does a web site present interrelated individual pages. The second term is reader, which I use for the person interacting with my web site. I prefer reader to other possibilities, such as browser or viewer because reading seems more focused than browsing and more active than viewing.

I. Content and Audience

I began by considering and defining my target audience. I decided that my audience would be college undergraduates, specifically those in my sophomore survey classes or upper-level medieval literature courses. I would recommend my site to my sophomore students reading "The Dream of the Rood" as part of their introduction to British literature, and I would require it of juniors and seniors studying the poem in greater depth, for I definitely want my medieval literature students to appreciate the interaction of text and image found on the Ruthwell Cross. I did anticipate that my site could be visited by many other researchers, from high school students to college professors, but I felt it was important to define my audience as students I actually knew and with whom I had worked with in order to provide the most suitable content.

Having identified my audience, I had to consider what they would best respond to in terms of presentation and content. I thought about how much text the students would be likely to read and how much they would rely on images; I also considered the reality that so many of my students are used to learning from images. On my site, I wanted my students to see the connection between the physical cross and the poem. Students can easily acquire a translation of the poem; pictures of the cross, especially ones that link immediately to the text, are harder to find. My site thus has many images, and the pictures are very much the central feature of the site. I still have much textual commentary, but the text is almost always associated with an image.

The level of detail within the textual commentary was another factor to consider. I knew my students would not be specialists-they would be just starting to learn the basics of the poem and the cross. I therefore decided to include only basic information. My site offers an introduction to the poem and the cross and the relevant criticism; I avoided controversial perspectives, though I encourage curious students to follow the bibliography and links to discover other ideas. The more introductory content also led to shorter individual pages, which suited me as I supposed that my audience would rather have its information in more manageable pieces.

Writing the text for each page was straightforward enough. As each page consists, for the most part, of a short, conventional, textual essay, I was on familiar ground. I could follow the writing principles I had been practicing since high school, and plan, draft, and revise as necessary.

II. Organization

For this presentation I will speak of organization as if it came "next," as if once I had the content, I then began to organize it. But of course writing doesn't progress quite so linearly, from (1) deciding content to (2) organizing it. Content and organization, as usual when writing, were constantly intertwined for me, as I couldn't generate material without considering where and how I would incorporate it. So please don't think that writing a web site encourages a linear progression any more than we progress through linear steps when writing an old-fashioned paper. However, the organization of the web site did differ dramatically from the organization of a conventional paper in the way that I created an "outline" of my web site. Actually, the non-linear structure of the web site meant that I could not make my traditional outline. What helped me shape the web site was using a technique called clustering. Composition handbooks usually include clustering in the section on invention, when writers are just beginning to generate content. I have always introduced students to the technique of clustering but had rarely used it myself, preferring such strategies as free-writing and brainstorming. When clustering, students write down a key idea and draw a circle around it. Related ideas are drawn about the key idea; they are circled, and lines are drawn to connect related thoughts. As the student generates more related ideas, they too are connected with lines, and, in effect, a web is created. This model (see Figure 1) served me very well when planning my site, and taking time to plot the connections was well worth it.

Once I had my meta-form in mind, I began tinkering with page layout. I wanted to establish a consistent format so readers could make sense of the organization; the symmetry would help the reader follow the form. I gave each of the six main pages (not counting the home page) essentially the same design: each has one of two icons with an index to the right and the main navigation toolbar beneath (see Figure 2). The two icons are of a cross for pages relating to the Ruthwell Cross and of a manuscript excerpt for pages relating to the poem; readers thus have an additional cue to help them understand what type of page they're on. Two of these main pages (Images and Texts) provide an index that leads to other groups of pages, while the other four main pages each have a list of internal links. The navigation bars that help the reader move through the site are always in the same place. In addition to placing navigation bars consistently, I also sought to improve the flow of ideas by providing a link to a page or image whenever I mention it so that the reader doesn't have to try to remember pathways. Another useful sort of link I include, especially on longer pages, is the "return to top" button so that readers can more about more rapidly.

I do have some dead-end pages. With the full-page images, the reader has to use the "back" button on his or her browser; I did not include any navigation bar or any text at all with the full-page images because I did not want anything to slow down the downloading of the images. The page on the Bewcastle Cross is also a dead-end of sorts as it gives the user only one option - a link back to the "About the Ruthwell Cross" page. I did not put a full navigation bar on this page because it is not one of the main points of the site. Making the reader go back to the immediately preceding page, I think, helps keep the reader from getting lost.

Here I will point out that I decided against using frames to help organize my pages because I wanted to be able to present images as fully as possible, and the frame would have taken up space.

III. Style

When I speak now of style, I mean some of the features of layout that make it easier for the reader to read the information on the page. First, I have lots of "white space," so to speak. Technically, it isn't "white space" because of the background - which itself, as an image of a panel of the Ruthwell Cross that has runic inscriptions on it, reinforces the link between text and object. But the background is intentionally very light so as not to interfere with the text.

I used a 14-point font in plain black for easier reading. Actually, I chose the default font which means it will show up according to the reader's preference, but I did not choose a fancy font that not every reader would have. Italics show headers and titles; underlining is reserved for links, which I made red to help them stand out.

On the pages with text, I made sure to use "thumbnail" images instead of large images to help with the speed of downloading. If they choose to, readers can click on the "thumbnail" to get to the larger image. Again, the enlarged pictures are presented alone, with nothing else to slow down their loading. I used compressed JPG as the file type for large color pictures and GIF for black-and-white shots. The GIF format has a higher resolution and thus GIF images may be slower to download, so I used it only on the more simple black-and-white images. Making a thumbnail is easy: in Photoshop (or whatever program), either shrink the image down to a square inch or so, or crop out a salient feature (a head, for example) of about a square inch.

Because I kept all my main pages fairly short and used only thumbnail images, I have found that they load quickly.

IV. Mechanics

Under "Mechanics" I cover a grab-bag of other issues - some little, some actually very important - that one should keep in mind when writing a web site. First is the issue of copyright. The first rule of course is to give credit where credit is due, and that's a good start. Particular cases will warrant closer attention, and, not being a copyright specialist, that's all I'll say on the subject.

Also important is the issue of platform - IBM compatible vs. Macintosh. I was making my site initially on an IBM-type computer, but rather soon into the process I checked how the site would appear on a Mac. I was glad I checked, because sometimes the whole layout looked different. I thus took steps to keep things consistent. I still haven't ironed out one problem with character sets: the Anglo-Saxon written characters thorn and eth appear well enough on an IBM, but Macs don't have the same character set. I won't say that working on one machine was a better experience than working on the other-in fact, each worked well enough. I just encourage web designers to test their web sites on each platform.

Perhaps a related issue is what editing program to use. I used both Netscape Composer and FrontPage editor. They are very similar, though each has its strengths and weaknesses. I think either really does very well.

I'll point out that I have two useful bits of information on the home page. One is a running total of how many hits my site has received; I loaded this from a company called SiteMeter, and clicking on my counter takes one to the SiteMeter site, which has information on how to sign up new web pages. The other is a statement of when the site was most recently updated; I think keeping the site current helps readers feel confident about its reliability.

As with anything done on the computer, save early, save often, and make back up copies.

Finally, I remind web designers that there are three certainties in this world: death, taxes, and you will always spend more time on the computer than you ever anticipated. Expect this from the start to avoid grief and heart-ache. Plan to have to do it all over, maybe twice over, and perhaps you'll be less frustrated as you progress. Perhaps.

This file was posted on 17 May 2001.
Please send your comments to Michael DiMaio, jr.

Return to the Table of Contents