As of:  Mon 2014-09-22 22:16:36 UTC  [=1411424196. 18:16:36-04:00]

>> designGallery.html  L: 40,219. A: 100644. M: 2009-01-17 01:05:05 UTC [=1232154305] -2074.88d >> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Some ideas about good web design</title>
<META NAME="description" CONTENT="My criteria for good website design.
Examples of good web page design, from this website, plus why I think they are good.
This page itself should exemplify the criteria it sets forth! Your thoughts?">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#D3D3D3">
<center><table cellspacing=0 cellpadding=0 border=0 width="90%">
<tr><td><img src="sp.gif" height=2 width=2 vspace=1 alt="[ ]" border=0></td></tr>
<tr><td bgcolor="#070707"><table cellpadding=0 cellspacing=0 border=0>
<tr><td><img src="sp.gif" height=2 width=2 hspace=4 alt="[ ]" border=0></td>
<td valign=bottom align=left><table cellspacing=0 cellpadding=0 border=0>
<tr><td><a href="jpg/islamicBowl.jpg"><img src="jpg/islamicBowl.jpg" height=250 width=250 alt="[ 10th century Islamic (Iranian) bowl :: exquisite calligraphy ]" border=0></a></td>
</tr>
<tr><td width=250 align=center><table cellspacing=4 cellpadding=0 border=0>
<tr><td align=center><table cellspacing=0 cellpadding=0 border=0>
<tr><td align=right><font color="#00FFFF">"Planning before work protects you
from regret; prosperity and peace."</font></td></tr>
<tr><td><img src="sp.gif" height=2 width=2 vspace=6 alt="[ ]" border=0></td></tr>
<tr><td align=right><font color=white><small>Bowl. Iran. 10th century (45.7&nbsp;cm)</small></font></td></tr>
<tr><td><img src="sp.gif" height=2 width=2 vspace=1 alt="[ ]" border=0></td></tr>
<tr><td align=right><font color=white><small>The Metropolitan Museum of Art<br>
<a href="http://www.metmuseum.org/"><font color=yellow>www.metmuseum.org</font></a></small></font></td></tr>
</table></td></tr></table></td></tr>
<tr><td><img src="sp.gif" height=2 width=2 vspace=1 alt="[ ]" border=0></td></tr></table></td>
<td><img src="sp.gif" height=2 width=2 hspace=4 alt="[ ]" border=0></td>
<td align=right valign=bottom><table cellspacing=0 cellpadding=0 border=0>
<tr><td><img src="sp.gif" height=2 width=2 vspace=7 alt="[ ]" border=0></td></tr>
<tr><td bgcolor="#DCDCDC"><table cellspacing=5 cellpadding=8 width="100%" border=1>
<tr><td bgcolor=white align=left><table cellspacing=0 cellpadding=0 border=0>
<tr><td><font color=navy><big><big><big><b>Some thoughts about good web design</b></big></big></big></font></td></tr>
<tr><td><img src="sp.gif" height=2 width=2 vspace=3 alt="[ ]" border=0></td></tr>
<tr><td><big><font color=maroon><i><big>A</big>bstract:</i></font>
Some ideas about good web page and website design.
These ideas are not proposed as the <i>only</i> guidelines for good web design, or
as good to apply to <i>all</i> websites. I feel they have proven to be good criteria for
<i>this</i> website, and that they are more broadly relevant.</big></td></tr>
<tr><td><img src="sp.gif" height=2 width=2 vspace=2 alt="[ ]" border=0></td></tr>
<tr><td><big><big>S</big>elected pages from this website are offered
to illustrate these ideas, with reasons why each was chosen.</big></td></tr></table></td></tr>
<tr><td bgcolor="#FFFFF0" align=left><big><font color=maroon><i><big>N</big>ote:</i></font>
If you click the little webpage icon
(<a href="GO/docimg.gif"><img src="GO/docimg.gif" height=16 width=14 hspace=2 align=bottom border=0 alt="[ Webpage icon ]"></a>)
to go look at an example, please use your web browser's <font color=purple><b><i>Back</i></b></font>
button to return to this page.  Please email me <i>your</i>
thoughts.<a href="signgb.html"><img src="emailme.gif" border=0
align=bottom width=20 height=12 hspace=2 alt="[ Email me! "></a>
</big></td></tr></table></td></tr>
</table></td>
<td><img src="sp.gif" height=2 width=2 hspace=7 alt="[ ]" border=0></td></tr>
<tr><td colspan=5><img src="sp.gif" height=2 width=2 vspace=7 alt="[ ]" border=0></td></tr></table></td></tr>
<tr><td><img src="sp.gif" height=2 width=2 vspace=2 alt="[ ]" border=0></td></tr></table></center>

<center><h1><font color=navy>Web Design Criteria</font></h1></center>

<!-- Some of my criteria for good web page and website design -->

