learn

A Note on the Common-place Redesign

When I was asked to design Common-place back in 1999, the editors requested that it “look like a broadsheet.” Seventeenth- […]

image_pdfSave to PDFimage_printPrint

When I was asked to design Common-place back in 1999, the editors requested that it “look like a broadsheet.” Seventeenth- and eighteenth-century broadsheets–large sheets set in an unvariegated sea of tiny columns of text–were in many ways the opposite of Web pages. Broadsheet design reflected movable type’s strengths and weaknesses: the sheer amount of labor required in locking up a page of text and the costs involved in paper and ink meant that every pressing counted. On the other hand, the medium of Web pages is virtually inexhaustible, although the individual pages are confined to the size and resolution of the computer monitor.

There will probably be growing pains involved.

The look upon which we settled used what techniques were available in Web design five years ago. HTML (Hypertext Markup Language), the formatting language of the Web, was never intended to be a flexible layout tool, but designers for the medium discovered that through a careful use of tables and graphics it was possible to imitate some of the look of a printed page, and this was the technique I chose. However, these techniques are labor-intensive, prone to error and variation on different machines, and less accessible to special-needs visitors, such as blind surfers using Braille browsers.

The last few years have seen the rise of new coding methods and practices for the Web. There has been a call for accessibility and standardization: pages should be readable by a variety of devices, including Web browsers, PDAs, cell phones, television browsers, and should be searchable and easily indexed by automatic systems. To achieve these ends, designers and developers are turning away from traditional HTML using table layouts to the new markup language XHTML (eXtensible Hypertext Markup Language) using CSS (Cascading Style Sheets).

The basic idea behind all this technical stuff is to separate the content of a page (that is, the text, images, and other information) from the page’s format (columns, fonts, colors, etc.). If later the same content is reused in a different venue than a Web page–say, a printable version of the page–no new coding is necessary to reformat the content. If a redesign is required, changing the style sheet is all that is necessary to change the look of the entire site. These are some of the practical reasons that I have switched to XHTML/CSS in the design of the Common-place.

But beyond utility, I have also used this redesign as an opportunity to rethink the way the site looks and to tweak it visually. While the overall look is very much of a whole with earlier editions of Common-place, the new page design reflects more closely the way people use the site.

There will probably be growing pains involved. Older browsers don’t understand CSS in full or in part. Netscape 4.x will not render correctly (and I apologize to the few of you still using it); Internet Explorer 5 for Windows renders with a few oddities. Other visitors with older browsers will probably find the design working in unexpected ways, but traditional HTML also had cross-browser issues. I suggest that you use this as an opportunity to upgrade to the latest version of Explorer, Netscape, Safari, Opera, or whatever your favorite browser may be.

In coming issues, I will continue working to make the new XHTML/CSS design more attractive and easy to use. I hope to format the printed version of the pages so that visitors who prefer to read the text in hard copy will be able to have a well-organized version without the “furniture” (navigational links, decorative graphics, etc.) of the online version. I also want to re-examine the applications such as the search function and the bulletin board to make them more attractive and easier to use.

I’m looking forward to, and hope you will enjoy, these changes.

 

This article originally appeared in issue 4.3 (April, 2004).


 

image_pdfSave to PDFimage_printPrint