"Planning before work protects you from regret; prosperity and peace." Bowl. Iran. 10th century (45.7 cm) The Metropolitan Museum of Art www.metmuseum.org Some thoughts about good web design Abstract: Some ideas about good web page and website design. These ideas are not proposed as the only guidelines for good web design, or as good to apply to all websites. I feel they have proven to be good criteria for this website, and that they are more broadly relevant. Selected pages from this website are offered to illustrate these ideas, with reasons why each was chosen. Note: If you click the little webpage icon () to go look at an example, please use your web browser's Back button to return to this page. Please email me your thoughts.

n important issue for every website, but one which becomes ever more important, the larger the website grows, is to make it as easy as possible for the visitor to maintain orientation, i.e., to keep the visitor from getting lost. (This website currently has almost 400 static pages + numerous other pages generated dynamically by "cgi scripts", and over 9,000 internal hyperlinks + over 1,000 links to external sites....)

Connected with this is the need to make it as easy as possible for the user to find what's here, and to arouse as much interest as possible to inspire the user to go check these things out. --Unlike the Athenians sacrificed to the Minotaur in the Labyrinth on Crete, if the visitor to my website finds it infelicitously labyrinthine, they can simply click their web browser's Home button and be done with me. --I cannot entrap a visitor in my website (I'm not their teacher or their boss...); I must appeal to them to freely want to stay on my website, and to explore and engage with it (i.e., with me).

I have addressed the navigation and orientation issue by including a rich variety of "layered" site maps, tables of contents, etc., by employing a consistent page format ("template", "style"...), and by liberally displaying the "which way to?" icon (example at right), to enable the user to return from wherever they are to the Visual Site Map ("home base"). I have tried to help entice and facilitate the user to explore other resources on the site by including links to related pages as part of the navigation "apparatus" at the bottom of each page.

A secondary issue, once I have attracted the visitor's interest, is how to get them to come back again (and again and again...). I have tried to facilitate and encourage this by including near the top of my home page, and in other "strategic" locations, a "What's new here?" icon (example at right). A returning visitor can quickly and easily get to what is new since their last visit, by clicking this icon to go to the Change Log, where I list every substantive modification to the site at the same time as I make the change itself.

Unless your website is very simple and you change it infrequently, on every page, place last-modified date and version number (since a page can be changed more than once in a single day). This will help you know if you have lost anything, and enable you to know what a visitor is responding to if they make some response that does not make sense to you ("Which version is it you are responding to? Please give me the version number at the bottom of the page.... Oh! I changed that long ago. Please let me know what you think of my current version...." Place the URL of each page on the page so that if a person finds some value in it, they can find it (find "you"...) again -- esp., if they only see a printout of the page, or see it in a frame in somebody else's -- e.g., a search engine's -- web page.

In the opposite direction, do yourself and your readers a favor and put an email response link on every page. If the reader has a response and can't find a way to send it to you, the reader gets frustrated, angry or just discouraged; you miss out on free advice. Do you have any comments about this or anything else? Please send them to me at: bradmcc@cloud9.net!

nother of my design principles is: depth: I try to make as many things as possible on the site link to some further elaboration of themselves. ("In my father's house are many connecting rooms, attics and sub-basements"? -- contrast with the Levittown one-story house on a concrete slab....) Example: The visual site map is layered over the site Table of Contents, which is layered over the site's "analytical table of contents" (and each "lower" level of detail also links back to the higher levels...).... In addition, every image links to something, if only to "itself", so that every page is as "alive" as possible. [Having non-hyperlinking images link to themselves also facilitates users of the Lynx "text mode" web browser being able to view the images.]

A different kind of "depth" I cultivate is to make each page's HTML source code syntactically correct (web standards conformant), and, hopefully, even itself beautiful, so that, if the visitor checks out the emperor beneath his clothes, they will find that what's "underneath" is good, too.

"Depth" is also built up through formulaic deployment of clearly and evocatively expressive elements (esp. icons). By encountering these same symbols over and over, in different contexts, a person builds up around each an ever richer "associational aura", so that when the element appears in one place, it evokes through referential allusion many other enriching (in-form-ing) associations -- to rise as high as possible, above Pidgin, toward Shakespeare and George Steiner.... Each page a little world (microcosm). The technical capability in HTML to traverse different contexts of a symbol's use by clicking on it in one to go to another should be imaginatively evocative (synergistic). [Is there also an analogy between iconic symbols on a webpage and hallmarks in precious metal decorative arts?]

	Icon Gallery: Examples of icons I use in this website, used to be here. Loading the many icons made this page very slow to load. So I moved the Icon Gallery to its own page. To visit Icon Gallery, Please click here. Or: Click here to pop up Icon Gallery in a new browser window. Thank you.

No thin meaning ("superficiality"...), and no "dead ends"! I hope the synergy of all the methods I have described gives the visitor many places to explore, and many ways to explore each ever further, while never getting lost -- to enrich but not overwhelm (to offer an Internet Rabelaisean study space, and Abbey of Theleme, not a [Resnais-ean] "Last Year at Marienbad").

nother basic design principle: Use only HTML 3.2, unless there is cogent reason to go beyond it. This should help assure that the widest variety of web browsers, and not just recent versions of Internet Explorer, can view the page in a way that doesn't look too bad. [Of course, there is the still fortunately distant but alas not disappearing threat that some day support for <font color=maroon><b>formatting attributes in HTML tags</b></font> may be removed from web browsers, even though those attributes are simple to understand, easy to use, and part of W3C standards....]

The main reason many of my pages are validated as HTML 4.01 Transitional instead of HTML 3.2 is that I like to use different color backgrounds in table cells. If a visitor's web browser does not support this feature, no major harm will be done (my pages will just look more monochromatic...). Also, I do not use HTML frames, in part because they are not universally supported, but even more importantly, because Internet Search engines tend not to index pages with frames well, and someone as "small" ("unknown", etc.) as myself needs as good Search Engine rankings as I can get.

I believe in the Bauhaus esthetic: "Less is more". I think exquisite esthetic results can be produced with the restricted tag set of HTML 3.2 (especially if extended with the single enhancement of the TD tag BGCOLOR= parameter! -- see, e.g.: my Katonah Museum page). I strongly believe in deploying "white space" for all it's worth, for such reasons as to give the person looking at the page "breathing room". (This derives from the "Japanese esthetic" that the "negative space" around things is at least as important as the "positive" shapes of the things in the space.)

Examples

	Homepage. Provide as much important information about the site as possible, in a clear, appealing, succinct way. Also: Make it as easy a possible for Internet Search engines (e.g., Altavista) to index the site -- since getting high ranking on search engines is a primary way I can let persons know the site exists and thereby give them the opportunity to visit (almost every page on the site is at most 2 hyperlink "hops" from the home page).
	Visual site map. Provide the visitor with a "picture" (an over-view...) of the website, to help them find their way around in it. In addition to the visual site map, the page also contains an HTML dropdown "selection list" of the site's contents, and links to some site features of general interest (with brief descriptions of why they may be of interest). If the visitor clicks on the background of the visual site map (or on the "Table of Contents" "button" in the map...), that takes them to the site "Index/Table of Contents" (a kind of "first basement" to the visual site map).
	Website table of contents. It's dark in the basement (go to the page to see what I mean here...). If the visitor is using the Microsoft Internet Explorer 4.0+ web browser, however, each item lights up, when they move their mouse cursor over it. (Clearly, the design I have used for this page would not work well for most other purposes.)
	Website page inventory. Page automatically generated by a Perl script, from my "canonical" local disk copies of the pages and their embedded HTML <TITLE> tags. This automated process assures the page inventory is accurate and complete. In the process of inventorying the pages, the script also checks them for conformity to a number of formatting standards (e.g., making sure all the 1,400+ images have HTML ALT= parameters, and that the 15,000+ internal hyperlinks have valid target URLs). This adds another "layer" of validation beyond my habit of submitting each page to the W3C Consortium HTML syntax validator each time I make any change.
	Links to other interesting places on the Internet. I try to arouse the visitor's interest to visit these sites, by offering each selection in its own little "presentation space" (HTML table), by giving a synopsis of what the visitor will find if they go there, and, where possible, also displaying a little "teaser" picture from the site.
	Quotes I like. Example of organizing a lot of "tabular" information in a clear and appealing way. One reason for numbering as well as dating each entry is, in yet another way, to try to help keep the visitor from becoming disoriented among the large amount of material presented.
	What time does your computer think it is? Example of a page that organizes a lot of hyperlinks in an appealing way. See also: "it's About time" page, which uses HTML tables to lay out a number of quotes in a way that makes each stand out as distinct and special yet still maintain their unity of theme. (Also: Titles of these two pages are examples of how I try to use intriguing "word plays" to engage the visitor.)
	Katonah Museum of Art. Subtle use of "white space" to make a web page in its entirety be a "work of art". Note also: At the bottom of this page is a little box with numbers 1 thru 8: Click these numbers to see other web pages which are mostly "visual" with very little text.
	Convenient public transportation for the Clintons' new home. Another example of "total design", in which even the background plays a vital role in the page's expressivity.
	Finally: this page itself -- including: its HTML source code.... I believe self-reflection is important -- so that we can give an accounting for ourselves, have the delight of savoring our good experiences, and more.... As part of that orientation, I like self-referentiality (i.e., wherever possible, an assertion should be evidence for the truth of what it asserts). Question: How well do you think this page illustrates the things I have said in it?

	Whenever I cannot think of something interesting to add to this site, I feel discouraged. Then I ask myself: "What is the worst, the least well done thing I can think of on my website?" I then proceed to work on that, to try to make it better. Raising the floor is at least as important as raising the ceiling.
	Whenever else you do, Add value ("value added"). What value are you going to add to human[e] culture [aka: Civilization...] in the next 24 hours?
	This website is increasingly becoming an integrated self-auditing system. Item: Icon Gallery page (iconGallery.html) does not just display the various icon images I use throughout this website to improve navigational coherence (etc.). My site audit script (titles.pl) reads iconGallery.html, and builds a list of all the images in it. The script uses this list to distinguish "icons" (pointer signs) from substantive images (pictures which primarily say something in themselves), in counting images used in the site.

Navigation apparatus (etc.)

E-mail me your thoughts about my website and website design in general. Visit my icon Gallery. See table of colors used in this website.     Inspect the HTML source code for this page. Learn  right vs wrong way to code HTML tags: Do it right! Read document announcing HTML 3.2.   Go  to thoughts on: What is the purpose, use and value of this website? Read  computer aphorisms and recollections (Je me souviens). Read  website copyright © notice, and Terms and conditions of use.   What's new on this website? Go to website Table of Contents. Return to Brad McCormick's home page. Go to site map. http://www.cloud9.net/~bradmcc/designGallery.html Copyright © 1998-2006 Brad McCormick, Ed.D., Invenit et fecit. bradmcc@cloud9.net 16 January 2009CE (2009-01-16 ISO 8601)  v06.09 (40k)