How this site is constructed
This is the third iteration of Klingon Kommand. The first, which I wrote pre 1998 in my VGAP3 days, can be seen here, preserved as a memento. It used Frames and very basic colours. These days I understand how Frames aren't always the best solution, causing printing problems and suchlike. Note the Java applet on the home page flashing up 'Welcome to Klingon Kommand'. Computers are a lot faster these days, and it's too fast to read! You won't find any Java in the new KK, partly because it can't be depended on, and lots of paranoid folk turn it off as a security hazard.
A screenshot of the second iteration can be seen here - the big black thing - I put it together in 1998 and thought black was a good colour theme for a space game, but it's not very restful on the eye. And as the site grew, navigation became a nightmare. I just added pages and put a link on the first page due to lack of time to maintain it.
In April 2006 I bit the bullet and did a whole load of rewriting over a holiday to give the site a complete new look. I'd had a whole load of comments over the years about how messy the old site was, and even I had to admit that it was somewhat crude and hard on the eyes. I'd always put my effort into creating new content in the easiest way possible, and put off sorting out the style, but after 7 years of organic growth it was time to sort it out.
I had several aims at first. I wanted it to be easier to navigate and find stuff. I wanted it to look modern. I think I've got nearer those ideals. I also wanted loads of cool features, but whenever I looked into them I found they didn't always work on my target platforms. Eventually I came to realise that simpler is better. Who cares if the user doesn't notice it - that means it works! So I've got rid of lots of the clutter I thought was so impressive in the previous Klingon Kommand.
Navigation
I was originally impressed by cool DHTML collapsing menus and stuff. But when I looked into those, I realised they would just mean more mousework to find what you wanted. I also found that most DHTML is pretty browser-specific.
I wanted pop-up 'tooltips' on the menus to give you an idea what was behind the one-word description on the buttons, and I rediscovered the simple HTML 'TITLE' command which does that - no fancy coding needed.
There's a fairly standard looking Navbar on the left hand side, with links to stuff in the main 'frame' here. The tabs along the top lead to different sections. To minimise the number of mouse clicks needed, the most popular pages have 'hot links' at the top of the Navbar.
CSS and the site's structure
KK now uses CSS for a more consistent appearance. It should work in IE6+, Mozilla, Firefox. Users of other browsers tend to be employing OS's which don't support VGAP so I chose to ignore them. However the site does not use anything particularly non standard so if they stumble across the site, they should be able to read it.
I learned some CSS to control the look of the site. I can thoroughly reccommend the free tutorial at westciv.com - it will take 2 or 3 evenings to get through. The main problem with CSS is that the examples you find assume you know how to drop them into a framework like an HTML web page or CSS file, but this tutorial explains the basics, which allows you to stitch examples together. The CSS file controlling this site is kk.css and you are welcome to rip it off, but you must repeat the credits in it to the people I ripped it off from.
The pages' CSS 'Divisions' (divs) are: #tabs (the header), #main, #navbar. You're reading this in #main; #tabs is the bit at the top with the tabs. In addition there is an invisible div called #wrap which contains #main and #navbar. This ensures they're the same height... or something like that. Anyhow it works. For other details, look in the kk.css file.
The half dozen or so top level pages, accessed via the tabs, are completely CSS'd - ie I've written them from scratch in the new structure. The older pages will follow. Converting pages requires a lot of work with a text editor. It's not so much work inserting a few lines so the page obeys an external CSS file. The real work comes in trying to remove all the formatting commands my old WYSIWYG editor (Mozilla) stuck in. One missed bracket and everything thereafter is invisible, or turns into a hyperlink..!
Using CSS instead of Frames means the pages will print out properly if you want them to, and search engines can follow the links.
The Tabs at the top of each page (Home, Links etc) are adapted from Daniel Glazer's 'CSS-only tabs' example which is widely referred to on the Net. I think tabs are a neat way to break a site into sections, and the great advantage of this particular implementation is that it requires no graphics: the CSS tells the browser to write text in those areas in 'block' mode and then tells it to add a radius to two corners. So, no delays while your browser tries to download that last GIF.
The buttons down the left hand side come from Ian Main's open source examples at Creative Commons. There's only one GIF involved, with no text. The browser paints the text over it. When the mouse is over the button, the browser switches from showing the bottom half of the GIF to the top half so it appears to change colour.
I was disappointed to discover that CSS can't do everything I thought. I was misled by the hype surrounding CSS - websites discussing it concentrate, of course, on what it can do, but what a beginner needs to know is what it can't do! For example, I'd assumed, looking at other websites with layouts like this, that there was some kind of Frames technology in place, so you didn't have to write the common bits for each page every time, or update every page if you wanted to change the menu. No. Those fancy pages have the text repeated on every page and are maintained by people using fancy HTML editors. I no longer trust such editing tools as they add a lot of garbage you don't see to the HTML, causing further debugging problems, and like many 'helpful' tools simply add a layer of opaqueness between you and what you think you're writing. They're great if you're doing a lot of stuff exactly the same, but not if you're learning and experimenting.
A related point which gave me and, judging by the newsgroup, other beginners many problems grasping was: how can you change the content of the right hand column without rewriting the navbar? Answer: you can't. You can do relative jumps within a document, but remember the navbar is part of the same page.
There are some hidden subtleties in the pages. The 'KK' logo in the Navbar (Two K's, one is reflected) is simple enought to be reformatted and used in a number of ways to subconciously 'brand' the site. I spent considerable time mulling the terminology of the tabs, and how to split the site up. This is all aimed at relaxing the user and giving them a familiar, consistent environment to navigate in. The first dozen pages were rewritten many times as I refined the look and feel of the site.
Random tips embedded in pages
The home page of the site, vgap4.htm, uses a simple Javascript to generate a different random image in the navbar each time the page is loaded. These gifs contain various 'thoughts for the day' as text. I use gifs because they're lossless - jpgs or pngs would make the text blur - and gifs are generally the smallest file format for sharp edged text images. I've seen Internet Explorer refuse to run this code as it contains "active code". Hmm. A tad overcautious.
The Miscellaneous page has some scrolling spoof 'newsflashes' in the bottom bar of the screen. These don't always work if browser settings are set 'wrong' (see next section).
On both pages, you can see the javascript by looking at the source HTML of the page. I used the simplest scripts I could find - they tend to work best and cross-platform.
Some unwelcome discoveries about browsers
IE wouldn't display images at the correct size. It was stretching them to be about 5% too large. This was making pixel based ones like GIFS look 'scratchy' and causing aligment problems. Eventually someone pointed me at an obscure browser setting: Tools --> Options --> Advanced --> Multimedia --> 'Enable Automatic Image Resizing'. This was checked, though I'd never noticed it before. Anyhow, don't check this; it wrecks website layout.
Firefox also gave me a problem. I had been wondering why the scrolling spoof messages in the status bar did not appear on the Miscellaneous page. It was not a Javascript error though. It turns out that Firefox installs itself with Javascript enabled, but Tools --> Options --> Content --> Advanced --> 'Change status bar text' was unchecked by default.
What Not To Do
Many CSS purists seem biased against tables and the [bold] tag, claiming 'strong' is better than 'b'. They seem to think that it is far better to do things in more complex ways because that's how the latest XHTML standards are structured. Another breed of advisor, web design gurus, commonly refer to 3 fixed-width columns as 'the holy grail'. They advise using short paragraphs interspersed with adverts, cool graphics and stuff. Personally I think most web templates / semi-professional pages are too cluttered and 2 columns, expanding to fit the screen width, is best. More columns is just distracting.
Eventually I realised that most web gurus are talking about web sites which have no actual content, and are terrified of people 'clicking away' once their 15 second attention span expires, so the viewers need constant distractions. Whereas KK is chock full of long dense documents, and has an audience eager to read them, with plenty of concentration. Also, web design gurus are convinced no one has a monitor wider than 800 pixels, whereas you need at least 1200 to play VGAP4. You're likely to be running IE6+, Mozilla or Firefox on a Windows system with graphics turned on, so I've tested the site with those. Know your audience!
I chose to avoid Java, Javascript, DHTML and other exotic techiques for important functions because whenever I saw an amateur example of something using them, they always broke in one of the Big Three Browsers. Professionals have the time and skills to get those right, but this is primarily an information site, and sometimes simpler is better. As I studied the options I became increasingly disappointed at how the Web is a mess of broken standards, and it's largely down to one company's deliberate policy. Did you know that approximately 25% of all CSS code seems to be along the lines of 'and now here's an extra bit to make sure it works with IE'?
I wanted something easy to maintain, where I could change standard chunks (like the navbar) once and see it reflected across the whole site. I'd understood this was what CSS is good at. And I saw lots of multi-column CSS sites with what appeared to be a Navbar. Surely, I thought, that means you only need to change one file rather than every page?
No. There are a number of ways of doing that, but not through CSS. These pages have the entire text of the navbar embedded in each one! Some people advised me of other ways to achieve the effect -
- The first technique which springs to mind is Frames. However, these give problems in printing, and searchers have problems following links in a Framed site. This can result in the search engine pointing you at a page which is meant to be viewed with a navbar, but you have no link to other pages on the site.
- There's something called iFrames which seems to be a complicated way of doing, er, Frames.
- You can use SSI (Server Side Includes) files but it turns out my ISP doesn't allow that, unless I pay them more cash each month.
- A colleague showed me some Javascript which does the same thing, i.e. embeds the text from an exernal file in your current document. That looked good, but when he showed me it, it didn't work. Turned out my PC has Javascript turned off for security. So although I use a bit of Javascript on the Miscellaneous links page for some spoof news messages in the status bar, I don't use it for anything vital. (By the way, don't do that scrolling-in-the-status-bar thing unless it's a deliberately humorous page. Lots of users dislike it because they can't see the destination URL's when they hover their mouse over a link.)
Still to do...
Most of the pages of the original site still need conversion. I may never have time to beautify the huge ones, like the how-to-play guides.
Hmm... that bit on the Links page, "the VGAP community" is just crying out for a picture. Some Goths maybe, the Addams Family, or a sad picture of Trekkies...
I'd prefer it if just the main 'frame' scrolled, so the tabs and navbar stayed fixed and users could use those to navigate without having to scroll back up to the top of the page. However on a couple of pages, like the races page, there are so many links that the navbar needs to scroll too. One thing which might help is if the buttons weren't a full 32 pixels high - so plenty to do yet! Luckily, once I've figured it out, this kind of thing can be done for the entire site by tweaking the kk.css file.
(Notes to myself:) Why no line between the header and main bit? Why do the buttons go over the edge of the navbar? Make active tab look like a tab. Add KK logo in top left - (Io and Saturn in background, 32x202 px). Make the links more consistent - they often don't link to precisely what they claim. The header on SOME pages is too big - but not on all... yes, all. It can be tweaked with #tabs {positon: absolute; bottom:20px;} but 32px is a good size for the site logo. Add background image of skeletal London to navbar. Add more graphics. Need to add a copyright line to the Navbar or footer. Check credits in kk.css file. Why are images bigger in IE? Check all links still work every now and then. Check what Gort says - Klaatu etc. Make the KK logos "home" links (this is so on this page but something odd's happened to the top bar). Make the tabs a bit bigger. May need to define the top bar more closely in the css file.
