The New Guts of the Internet
A Frodo's Notebook Staff Editorial
by Timothy G. Rezendes - Director of Design and Technology

If you are a returning reader of Frodo’s Notebook, you have noticed, I am sure, that there has been a dramatic change to the site’s design. Anyone who has been reading the publication since before this June knows that this is the second such change in a relatively short time. The design change that occurred for our summer 2002 issue was intended to signal a new era in the publication’s history and to improve the site’s organization, readability, and aesthetics. The design of Frodo’s Notebook that we unveiled in June was the result of many hours of hard work on the part of all five members of the editorial board. As hard as we worked on the site, it had its problems. I can only speak for myself, but I know that I was never 100% happy with the way it looked. As much as I liked the design, it didn’t quite feel right. Also, we received feedback from several readers who provided us with constructive criticism. In the end, it was decided that we had achieved our goal of improving organization and partially realized our goal of improving aesthetics, but had missed somewhat in our attempt to improve readability. Frodo’s Notebook needed to go back to the drawing board.

The summer 2002 issue involved a total overhaul of the entire site. I went into the project knowing that it would be a lot of work, but that it would be a one-time ordeal. Future updates would be relatively simple affairs. I came across an article this summer, however, that made me realize that I was in for another overhaul very soon. That article was on web standards compliance. As much as Frodo’s Notebook needed a new face for the fall 2002 issue, that face is not the most important thing about our most recent design overhaul.

In some areas of the site—the home page and the introduction for instance—the new changes are apparent. In other areas, you might not notice any change at all from the last issue. Despite that fact, not a single page of the site has been left untouched.

The most important changes that have been made for this issue of Frodo’s Notebook are in the way the site is coded. Frodo’s Notebook is now written in accordance with standards set forth by the World Wide Web Consortium.

The World Wide Web Consortium (W3C) is a group that was founded in 1994 by the minds behind the Internet. The goal of W3C, put simply, is to ensure that the web works as well as it can. The W3C develops standards and technologies for the web. They, for instance, are the organization that defines what is and is not valid HTML code. Browser makers use recommendations written by the W3C to define how their browser will display different HTML elements.

One way to see that the web works as well as it can, is to ensure that all browsers display the same code the same way. To that end, the W3C writes recommendations and defines standards. Unfortunately, until recently, very few people have really paid close attention to W3C standards. You have probably noticed that many web pages look different depending on what browser you view them in. If you view a given web page in Netscape 4, Netscape 6, Explorer 5 for Windows, Explorer 5 for Mac, etc. it may be (indeed, probably will be) rendered differently in each. As a web designer, this problem has plagued me for years. It was one of the most prevalent problems I faced in designing the first overhaul of Frodo’s Notebook. I had to continually adjust the layout and coding of the site to get it to have a consistent look across browsers. Within the last two years, however, browser makers have begun designing their browsers to more closely follow W3C standards.

If the summer 2002 issue of Frodo’s Notebook complied with any W3C standards, it was purely by accident. This fall issue has been entirely rewritten using XHTML and CSS in order to very deliberately comply with these standards. XHTML stands for Extensible Hypertext Markup Language. It is closely related to HTML, but adheres to stricter guidelines than its older cousin. CSS stands for Cascading Style Sheets. Assuming you have some knowledge of HTML, if you look at the source code of any of the pages at Frodo’s Notebook you will notice two things that differ from many other web pages. One thing is the fact that there are no <FONT> tags defining color, typeface, or any other attributes of the text. The second thing is a line of code within the head section of the page that reads <link  rel="stylesheet"  href="fn.css"  type="text/css  />. That line of code references a stylesheet. Stylesheets allow the design of the site to be separated from the content.

At Frodo’s Notebook, every page draws all of its stylistic elements—color, font size, font style, paragraph spacing—from one of two stylesheets: fn.css or pieces.css. This means two important things. First: I can give Frodo’s Notebook a whole new look in a matter of minutes instead of hours; by changing a few lines of code I can change the colors, sizes, and layout of most of the site. Second: by separating the design of the site from the content, the site becomes accessible to non-traditional web devices from web enabled cell phones to Braille readers.

Despite all of its benefits, redesigning the site based on XHTML and CSS has its disadvantages. One such disadvantage is that standards-compliant browsers are still relatively new, as is the serious movement in support of standards-compliance. Those facts mean that your browser may not support CSS correctly. They also mean that I am still learning. The new Frodo’s Notebook is a vast improvement over even our summer update, but it is still a work in progress. I am going to continue reading, studying, and improving. In the meantime, I have some favors to ask of you. At the bottom of this article, there are some links to websites with more information on standards-compliance and the like. If you take any interest at all in web design, please visit some of these sites and do some further reading on this topic. Also at the bottom of this page are links to download sites of standards-compliant browsers. If you are not already using one, please download one. It will allow you to see Frodo’s Notebook as it is intended to be seen and it will help encourage further support of standards-compliance by browser makers and web designers.

Frodo’s Notebook is undergoing some important changes right now. The staff is growing, our name is reaching more and more people, we are taking a more hands-on role in the encouragement of teenage writers, and the site has undergone a major face-lift. But I suggest to you that one of the most important changes we are making is not a very visible one. Besides just the face of the website, the guts have changed too. The Internet is changing; it is growing. By changing our infrastructure, our guts, we are staying on the leading edge of that change.

Aricles and Sites
To Hell With Bad Browsers at A List Apart
Why Don't You Code for Netscape? at A List Apart
The New York Public Library Style Guide
The Web Standards Project
The World Wide Web Consortium

Standards-compliant Browsers
For all platforms:
Mozilla
Firefox *
Netscape 7 or higher

For Mac OS X
Camino
Safari *

For Windows:
Internet Explorer 6 or higher

* Highly Recommended

©2002

To Print this piece: Click Here, or press the print button in your browser's toolbar.| Return to HOME