Monday, 30 June 2003

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 (Get 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.

Monday, 2 June 2003

Cornwall and The Eden Project

Spring half term in '03 we took in a short break in Cornwall, including visiting the Eden Project.

This is well worth spending a day at if you're in that part of the world (we stayed 5 hours, and stopped only because the day had gone from foggy, with the haar blowing in over the rim of the old china-clay pit that houses the main Eden site, to bright sunshine, and Karen didn't have any sun-block, and was starting to burn around the back of the neck). It's best to get your tickets and one of the orientation leaflets from one of the tourist centres around the region rather than adding to your queueing, and to help plan your visit.

It's not just another botanical garden, or arboretum, interesting as either of those sorts of places might be; it also makes good use of artworks, starting with the horse at the entrance.

Once through the ticket booth, you see the true scope of the project.

Descending to the biomes, you find the inhabitants

Adam, a spiky metal statue on rockers that sways in the wind,

Eve, a green woman of grass

- and not one but three Serpents, of articulated wood, and other lesser pieces of decoration, in amongst the plants.

The Myths and Legends outdoor zone was still bedding down when we were there; and construction seemed to be beginning for the 3rd (desert?) indoor biome, blocking off the eastern end of the site.

I would recommend going early to the humid tropical biome, on a day where there isn't direct sunshine, and when you can feel comfortable outdoors in the light clothing that will be all that is bearable in the 25C/100% humidity within that set of domes. It was humid enough that the camera misted over.

Not so in the Hot Temperate biome - the Med, South Africa and California. Exterior first for scale

and now the interior, Med and California sections.

California scrub.

Stone fruit orchard.

We stayed at the Seapoint House Hotel in Mevagissey, which is just about visible against the sky to the right of the mast in the middle of the picture below. The grey wall above the cars on the harbour-side opposite is the path up, carrying behind the orange house and curling back around the point. Access by car is from above, then along the terrace - but to get to that level, you have to go past several "Unsuitable for Motors" signs and a 30% gradient warning.

We recommend the Mr. Bistro seafood restaurant, just off to the left of the picture (it considers Rick Stein to be a bumptious newcomer), and the Alvorada Portuguese Restaurant (which is far more than just a provider of salt cod, if that is all one has encountered of that cuisine - in fact there was no salt cod on the menu!).

Even by comparison, what we found upon returning home wasn't too shabby.