Diary of an up and coming sociopath

Today I begin a new section of this blog. It may not be long lived, and it will certainly bore the shit out of a lot of you, but it’s arguably relative to the wider web community and I have the motivation to do it, if only to keep myself on top of the new site design.

Yes, that’s right, new site design.

After little over a year of green and grey boxes, I’ve decided to start afresh. Not just with the design, with the whole site, actually. I expect to be leaving Uni soon, and I want a site that’s slightly more up to date. Something I can put on my CV and that’ll be worth coming to for potential employers. Something that actually contributes to the internet instead of just being a loose collection of stuff I like.

Primarily, my website has always been a learning aid. The original version of this webpage was literally the first time I wrote HTML by hand, and when I started I didn’t even know how to do tables. The second revision was my first attempt at expanding my design horizons. It wasn’t great, but it was a step away from the Windows 16-colour pallette on black background design that had pervaded my sites for the previous few years. Following that, was Version 3 - the all singing, all dancing, CSS, XML, PHP version of the page that currently lives here. It was the first time I felt my design could be called good. It’s not revolutionary, and it’s not going to win awards for aesthetics, but it did what I wanted and it did it with CSS.

However, omnia mutantur - and this site is no exception. Version 3 is deprecated, and all that remains is to replace it with Version 4. The goal is to finally cross the line that separates functional design and aesthetic design - or rather, to integrate the two. One of my options after Uni is to go into web design and development, and if I can redo this page, then I can get a step closer to proving to myself that I can design a site as well as I can implement one.

So that was my first step - in order to take design seriously, I had to actually do some design. Thus, I did the first ever James Hunt original web-design concept piece. I mocked up the front page and colour scheme of my new site in about 3 hours. It pleased me - it was utterly unlike any of my previous webpages, which was in keeping with my initial plan. In fact, it pleased me so much, I didn’t even bother to consider a second design and decided to have a stab at it.

I began writing the site the day after. I’ll be modest - it wasn’t that difficult to get started. I’m quite adept at writing raw XHTML and CSS to compliant standards and Textpad, the editor of choice, has syntax highlighting, which is a complete dream come true for a combination programmer/web-author like myself. It’s not WYSIWYG, but that’s not a problem, since the only way to get a proper idea of how a page will be displayed is to use the actual browsers. The browsers of choice are, as ever, the latest IE and the latest Mozilla. The design came together fast, and in a few hours it was looking all good. Except, of course, for Mozilla’s tendancy to display the page brokenly.

I tracked this down to a problem with height attributes and percentages. With correct CSS specification, you can specify height in percentage, but that percentage is of the containing div. Nest that back to the body tag, and I hit my first issue - IE seems to assume the height of the containing div for body is the height of the browser window, where Mozilla assumes that there is no containing div and thus cannot assume height as a percentage. This meant that my design wasn’t working - I’m a great advocate of having relative values used as much as possible, to accomodate the most resolutions, and thus my percentage-based heights were breaking in Mozilla.

I fixed this (or attempted to) mainly by completely re-writing the site to have absolutely positioned elements at the top (which is fine, because it’s the size that I like to keep relative) and thus made the browser start the content div in the correct place - beneath the header - and stretch down as far as possible, since it was not now confined to a container div which was causing the problems in the first place. With the content design element displayed properly, I could move onto actually putting content inside it, which I began - and surely as the world turns or as Duke Nuken Forever is not released, so I encountered my second problem. Trying to use columns.

Columns are a sordid bitch to make properly in pure CSS, especially if they use the most horribly interpreted element of CSS, “float”, which they invariably do. IE and Mozilla just refused to agree on how to interpret the CSS. A common problem. In this case they were positioning the two columns offset in various ways, occasionally off the screen, occasionally on seperate lines, and occasionally on top of each other. I poked and prodded, and re-wrote the code, but woe was I, because Mozilla not only didn’t like 80% of the rewrites, it was usually far, far worse than the previous. Almost depressingly, IE would suck up everything and have it displayed exactly how I wanted, which makes me think that either CSS is incredibly broken, Moz’s CSS parsing ignores the standard or IE’s CSS parsing ignores huge chunks displays things however it wants, and I suspect it’s actually all 3. Eventually, I got it down to the closest of designs - but Moz was still having none of it. I wanted one column to resize with the screen, without moving to a new line, to allow the design to remain correct in smaller resolutions. Moz was moving onto a new line even before the window would’ve fit into 1024×768 (I work in 1280×960) and so I had to concede defeat. After trying 5 or 6 different ways, I just gave up, threw in the towel and used … a table.

It worked first time, no fuss, in both browsers. The design was exactly as I envisioned, exactly as I had been attempting to get both browsers to display for a couple of hours now. I could’ve wept, frankly. Where is the seperation of design and content Nirvana that CSS promised? It’s bad enough elements like “min-width” are just ignored by most parsers, but for CSS to be so terribly shamed by a table is just pathetic - tables were supposed to be superseded by CSS, it’s not supposed to be this hard to replicate their behaviour! However, it’s not a huge blow. Table is included in the transitional XHTML spec and if I’ve been taught anything by this horrible affair it’s that we are certainly still in the transitional period of CSS. The right tools must be used for the job, and in this case, that tool is the table tag.

I admit, it’s disappointing to have to fall back on such measures so early in the game. Somehow fitting that my web-design education began with hand-coded tables and a few years later, here I am, still reduced to coding tables. I’m finding to hard to believe there’s no other way. I tried using “display” elements to replicate tabled behaviout but IE doesn’t have that implemented yet. I’m not giving up without a fight though - I will continue to work at getting these columns to display and resize in both browsers without the use of outdated techniques, but for now I’m going to have to sleep on it and admit it’s going to take more time. I shall push ahead on other fronts. I may be losing this battle, but there’s a whole war going on that I have to think of too. Tomorrow, I have a PHP script to write - one to choose the image for a page, and to display a watermarked version of that image behind some text. Nothing difficult, and it should prove theraputic after the frustrations of the evening. After that, I can consider the front page complete and start organising the other sections.

I haven’t decided how often I need to do one of these web-design updates, I guess I’ll do one whenever I feel like I’ve got something to talk about. Hopefully, they’ll be a little more technical and focussed because I decided to write this one after I’d done the stuff, and from now on I can keep reminders of changes and problems as I go, and because I won’t be recounting the entire history of the site, there shouldn’t be so much to write about. It should prove a valuable log of my progress.