Thoughts behind the full redesign from this to something like this.
- This site will use valid XHTML and CSS throughout
- Coding strives for maximum accessibility to all.
- 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.