<p><big><img src="gif/a.gif" height=34 width=33 alt="A" border=0 align=left>n
important issue for every website, but one which becomes ever <i>more</i> 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 <b><a href="everyman.html">getting lost</a></b>.
(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....)
</big></p>
  
<p><big><big>C</big>onnected with this is the need to make
it as easy as possible for the user to find <a href="sitetoc.html">what's here</a>, 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 <font color=purple><b><i>Home</i></b></font> button
and be done with me.  --I cannot <i>entrap</i> a visitor in my website (I'm not
their teacher or their boss...); I must <i>appeal</i> to them to freely <i>want</i>
to stay on my website, and to explore and engage with it (i.e., with <i>me</i>).</big></p>

<p><a href="Bradsmap.html"><img src="signpost.gif" align=right width=33 height=32 hspace=6 alt="[ Go to Site Map! ]" border=0></a><big><big>I</big>
have addressed the navigation and orientation issue
by including a rich variety of "layered" <a href="Bradsmap.html">site maps</a>,
<a href="sitetoc.html">tables of contents</a>, etc., by employing a
consistent page format ("template", "style"...), and by liberally
displaying the "<font color=purple>which way to?</font>" icon (example at <i>right</i>),
to enable the user to return from wherever they are
to the <a href="Bradsmap.html">Visual Site Map</a> ("<b>home base</b>").
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 <i><a href="#navig">bottom</a><a href="#navig"><img src="gif/return_character-x.gif" height=11 width=12 align=bottom border=0 alt="[ See related page links at bottom of this page! ]"></a></i> of each page.</big></p>

<p><a href="changelog.html"><img src="WhatsNew.gif" width=73 height=54 hspace=3 border=0 vspace=4
alt="[ What's new here? ]" align=right></a><big><big>A</big>
secondary issue, <i>once</i> I have attracted the visitor's interest, is how to get them
to <i>come back again</i> (and <i>again</i> and <i>again</i>...). I have tried to
facilitate and encourage this by including near the top of my
<a href="welcome.html">home page</a>, and in other "strategic" locations,
a "<font color=purple>What's new here?</font>" icon (example at <i>right</i>). A returning
visitor can quickly and easily get to what is new since their last visit, by clicking this icon to
go to the <a href="changelog.html">Change Log</a>, where I list every
substantive modification to the site at the same time as I make the change itself.</big></p>

<p><big><big>U</big>nless 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 <i>current</i>
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 -- <i>esp.</i>, 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.</big></p>

<p><big><big>I</big>n
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: <a href="signgb.html">bradmcc@cloud9.net</a>!<a href="signgb.html"><img src="emailme.gif" border=0
align=bottom width=20 height=12 hspace=2 alt="[ Email me! "></a></big></p>

<p><BIG><img src="gif/a.gif" height=34 width=33 alt="A" border=0 align=left>nother
of my design principles is: <b>depth</b>: 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 <a href="Bradsmap.html">visual site map</a>
is layered over the site <a href="sitetoc.html">Table of Contents</a>, which is layered over
the site's "<a href="titles1.html">analytical table of contents</a>" (and each "lower" level of
detail <i>also</i> 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 
<a href="http://lynx.browser.org/">Lynx</a> "text mode"
web browser being able to view the images.]
</big></p>

<p><a href="http://validator.w3.org/"><img src="valid_html4_01.gif" border=0 vspace=3 hspace=6 
align=right alt="[ Go to W3C Consortium HTML validator service! ]" height=31 width=88></a>
<big><big>A</big> different kind of "depth" I cultivate is to make each page's
HTML source code <a href="workspace.html#valid">syntactically correct</a>
(<i><a href="workspace.html#valid">web standards conformant</a></i>),
and, hopefully, even itself beautiful, so that, if the visitor checks out the emperor
beneath his clothes, they will find that what's
"<a href="http://www.users.cloud9.net/~bradmcc/cgi-bin/ascii.pl?filename=designGallery.html">underneath</a>"
is good, too.
</big></p>

<p><big><big><a name="iconStuff">"D</a></big>epth" is also built up through formulaic deployment of
clearly and evocatively expressive elements (<i>esp.</i> <a href="#icons">icons</a><a href="#icons"><img src="gif/down2a.gif" align=bottom hspace=2 height=10 width=10 border=0 alt="[ See icon set display, below! ]"></a>).
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
<a href="http://www.collectiques.net/hallmarks/">hallmarks</a> in precious metal decorative arts?]   
</big></p><!--     
    
    ** icons used to be here ** 
  
 --><center>
