The Webwright's Page (Techie Stuff)

Over the years I have played around with HTML occasionally and without particular objectives. Each time l have left as disoriented as before. It seemed a very strange way to run a computer. When sites got Flashier (sorry!) I had another look, but found only impenetrable thickets of table constructs. And features that looked interesting turned out to be hacks or side effects. It all seemed most perverse.

Then I heard about Cascading Style Sheets. They sounded like a measure of sanity. Separating content from presentation? Maybe it could be fun after all. ( ...more on this)

So when I started to build my own web site, I made a deliberate choice to see how far I could get using only HTML and CSS, without resorting to HTML tables or the side-effects of other HTML features. Somewhat reluctantly I discarded all the neat tricks and animated toys I had been hoarding for a rainy day. But I hoped that my attention and that of my visitors would be refocused on content.

I did not of course get very far. But it took me a while to see it!

MSIE5x was good, consistent if not necessarily purist. Opera5x was like the driven snow. I produced some nice stuff and I thought I was making progress. But Netscape4x? I spent a truly ridiculous amount of time trying to find simple ways of doing simple things that produced more or less similar presentation in NS and IE. I threw away yet more of my layout and presentation ideas. In the end I found myself crafting work-arounds for the side-effects of side-effects that I was using to work-around NS/IE differences.

The easy way out was to abandon NS4, and the Web Standards Group suggests that we should do just that. At first, I was reluctant; after all, lots of my friends are still using it. So for a while I soldiered on, using JavaScript and the DOM to serve distinct style sheets to NS4x. And before long, I was serving, not just CSS pages, but different HTML pages as well, to different browsers. Which was fun. In a way. I suppose.

And at last I saw what I was doing. By comparison, what was it again that was so wrong about using tables?

At about the same time, Netscape6 emerged, and I found that I could adjust one of my layouts to give reasonable results in MSIE5x Opera5x and NS6x. This salved my conscience as far as my NS friends were concerned, and at last let me move on. The people at the Web Standards Group knew it all along. If you want to use CSS, spend time with these people, and listen! I provide references to them below!

But first, here is something lifted directly from one of my favourite CSS sites, Eric Costello's glish.com ...If you don't have any idea why anyone cares about this topic, because like tables can do all that stuff and more, please read this: To Hell with Bad Browsers. And then read this follow up interview with Zeldman. And then read about the Web Standards Project's Browser Upgrade campaign.

This Site Best Viewed using...

WorkBench and Working Practices

The site is handcrafted using Edit+2. This is not a WYSIWYG editor, and so is not for everyone. I chose it principally for its minimalist support of tags (you need something, but not too much) and its syntactic colouring (a few sheets of coloured print-out makes HTML debugging a lot less unpleasant than Notepad on the screen!). It helps that it is also shareware with a US$30 price tag, and an uncrippled trial version is freely available. It is certainly worth a quick look.

Strictly speaking, Blogger is not a part of my workbench. It is a separate (free!) web site providing web-based journalling services, with all manner of neat features, which replaces my notebook of things-to-think-about-tomorrow. For a long time, while struggling with CSS design, it was my only web presence. Hit the button above to see what it is all about, or see what I have been using it for at smallThoughts .

My workbench typically consists of 4 windows, EDIT+2, MSIE5, NS6, and Opera5, all open at a local copy of the HTML page in work. Edit+2 provides seamless access to a browser, but in general I prefer to make and save a change in Edit+2, switch to a browser still showing the previous result, and watch the effect of the new changes as I hit the refresh button. It costs a few extra keystrokes but avoids late browser surprises (plenty of these left!) and is especially useful when tuning for those small differences between browsers.

Frequent use of HTML and CSS validation is strongly recommended. Using on-line facilities to do this takes very little time and spots things you miss. I typically use validators provided by the Web Design Group and by W3C, whose icons I include above.

Also important is to disable the style sheets occasionally in order to see how the site appears to Netscape 4 or browsers that do not support CSS. Not fun, but you oughta do it!

