Site makeover

Thoughts behind the full redesign from this to something like this.

1. This site will use valid XHTML and CSS throughout
2. Coding strives for maximum accessibility to all.
3. That the site should be usable in most browsers with the minimum of skull sweat on my part.

The image in the banner is a picture of Mt. Taranaki in North Island, New Zealand, taken in November 1996. Fading into the banner is done with the Fade to Black... application.

Valid XHTML and CSS

This site uses the forward looking XHTML 1.1, but with fairly light use of features that are new after HTML 2.0. This means that, while I'm primarily aiming to have it look nice on modern browsers (Netscape 7, IE6), it should be adequately viewable with back-version browsers (I test with Netscape 4.5), or even as plain text. Indeed the difference between Lynx and NN4 is colour and pictures.

Version 4 browsers will not lose anything of substance - just most, but not all of the prettying-up that is done via style sheets, and some of the recent features like tool-tip titles usable on most elements (which I mainly use to explain links and obscure - often Latin - phrases). They, and users who turn off Javascript, will also only get the human-readable form of the contact addresses, as I use scripting to decrypt a version of the link and replace the plaintext human-readable part on the fly with something that has a mailto link in it. I do that to reduce the gain from trawling spammers.

I had used a table hack to put a narrow button-bar down the left, linking to the site map, but only the most recent browsers were able to emulate a stretchable clickable link area, and in small-screen devices running PocketIE, tables break the "fit-to-screen" algorithm for image layout. So I'm going for a for CSS-based formatting that looks good on a modern browser, but degrades gracefully in NN4.x and PocketIE and works for text browsers. I'd like to thank the CSS gurus at alistapart.com, bluerobot.com, and thenoodleincident.com for the hints, tips, worked examples and design philosophy.

Accessibility

Not everyone is physically able and in possession of the standard gamut of senses. That's no reason to deny them the Internet. I check my pages with A-prompt, and take heed of its warnings.

Not all pages are marked as accessible. Some are difficult to do over the whole spectrum (pages with many pictures). Some because of assumptions in the A-prompt code. As I code in XHTML 1.1, I don't have the HTML lang="" attribute, to tell what language I'm using - I have the XML xml:lang="" attribute instead, plus the <meta name="language" content="en" /> header tag. Neither are recognised by the checker.

If it weren't for the scripts, this page could gain an AAA rating. As it is, none of the pages with the webmaster address on them are accessible because the significant use of scripting is to replace a part of the page.

I can't tell the checker that a page with script on already has the non-script text in place, so I don't need a <noscript> section (and I don't because such a section is painful in XHTML 1.1). But I can tell the checker that there is no flicker on the page, even if I actually have some really horrid animations, and it will accept that. BTW, there animated images on this page, but they are the only ones on this site, and are well below the fold. [.mng files in a Java applet, rather than animated .gifs; .mng is animated .png, but alas only a few minority browsers have native support for the format.]

As noted above, the e-mail address is replaced that way. I do put the (not at all germane to the point of the page, and usually discoverable through asking the browser for page properties) last modified date in at the same time, and on this page I add the "downgrade to Lynx" experience only if it is a downgrade in what you see.

Once you get into the text-rich parts of the site (the fiction and RPG pages), they are almost all AA-level (and would be AAA if xml:lang was recognised). How well the other pages work will depend on what restrictions you operate under - they should all degrade gracefully to text, but in the picture rich pages, how useful that might be is debatable.

This rolling redesign at Easter-Midsummer '03 is also intended to be friendly for mobile users with small screen devices such as old style PalmOS devices with 160 pixel wide screens, or SPV smartphones at 176 pixels wide. For them a 150-200 pixel wide navigation column at the left eats up all the space you have, leaving the meat of the page several screen-heights down. That rather ruins any attempt that the page would have to put the key stuff "above the fold". The browser is IE3 if you're on a Windows hand-held, which also reduces the scope for fancy stuff.

No Sweat

Most pages are composed in a plain text editor using a standard template file as basis. Where a new page is not trivial, I'll compose it using Amaya (http://www.w3.org/Amaya/User/BinDist.html). However composed it will finally be cross-schecked for standards conformance with a dedicated XHTML & CSS validator in Java , also available in .NET for Windows. Amaya is useful in providing a source view with line numbers to match the tool's error messages. The tool and Amaya spot slightly different things as being wrong, but the real definitive place is the validator at validator.w3.org run by the W3C, who define what's what.

All the hard work is in putting the templates together and running them and the style-sheets past the various browsers.

Background

While I disagree with some of the more evangelical "web standards" people, who really mean by that "the most recent web standards" - HTML 2.0 is a perfectly adequate standard that will suffice for writing simple, spartan, text plus images hypertext, after all - but they are right in saying that pages shouldn't be coded to employ non-conformant browser quirks, but rather should be coded for general usability across a wide range of platforms. This site works well with PocketIE, Konqueror 3.0, IE6, Netscape 4.5, 6.2 and 7; it is possible that in IE5 the CSS pattern may not lay out so well, due to known bugs, for which there is no valid CSS workround, and it will be less fancy on the older browsers, but will still be usable.

Personally I can see a reason to use browsers on a "horses for courses" basis - NN4.x has a convenient and obvious cache directory that's well placed to wipe with a secure deletion tool if you're being paranoid - NN7.x hides its cache a little more, and IE does its best to keep you from playing that sort of game. In general, if you control you hardware, and it's reasonably modern, and you don't have accessibility issues, you're probably best off accepting that we're no longer living in the mid 1990s, and you should be able to find something better on a cover disk than a 4.x browser for your platform. Or for the really cash conscious, the cheapest way that I know of to get a high-feature modern browser would be to download Mozilla Firefox () - at 4.7 Mb, for the Win32 version of the 0.9 release, that's less than half an hour with a 56k modem, or about 10% the price of the magazine with the cover disk (using cheap-rate calls) - Amaya may be slightly smaller, but it's very spartan, and is better used as a first pass conformance checker. If you need a browser that's also a mail client, chat client, news client and what have you, and you aren't using EMACS (because it does everything already) go for the full Mozilla, which is about twice the size, or Netscape at three times - both are smaller than a full IE6 download.