<table cellspacing=0 cellpadding=0 border=0>
<tr><td colspan=3><img src="sp.gif" border=0 height=2 width=2 vspace=3 alt="[ ]"></td></tr>
<tr><td colspan=3 bgcolor=maroon><table cellspacing=0 cellpadding=3 border=0>
<tr><td><a name="icons" href="iconGallery.html"><img src="jpg/iconGallery.jpg" height=168 width=476 border=0
alt="[ Click here to visit icon gallery! ]"></a></td></tr></table></td></tr>
<tr><td colspan=3><img src="sp.gif" border=0 height=2 width=2 vspace=4 alt="[ ]"></td></tr>
<tr><td><img src="sp.gif" border=0 height=2 width=2 hspace=2 alt="[ ]"></td>
<td align=left width=470><a href="iconGallery.html"><img src="gif/icon.gif" height=23 width=24 alt="[ Click me to visit website Icon Gallery! ]" align=bottom hspace=1 border=0></a><img src="sp.gif" border=0 height=2 width=2 hspace=1 align=bottom alt="[ ]"><big><font color=maroon><b><i><big>I</big>con
Gallery:</i></b> 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,
<i><a href="iconGallery.html">Please click here</a></i>.<a href="iconGallery.html"><img src="gif/rchr.gif" height=13 width=12 border=0 align=bottom alt="[ Click image of icons to go to Icon Gallery! ]"></a>
Or: <i><a href="iconGallery.html" target="iconG">Click here</a></i> to pop up Icon Gallery
in a new browser window. Thank you.</font></big></td>
<td><img src="sp.gif" border=0 height=2 width=2 hspace=2 alt="[ ]"></td></tr></table><!-- 

    ** icons used to be here **

 --></center>
<p><big><big>N</big>o 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 <a href="aboutTime.html">study space</a>,
and <a href="theleme.html">Abbey of Theleme</a>, not a [Resnais-ean] "Last Year at Marienbad").
</big></p>

<p><big><img src="gif/a.gif" height=34 width=33 alt="A" border=0 align=left><a href="valid_html3_2.gif"><img src="valid_html3_2.gif" height=32
width=48 border=0 alt="[ 'HTML 3.2 Checked' icon ]" hspace=5 vspace=3 align=right></a>nother
basic design principle: Use only <b>HTML 3.2</b>, 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 <b>Internet Explorer</b>, 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>&lt;font color&#61;maroon&gt;&lt;b&gt;formatting attributes in HTML tags&lt;/b&gt;&lt;/font&gt;</b></font>
may be removed from web browsers, even though those attributes are simple to understand,
easy to use, and part of W3C standards....]
</big></p>
  
<p><big><a href="http://validator.w3.org/"><img src="valid_html4_01.gif" border=0 vspace=3 hspace=6 
align=right alt="[ Go to W3C Consortium HTML validator service! ]" height=31 width=88></a><big>T</big>he
main reason many of my pages are validated as <b>HTML 4.01 Transitional</b> instead of
<b>HTML 3.2</b> 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.
</big></p>
  
<p><big><big>I</big>
believe in the Bauhaus esthetic: "<font color=maroon face=Arial>Less is more</font>". I think exquisite
esthetic results can be produced with the restricted tag set of <b>HTML 3.2</b> (especially
if extended with the single enhancement of the
<font color=purple><b>TD</b></font> tag <font color=purple><b>BGCOLOR=</b></font>
parameter! -- <i>see, e.g.:</i> my <a href="km.html">Katonah Museum</a> 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 <i>in</i> the space.)
</big></p>

<table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr><td><img src="sp.gif" border=0 height=2 width=2 vspace=3 alt="[ ]"></td></tr>
<tr><td><center><h2><font color=navy>Examples</font></h2></center></td></tr></table>
<table width="98%" cellpadding=0 cellspacing=6 border=0>

<!-- 10 proposed examples of good web page and website design -->

<tr><td valign=top nowrap><big><big>&nbsp;<a href="welcome.html"><img src="GO/docimg.gif" height=16 width=14 hspace=3 align=bottom
border=0 alt="[ Go to my home page! ]"></a></big></big></td>
<td align=left><a href="welcome.html"><img src="gif/door2.gif" height=32 width=32 hspace=5 vspace=4 align=right border=0 alt="[ Welcome to my website! Please come in! ]"></a>
<big><font color=navy><b><big>H</big>omepage</b>.</font> 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., <a href="http://www.altavista.com/">Altavista</a>) to <i>index</i> 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).</big></td></tr>

<tr><td valign=top nowrap><big><big>&nbsp;<a href="Bradsmap.html"><img src="GO/docimg.gif" height=16 width=14 hspace=3 align=bottom
border=0 alt="[ Go to Visual site map! ]"></a></big></big></td>
<td align=left><a href="Bradsmap.html"><img src="signpost.gif" align=right width=33 height=32 vspace=4 hspace=5 alt="[ Go to Site Map! ]" border=0></a>
<big><font color=navy><b><big>V</big>isual site map</b>.</font> Provide the visitor with
a "<b>picture</b>" (an over-<i>view</i>...) of the website, to help them find their way around in it. In addition to the <i>visual</i>
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 "<a href="sitetoc.html">Index</a>/<a href="sitetoc.html">Table of Contents</a>"
(a kind of "first basement" to the <i>visual</i> site map).</big></td></tr>