When problems develop, the response cascade may include a) checking the syntactic colour round the active zone, b) adding a "border:1px solid red" to all relevant div's - amazing what that can reveal! When all else fail, c)validation can sometimes find that semicolon that should be a colon... Principal problems that I encounter now are due to different browser treatments of 1) margin/padding in width, 2) definition of width when not explicit, 3) overlapping text boxes and z-levels.

Site Design

This site is intended to proffer content relating mostly to science and knowledge, and has nothing whatever to do with Web technology. It is also however designed to explore and exploit to the limit Cascading Style Sheets. Hence I eschew (mmmm!) all recourse to tables (even when maybe I shouldn't!) and other fiddles, features, hacks or side-effects commonly used to impress. Temporarily religious about CSS, I even avoid the use of java script and other tools and toys.

Style sheets are fetched (using import) by browsers that recognise them. For other browsers the style sheets do not arrive, and the browser must do its best with the naked HTML. I use import rather than external links because this also allows me to prevent the v4 browsers of Netscape and Microsoft from their attempts at CSS. That being the case, it is only fair to work the content and headers so as to provide a reasonable presentation in the absence of style sheets. I also think its nice to suggest to CSS-poor users that it is time to move to a standards compliant browser!

(One lives and one learns. More recently I find myself less than satisfied with this approach. It is at least mildly disrespectful, and lets me too easily neglect the appearance of unstyled presentation, This site's style sheets now seem both busy and lazy, under-designed and over-applied. As a result, I think, it looks most untidy when displayed unstyled. This will take a bit of fixing. Not this week! But it can be done - see Bluerobot's use of CSS, spare and elegant)

A single style sheet serves all pages of this site. I should caution the curious that the style sheet is hardly an example of best CSS practice, containing as it does significant encrustation from earlier phases of this site's history when I was a) reaching too hard for effects now long abandoned and b) didn't know what I was doing anyway. However, as it works, I haven't fixed it further.

The choice to import the style sheets leads to an effect (in MSIE5 only) that Bluerobot has christened the FOUC (the Flash of Unstyled Content). This occurs if the style sheet is not already cached but it can be suppressed by referencing an external link (even a non-existent one) which is the choice made here. In practice I do this only for the Welcome and Home pages.

All pages are built from a template. This provides a fat area in which I can lay out content on the right and a narrow margin on the left into which sidebar stuff can be overlaid using absolute positioning. I splash a logo band across the top, using text on text, which is a nice effect.

A site map page is provided, as is customary. I also include on the site map a reference to each external web site that I link to. Apart from courtesy to the reader, this provides a reminder and a convenient way for me to verify the currency of these sites.

In general I do not use graphics much. The SS icon used to return to the parent node of the present subtree is the only regular graphic element. (Well, navigation might be that jazzy one day, ok?)

Extensive use is made of floats (left and right), positioning (both absolute and relative), and nesting of DIV's. Which is half the point of CSS. For text across PC's and Mac's, it is not a good idea to try to control absolute font size, so I use mostly % and em. For dimensions, I use pixels for vertical positioning, but % width responds better for horizontal positioning. Pixels are also just fine for short horizontal distances and logos.

It all hangs together quite well. For example, grab a right hand window edge and reduce/expand the width of the window; you should see the effect of the fluid design principles outlined by the gurus I reference below.

Acknowledgements

The Web is full of good CSS sites, providing reference, tutorial, design and philosophy. You will not surf for long before you meet the following, to whom I owe all of what little I understand of CSS. If you want to get serious about CSS, I strongly recommend you spend time with them all.

And then a few more names:

Jennifer Niederst - Web Design in Nutshell: This book from OReilly collects together a whole stack of stuff one needs to know to build a site - HTML and CSS of course, but also colors, fonts, graphics file formats, multimedia, and invaluable appendices of tags and compatibility etc

Eric Meyer - Cascading Style Sheets: Another excellent book from OReilly, collects together more than you will ever need to know about CSS, plus good reference tables of all CSS properties.

David Siegal: to whom is attributed the use of a single transparent pixel resized to control white space layout. This has nothing to do with CSS and is hardly good HTML practice, but at a time when nothing made sense, this trick gave me a toe-hold. So I still use it, sparingly; as with all good tools, there are times when it is the only solution!