Web Site Design: First Cut

Having made some tentative design decisions for my Web site, it is now time to document them.  First, the site will look much like four separate sites.  There will be a small home page which has little more than links to four sub-sites, for politics, books, software, and odds and ends.  That page is also the natural place for some info about me.  Since it has almost no content, the page text does not have to be exceptionally readable.  So, I am using a dark blue for the background, white for the four main links, yellow for active links, and a light blue for links that have been activated.

The politics page will begin with a simple banner, with three items in a table.  In order, they will be: "Last Updated:", with the date, the title, "Jim Miller on Politics", and my email address.  The banner will use the same color scheme that the main page does.

The remainder of the page will be a table with five columns.  The leftmost, following convention, will have a large set of links in three sections, "Big Media", "Smart Media", and "Bloggers".  The center column, which will be the widest, will have my day to day diary of short remarks on politics and, from time to time, other subjects.   It will end with archives of the diary after I accumulate enough to make it worthwhile.  The rightmost column will be links to my other work, in five sections, "Articles", "Assignment Desk", "Columns", "Common Mistakes", and "Letters".  The second and fourth columns are just spacers.  Could have done the same thing by specifying padding for the text entries, but this seemed simpler.

The leftmost column will be fixed width, with the links centered.  The background will be light grey.  The idea is to use the grey to soften the contrast on site, just a bit, to make it easier to read.   The font will be a sans-serif font (in order, Verdana, Arial, Helvetica, or sans-serif), medium for the links and one size larger for the titles.   Underneath each title will be a link ("Why these?") to a file explaining the choices in that group.

The center column will be variable width and will use a serifed font (in order, Georgia, Times New Roman, Times, or serif), medium for the main text and one size larger for headings.  The text will be black on a white background.   Each entry in the diary will begin with a bold title phrase and will end with the date and time of posting, also bold.  Paragraphs in each entry will be separated with a blank lines, and entries with two blank lines.

I chose a serifed font for the main blocks of text, because those fonts are easier to read, except at small sizes, than sans-serif fonts.  I made Georgia the first choice since it scales better than Times.

The right column will be similar to the left, except that I will use lists to organize the groups, and they will be left justified instead of centered.

I am using fixed width left and right columns and a variable width center column to adapt the site to different resolutions.  So far, in my experiments, this seems to work well.  On the other hand, so few sites use this solution that I wonder if it does not have some fault that I am missing.

After some thought, I am going to go against convention and use bold, rather than underlined, links.  The idea is to make the site less busy, and a little more readable.  I think that bold links are now common enough so that there won't be much confusion.  The unvisited links will be dark blue, the visited links, light blue, and the hovering and active links, yellow.

One principle I have long held to in screen design is that pixels are precious, that the screen is so limited in size, commonly 1024x768 or 800x600, that you shouldn't waste any of it.  This leads to a plain design.  It is the reason I left out any dividing lines even though they might improve the aesthetics.  I am beginning to wonder if I haven't taken the principle a little too far.  Will definitely have to research this a bit.

It is now time to add archives and links to individual entries.  The main page is approaching 80 K bytes in size and will soon become unwieldy.  Have been trying to understand how this works by studying examples, and this is my tentative solution.  One can mark any point in a document with a "named anchor".   The name can be linked to from anywhere in the document.  Or, with a little trickery, another document.  As I understand it, one can make a copy of the entry, with the name, in another file, like an archive, and then provide a link to that file.

So, with that understanding, here is my plan for adding links to individual entries.  At the beginning of each entry, I will put the named anchor, with an invisible link, as in the example above.  At the end, I will put the usual link statement, with "[LINK]" as the target.  The "[LINK]" will be in the smallest font size.  I put the name at the beginning, because that is where you want the browser to go; the target will be at the end, because I don't want any confusing features near the entry title.

With individual links for the entries, I just need to create the archive files.   Making one file for each month seems like a simple compromise.  If I keep them all in the same directory as the main index file, then my relative links will keep working without any recoding.  I think I will simply name them after their month and year, for example, "June2002".  As for the entry names, I think simply numbering them, with a "jrm" prefix, should work.

The format of the archive file will probably be fixed, with a width no more than 800 pixels, or perhaps slightly less, since the simplest way to implement this would be to just eliminate the left and right columns, leaving the two spacers.   At some point, I should put the definitions in the prefixes in a single, separate file.

Last revised: 4:58 PM, 13 August 2002