<tr><td valign=top nowrap><big><big>&nbsp;<a href="sitetoc.html"><img src="GO/docimg.gif" height=16 width=14 hspace=3 align=bottom
border=0 alt="[ Go to website Table of Contents! ]"></a></big></big></td>
<td align=left><a href="sitetoc.html"><img src="gif/up_black.gif" align=right vspace=4 hspace=5 height=16
width=16 border=1 alt="[ Go to website Table of Contents! ]"></a>
<big><font color=navy><b><big>W</big>ebsite table of contents</b>.</font> It's dark in the
basement (go to the page to see what I mean <a href="sitetoc.html">here</a>...). If the visitor is using
the Microsoft Internet Explorer 4.0+ web browser, however, each item <b>lights up</b>, 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.)</big></td></tr>

<tr><td valign=top nowrap><big><big>&nbsp;<a href="titles1.html"><img src="GO/docimg.gif" height=16 width=14 hspace=3 align=bottom
border=0 alt="[ Go to web page inventory! ]"></a></big></big></td>
<td align=left><a href="http://validator.w3.org/"><img src="valid_html4_01.gif" border=0 vspace=3 hspace=6 
align=right alt="[ Go to W3C Consortium HTML validator service! ]" height=31 width=88></a><big><font color=navy><b><big>W</big>ebsite page inventory</b>.</font> Page automatically
generated by a Perl script, from my "canonical" local disk
copies of the pages and their embedded HTML <font color=purple><b>&lt;TITLE&gt;</b></font> 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 <font color=purple><b>ALT=</b></font> 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 <a href="http://validator.w3.org/">HTML syntax validator</a>
each time I make any change.</big></td></tr>

<tr><td valign=top nowrap><big><big>&nbsp;<a href="elsewheres.html"><img src="GO/docimg.gif" height=16 width=14 hspace=3 align=bottom
border=0 alt="[ Go to other interesting websites! ]"></a></big></big></td>
<td align=left><big><font color=navy><b><big>L</big>inks to other interesting
places on the Internet</b>.</font> 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.</big></td></tr>

<tr><td valign=top nowrap><big><big>&nbsp;<a href="quotes1.html"><img src="GO/docimg.gif" height=16 width=14 hspace=3 align=bottom
border=0 alt="[ Go read things other persons have said that I like! ]"></a></big></big></td>
<td align=left><big><font color=navy><b><big>Q</big>uotes I like</b>.</font> 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.</big></td></tr>

<tr><td valign=top nowrap><big><big>&nbsp;<a href="clock.html"><img src="GO/docimg.gif" height=16 width=14 hspace=3 align=bottom
border=0 alt="[ Find out: What time does your computer think it is? ]"></a></big></big></td>
<td align=left><big><a href="clock.html"><img src="gif/clock.gif" height=34 width=34 align=right border=0 
alt="[ What time does your computer think it is? Find out here! ]" vspace=3 hspace=5></a><font color=navy><b><i><big>W</big>hat time does
your computer think it is?</i></b></font> Example of a page that organizes a lot of hyperlinks
in an appealing way. <i>See also:</i> "<b><a href="aboutTime.html">it's About time</a></b>" 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.)</big></td></tr>

<tr><td valign=top nowrap><big><big>&nbsp;<a href="km.html"><img src="GO/docimg.gif" height=16 width=14 hspace=3 align=bottom
border=0 alt="[ Visit the Katonah Museum of Art! ]"></a></big></big></td>
<td align=left><big><font color=navy><b><big>K</big>atonah Museum of Art</b>.</font> Subtle use of "white space"
to make a web page in its entirety be a "work of art".
<i>Note also:</i> 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.</big></td></tr>

<tr><td valign=top nowrap><big><big>&nbsp;<a href="clinton_3.html"><img src="GO/docimg.gif" height=16 width=14 hspace=3 align=bottom
border=0 alt="[ Take the Bee-line bus line! ]"></a></big></big></td>
<td align=left><big><font color=navy><b><big>C</big>onvenient public transportation for the
Clintons' new home</b>.</font> Another example of "total design", in which even the
background plays a vital role in the page's expressivity.</big></td></tr>

<tr><td valign=top><big><big>&nbsp;<a href="designGallery.html"><img src="GO/docimg.gif" height=16 width=14 hspace=3 align=bottom
border=0 alt="[ Go to where you are! ]"></a></big></big></td>
<td align=left><big><b><i><big>F</big>inally:</i> <font color=navy>this page itself</font></b> --
<i>including:</i> its HTML <i><a href="http://www.users.cloud9.net/~bradmcc/cgi-bin/ascii.pl?filename=designGallery.html">source code</a></i>....
I believe <b>self-reflection</b> 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 <b>self-referentiality</b> (i.e., wherever possible,
an assertion should <b>be</b> evidence for the truth of what it asserts).
<font color=maroon><i>Question:</i></font>
How well do you think <i>this page</i> illustrates the things I have said in
it?<a href="signgb.html"><img src="emailme.gif" align=bottom border=0 height=12 width=20
hspace=4 alt="[ Email me! ]"></a>
</big></td></tr>
</table>
<big>&nbsp;</big>
<hr size=7 align=left width="40%">
<table width="99%" cellpadding=0 cellspacing=6 border=0>
<tr><td colspan=2><img src="sp.gif" border=0 height=2 width=2 vspace=2 alt="[ ]"></td></tr>

<tr><td valign=top><table cellspacing=0 cellpadding=4 border=0>
<tr><td align=right nowrap><big><big>&nbsp;<img src="gif/red10.gif" height=10 width=10 align=bottom
border=0 alt="*"></big></big></td></tr></table></td>
<td><table cellspacing=0 cellpadding=4 border=0 width="100%">
<tr><td style="background-image: url(gif/barbed_wire_pattern.gif);"><big><big>W</big>henever 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. <i>Raising the floor is at least as important as raising
the ceiling</i>.</big></td></tr></table></td></tr>

<tr><td valign=top><table cellspacing=0 cellpadding=4 border=0>
<tr><td align=right nowrap><big><big>&nbsp;<img src="gif/red10.gif" height=10 width=10 align=bottom
border=0 alt="*"></big></big></td></tr></table></td>
<td><table cellspacing=0 cellpadding=4 border=0 width="100%">
<tr><td style="background-image: url(gif/barbed_wire_pattern.gif);"><big><big>W</big>henever
else you do, <b><i><font color=maroon>Add value</font></i></b> ("value added"). What
value are you going to add to human[e] culture [<i>aka:</i> Civilization...] in the next 24 hours?</big></td></tr>
</table></td></tr>

<tr><td valign=top><table cellspacing=0 cellpadding=4 border=0>
<tr><td align=right nowrap><big><big>&nbsp;<img src="gif/red10.gif" height=10 width=10 align=bottom
border=0 alt="*"></big></big></td></tr></table></td>
<td><table cellspacing=0 cellpadding=4 border=0 width="100%">
<tr><td style="background-image: url(gif/barbed_wire_pattern.gif);"><big><big>T</big>his
website is increasingly becoming an integrated self-auditing system. <i>Item:</i>
<a href="iconGallery.html">Icon Gallery</a> page (<a href="iconGallery.html">iconGallery.html</a>) does not just display the various icon images
I use throughout this website to improve navigational coherence (etc.). My site audit
script (<a href="http://www.users.cloud9.net/~bradmcc/cgi-bin/ascii.pl?f=titles.pl">titles.pl</a>)
reads <a href="iconGallery.html">iconGallery.html</a>, 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.</big></td></tr></table>
</td></tr>

</table>
<table cellspacing=0 cellpadding=0 width="100%" border=0>
<tr><td><table cellspacing=0 cellpadding=0 width="100%" border=0>
<tr><td colspan=3><img src="sp.gif" border=0 height=2 width=2 vspace=5 alt="[ ]"></td></tr>
<tr><td width="100%"><hr size=7 width="100%"></td>
<td width=2><img src="sp.gif" height=2 width=2 hspace=1 alt="[ ]" border=0></td>
<td><a href="Justine.html"><img src="gif/Justine.gif" width=56 height=13 border=1 alt="[ Leisure: Luxe, calme et volupte is the basis of culture! ]"></a></td>
</tr></table></td></tr>
<tr><td><img src="sp.gif" border=0 height=2 width=2 vspace=3 alt="[ ]"></td></tr>
<tr><td><center><h2><font color=navy><a name="navig">Navigation</a> apparatus (<i>etc.</i>)</font></h2></center></td></tr>

<!-- The following material instantiates my web page navigation "apparatus" "template" -->

<tr><td bgcolor="#DCDCDC"><table width="100%" cellpadding=0 cellspacing=0 border=0>
<tr><td><table width="100%" cellpadding=0 cellspacing=0 border=0>

<tr><td rowspan=4 bgcolor="#D3D3D3"><img src="gif/sp1.gif" border=0 height=1 width=1 alt="[ ]"></td>
<td colspan=4 bgcolor="#D3D3D3"><img src="gif/sp1.gif" border=0 height=1 width=1 alt="[ ]"></td>
<td rowspan=8 bgcolor="#D3D3D3"><img src="gif/sp1.gif" border=0 height=1 width=1 alt="[ ]"></td></tr>

<tr><td rowspan=3><img src="sp.gif" border=0 height=2 width=2 alt="[ ]" hspace=2></td>
<td colspan=2><img src="sp.gif" border=0 height=2 width=2 vspace=2 alt="[ ]"></td>
<td rowspan=7><img src="sp.gif" border=0 height=2 width=2 hspace=2 alt="[ ]"></td></tr>

<!-- Request for viewer feedback -->
<tr><td colspan=2><table cellspacing=0 cellpadding=0 width="100%" border=0>
<tr><td align=left valign=top colspan=2><table cellspacing=0 cellpadding=0 border=0>
<tr><td><table cellspacing=0 cellpadding=4 border=0>
<tr><td bgcolor="#FFF8DC"><table cellspacing=0 cellpadding=4 border=0>
<tr><td bgcolor="#FFFFF0"><table cellspacing=0 cellpadding=0 border=0>
<tr><td valign=top nowrap><big><a href="signgb.html"><img src="emailme.gif" align=bottom border=0 height=12 width=20
hspace=1 alt="[ Email me! ]"></a>&nbsp;</big></td>
<td><big><a href="signgb.html">E-mail</a> me <i>your</i> thoughts about my website
and website design in general.</big></td></tr></table></td></tr></table></td>
</tr></table></td>
<td valign=top><table cellspacing=0 cellpadding=0 border=0>
<tr><td><img src="sp.gif" border=0 height=2 width=2 vspace=3 alt="[ ]"></td></tr>
<tr><td valign=top nowrap><big><a href="signgb.html"><img src="gif/email.gif" border=0 height=17 width=36
align=bottom alt="[ Email me your questions and/or thoughts! ]"></a>&nbsp;</big></td></tr>
</table></td></tr></table></td>
<td rowspan=5><img src="sp.gif" border=0 height=2 width=2 hspace=4 alt="[ ]"></td>
<td rowspan=3 align=right valign=top><a href="Doraemon.html"><img src="gif/fr-maneki-neko.gif" width=68 height=89
alt="[ Doraemon and Fortune Cat wish you good luck! ]" vspace=3 hspace=1 border=0 align=right></a></td></tr>

<tr><td colspan=2><img src="sp.gif" border=0 height=2 width=2 vspace=12 alt="[ ]"></td></tr>

<!-- Navigation and orientation links -->
<tr><td><big><a href="iconGallery.html">Visit</a> my <i>icon Gallery</i>.<br>
<a href="iconGallery.html#colorTab">See</a> table of colors used in this website.<br>
&nbsp;</big></td>
<td valign=top align=center nowrap><big>&nbsp;<a href="iconGallery.html"><img src="sq/next2x.gif" align=bottom height=19 width=18 hspace=3 border=0 alt="[ Visit icons and color palette gallery! ]"></a></big></td></tr>
<tr><td align=left colspan=2><big><a href="http://www.users.cloud9.net/~bradmcc/cgi-bin/ascii.pl?filename=designGallery.html">Inspect</a>
the HTML source code for this page.</big>
<table cellspacing=0 cellpadding=0 border=0><tr>
<td valign=top><big><a href="workspace.html#valid">Learn</a></big></td>
<td><big>&nbsp;right vs wrong way to code HTML tags: <i>Do it right!</i></big></td></tr></table>
<big><a href="HTML32-Announce.html">Read</a> document announcing <b>HTML 3.2</b>.<br>
&nbsp;</big>
<table cellspacing=0 cellpadding=0 border=0><tr>
<td valign=top><big><a href="purpose.html">Go</a></big></td>
<td><big>&nbsp;to thoughts on: 
<i>What is the purpose, use and value of this website?</i></big></td></tr></table>
<table cellspacing=0 cellpadding=0 border=0>
<tr><td valign=top><big><a href="computerAphorisms.html">Read</a></big></td>
<td><big>&nbsp;computer aphorisms and recollections
(<i><a href="computerAphorisms.html">Je me souviens</a></i>).</big></td></tr></table>
<table cellspacing=0 cellpadding=0 border=0><tr>
<td valign=top><big><a href="copyright.html">Read</a></big></td>
<td><big>&nbsp;website copyright &copy; notice, and <i>Terms and conditions of use</i>.</big></td></tr></table></td>
<td align=right valign=bottom><a href="changelog.html"><img src="WhatsNew.gif" width=73 height=54 hspace=4 border=0
alt="[ What's new here? ]" align=right></a></td></tr>
<tr><td valign=bottom colspan=2><big>&nbsp;<br>
<a href="changelog.html">What's new</a> on this website?<br>
<a href="sitetoc.html">Go</a> to website <i>Table of Contents</i>.<br>
<a href="welcome.html">Return</a> to Brad McCormick's home page.<br>
<a href="Bradsmap.html">Go</a> to <i>site map</i>.</big></td>
<td valign=bottom align=right><table cellspacing=0 cellpadding=0 border=0>
<tr><td rowspan=2><img src="sp.gif" height=2 width=2 hspace=3 alt="[ ]" border=0></td>
<td valign=bottom><a href="Bradsmap.html"><img src="signpost.gif" height=32 width=33 border=0 alt="[ Go to Site Map! ]"></a></td>
<td><img src="sp.gif" height=2 width=2 hspace=11 alt="[ ]" border=0></td>
<td valign=bottom><a href="sitetoc.html"><img src="gif/up_black.gif" vspace=1 height=16
width=16 border=1 alt="[ Go to website Table of Contents! ]"></a></td>
<td><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" hspace=19></td>
<td rowspan=2 valign=bottom><a href="welcome.html"><img src="gif/home.gif" height=32 width=32 vspace=1 border=0 alt="[ Go home! (BMcC website Home page!) ]"></a></td>
<td rowspan=2><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" hspace=5></td>
<td rowspan=2 valign=bottom><img src="gif/bv.gif" height=36 width=1 border=0 alt="[ | ]"></td>
<td rowspan=2><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" hspace=3></td>
<td rowspan=2 valign=bottom><a href="iconGallery.html"><img src="gif/icon.gif" height=23 width=24 alt="[ Click me to visit website Icon Gallery! ]" vspace=2 border=0></a></td>
<td rowspan=2><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" hspace=1></td></tr>
<tr><td colspan=4><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" vspace=1></td></tr>
</table></td></tr>
</table></td></tr>

<!-- Page identification and author contact information -->
<tr><td colspan=2><hr width="40%" align=left></td></tr>
<tr><td bgcolor=green><img src="gif/sp1.gif" border=0 height=1 width=1 alt="[ ]"></td>
<td><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" hspace=2></td>    
<td align=left nowrap><address><font color=green>http://www.cloud9.net/~bradmcc/designGallery.html<br>
<a href="copyright.html">Copyright &copy;</a> 1998-2006 Brad McCormick, Ed.D.,<br>
<a href="http://www.fpjourne.com/">Invenit et fecit</a>. bradmcc@cloud9.net <a href="signgb.html"><img src="gif/email2me.gif" border=0
align=bottom width=15 height=10 alt="[ Email me! "></a></font></address></td>
<td align=right valign=top><a href="http://validator.w3.org/check/referer"><img src="valid_html4_01.gif"
border=0 alt="[ Loose HTML 4.01 Checked! Test me! ]" height=31 width=88></a></td></tr>
<tr><td bgcolor=green><img src="gif/sp1.gif" border=0 height=1 width=1 alt="[ ]"></td>
<td><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" hspace=2></td>    
<td align=left valign=top><address><font color=green>16 January 2009<small><b>CE</b></small> (2009-01-16
<a href="http://www.cl.cam.ac.uk/~mgk25/iso-time.html">ISO 8601</a>)</font></address>
<table cellspacing=0 cellpadding=0 border=0>
<tr><td><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" vspace=7></td></tr>
<tr><td bgcolor=black><table cellspacing=1 cellpadding=1 border=0>
<tr><td bgcolor="#D3D3D3"><small>&nbsp;v06.09 (<i><!-- $fsize file="designGallery.html"k -->40k</i>)<!--#exec cgi="cgi-bin/uctr1.pl"-->&nbsp;</small></td>
</tr></table></td></tr>
<tr><td><img src="gif/sp1.gif" height=1 width=1 border=0 alt="[ ]"></td></tr></table></td>
<td rowspan=2 valign=bottom align=right><table cellspacing=0 cellpadding=0 border=0>
<tr><td colspan=6><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" vspace=6></td></tr>
<tr><td valign=bottom><a href="RYO_cartoon.html#anotherHamburger"><img src="gif/lightbulb.gif" vspace=1 height=27 width=20 border=0 alt="[ A BRIGHT IDEA! Light in the darkness! ]"></a></td>
<td><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" hspace=6></td>
<td valign=bottom><a href="AmCulture.html"><img src="gif/garbageCan.gif" height=16 width=13 border=0 alt="[ Learn about other American middle-class 21st century folkways! ]" hspace=1 vspace=3></a></td>
<td><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" hspace=5></td>
<td><a href="sgmlnote.html"><img src="gif/noAcro.gif" height=104 width=90 border=0 alt="[ Stop proprietary document interchange software! ]"></a></td>
<td><img src="sp.gif" border=0 height=2 width=2 alt="[ ]"></td></tr></table></td></tr>
<tr><td bgcolor="#D3D3D3" rowspan=2><img src="gif/sp1.gif" border=0 height=1 width=1 alt="[ ]"></td>
<td rowspan=2><img src="sp.gif" height=2 width=2 border=0 alt="[ ]"></td>
<td valign=bottom align=left><table cellspacing=0 cellpadding=0 border=0>
<tr><td rowspan=2><img src="sp.gif" border=0 height=2 width=2 hspace=1 alt="[ ]"></td>
<td colspan=5><img src="sp.gif" border=0 height=2 width=2 vspace=12 alt="[ ]"></td></tr>
<tr><td valign=bottom><a href="GO/frenchCafe.html"><img src="GO/FrenchFlag.jpg" height=17 width=25 border=0 vspace=2 alt="[ Learn about other American middle-class 21st century folkways! ]"></a></td>
<td><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" hspace=6></td>
<td valign=bottom><a href="GO/japanFantasy.html"><img src="GO/japanFlag_B.gif" height=22 width=30 vspace=1 alt="[ Float away! (Alienation in contemporary Japanese culture) ]" border=0></a></td>
<td><img src="sp.gif" height=2 width=2 border=0 alt="[ ]" hspace=13></td>
<td valign=bottom><a href="sq/AmCulture2.html"><img src="gif/united_states.gif" height=17 width=24 hspace=1 vspace=2 alt="[ Study American middle-class 21st century folkways! ]" border=0></a></td>
</tr></table></td></tr>
<tr><td colspan=2 width="100%"><img src="sp.gif" border=0 height=2 width=2 vspace=3 alt="[ ]"></td></tr>
</table></td></tr>
<tr><td bgcolor="#D3D3D3"><img src="sp.gif" border=0 height=2 width=2 alt="[ ]"></td>
</tr></table></td></tr>
<tr><td><img src="sp.gif" border=0 height=2 width=2 vspace=3 alt="[ ]"></td></tr></table>
<table cellspacing=0 cellpadding=0 border=0 width="100%">
<tr><td align=left><img src="sp.gif" border=0 height=2 width=2 hspace=47 alt="[ ]"></td>
<td align=center><table cellspacing=0 cellpadding=0 border=0>
<tr><td colspan=3><img src="sp.gif" border=0 height=2 width=2 vspace=13 alt="[ ]"></td>
<td rowspan=4 valign=bottom><table cellspacing=0 cellpadding=0 border=0>
<tr><td bgcolor="#D3D3D3"><table cellpadding=0 cellspacing=4 border=1>
<tr><td><a href="aboutTime.html"><img src="moon/moonPhase_thumb.jpg" width=102 height=84 alt="[ Read brief quotes about the meaning of time! ]" border=0></a></td>
</tr></table></td></tr></table></td>
<td rowspan=4><img src="sp.gif" border=0 height=2 width=2 hspace=9 alt="[ ]"></td></tr>
<tr><td><img src="sp.gif" border=0 height=2 width=2 hspace=62 vspace=2 alt="[ ]"></td>
<td rowspan=2><a href="catChop.html"><img src="gif/cat09.gif" height=76 width=78 
alt="[ Learn about cat 'chop' (Chinese engraved seal)! ]" border=0></a></td>
<td rowspan=2><img src="sp.gif" border=0 height=2 width=2 hspace=21 alt="[ ]"></td></tr>
<tr><td align=left valign=top><table cellspacing=0 cellpadding=0 border=0>
<tr><td><a href="etc.html#smiley"><img src="gif/fish.gif" height=32 width=32 alt="[ What does this fish mean? Check it out! ]" border=0></a></td>
</tr><tr><td><img src="sp.gif" height=2 width=2 vspace=7 border=0 alt="[ ]"></td>
</tr></table></td></tr>
<tr><td colspan=3><img src="sp.gif" border=0 height=2 width=2 alt="[ ]"></td>
</tr></table></td>
<td align=right valign=top><a href="http://www.w3.org/Style/CSS/Buttons/"><img src="mwcos.gif"
alt="[ Made with Cascading Style Sheets! ]" hspace=4 height=31 border=0 width=88></a></td>
</tr>
</table>
<table cellspacing=0 cellpadding=0 border=0 width="100%">
<tr><td align=left valign=bottom><a href="danese.html"><img src="gif/garbageCan.gif" height=16 width=13 hspace=4 alt="[ Go to The Museum of Modern Art (MoMA)! ]" border=0></a></td>
<td><img src="sp.gif" height=2 width=2 vspace=11 border=0 alt="[ ]"></td></tr>
<tr><td colspan=2><img src="sp.gif" height=2 width=2 vspace=1 border=0 alt="[ ]"></td></tr>
<tr><td colspan=2 bgcolor=black><a href="danese.html"><img src="jpg/moma_01.jpg" width=760 height=37 alt="[ Go to The Museum of Modern Art (MoMA)! ]" border=0></a></td>
</tr></table>
<!-- Thank you. -->
</body>
</html>

<< designGallery.html  L: 40,219. A: 100644. M: 2009-01-17 01:05:05 UTC [=1232154305] -2074.88d <<

[ Please note: ]  Some systems do not provide this script with a return address (the HTTP_REFERER cgi environment variable). In those cases, the "Return" icon at right is disabled, but you can still use your web browser's BACK button to return to the page from which you came to here. I apologize. Thank you for your understanding.

Page generated by:
http://www.users.cloud9.net/~bradmcc/cgi-bin/ascii.pl?f=designGallery.html
Copyright © 2001-2005 Brad McCormick, Ed.D.
bradmcc@cloud9.net [ Email me! ]
26 April 2008CE
v10.05
[ ]
[ ]
[ Notice what's hiding in plain sight! ] [ ]
[ ] [ ]
[ Go home! (BMcC website Home page!) ] [ ] [ Use your web browser's BACK button to return to page from which you linked to here! ] [ ]
[ ]
[ Go to Site Map! ] [ ] [ HTML 3.2 Checked! Test me! ] [ ]
[ ]
[ ]
[ Go to website Table of Contents! ] [ ] [ Welcome to my website! Please come in! ]
[ ]
[ ]