Aquarionics

Aq9 - A Study Of Glasses In Blue

So, the new design then. Considering the old boxy design was one of the more popular ideas I’ve had, why change it?

Firstly, I didn’t like it much. I don’t actually like heavy black boxes. The original design as specified was based around the idea of a constantly changing photo in the top left corner, which didn’t happen, and a heavy delineation between the different sections of the web site, which changed. The big black boxes separated everything out from each other, and the page looked crowded.

Secondly, I want my web site to be distinctive. Of the many things I can claim to be, designer is the only one I’ve got paid for, and I have an interest in the sort of Corporate Branding type stuff, which the old design didn’t help with. I also like the ability to muck around with the design in small ways to make it different on special occasions, and whilst the photo-boxes along the top helped with that, they weren’t anywhere near eye line, so that had to change.

Thirdly, it wasn’t blue enough. I get enough stick for this in my various redesigns already, but I like the colour blue, and the boxy design was partly a revenge against all the people who said my designs were too blue. Well now look suckers, it’s ALL blue!! Ha ha! ha ha ha ha!

There are four parts to an Aquarionics design. Epistula calls it Book, Chapter, Scene, Page. Aquarionics is a book, Journal is a chapter, Last 10 is a scene, Entry 1127 is a page. Those are the four design elements too, we have the global navigation, section navigation, scene navigation and page layout. Pure weblogs (i.e., sites that are just weblogs, or weblogs that are sub sites) can just have global layout, section navigation and page layout, but Aquarionics is a large site with several sections that interconnect, which makes life Complicated.

So, we have the global layout & navigation which doesn’t change from document to document. It has links to the six major sections (Journal though to Projects) and the five infomines (Before I had the about/contact stuff I would get periodic emails asking me why I never credited any of the other writers. True). The previous few designs have had these as a horizontally styled list, and the last two have been marked up properly while I was doing it. There are two reasons I didn’t do it this way this time. First was that people wanted the taglines back (They were present in all designs up to 2002) and I didn’t want to mix up the navigation with the comedy stylings, and secondly because I have several visitors who use Konquerer, which can’t render lists horizontally and normally displayed them over the first entry. This sent me into the current 3.5 column layout. Global navigation should generally be above the fold, and preferably as near to the top left as is artistically possible. The exception to this is if you are writing for eastern markets, which is a whole new and fun ball-game (My international design mentor would hate this design, large amounts of white space == death) because that’s the first place people will look.

The three column layout is a staple of Blog design, and for good reason. It allows navigation and maximum content to be above the “fold” (the fold in web-design is the first page you look at, comes from newspaper design, where you sell newspapers based on what is above the half-way fold on the front page). It has a number of disadvantages, though, partly that it’s unreliable when done without tables. My method of doing it has three floats, one aligned left, one right, and one undefined, so the undefined one fills all available space. Well, not all available space. The whole thing is enclosed in a div called “world” with a maximum width of 1024, meaning that Mozilla users at silly resolutions don’t get the whole three-page essay on a single line. The reason why newspapers are divided up into columns, and the reason BBC News does the same thing, is because it’s apparently easier to read columns of text than full pages. IE users are screwed on this, however, because they don’t honour max-width (and now never will).

On a related note, in my design-transient style sheet (the sheet that defines things that never change, like block-quote styling, acronym styling, styles for the spell-checker, styling for definition lists) is the stanza img {max-width: 100%; border: 0} which will ensure that if a Mozilla user shrinks their window to the point where an inline-image would put the dreaded horizontal scroll-bars up, the image will shrink instead. The Gallery is the place this is most used.

One of the problems with the front page of the site is that there is an awful lot of information in the right hand bar, including some fun things (The Vice City stats, which are automatically generated from my saved stats by a perl script), some important content things (The Blog ‘O Links, which may vanish soon as I’m not using it) and Useful things (The Recent Comments) and some things that really should be there (The blogroll). I’ve got around this by the simple method of hiding the blogroll unless someone wants to see it (Cunning Use Of Javascipt 101) which gets rid of most of the vertical space, and as I say, the Blog ‘O Links will probably vanish too.

Now the pretty bits. I was playing with a new identifier for the site. I’ve been using the ‘Aquarion Symbol In A Circle’ thing since 1998, and whilst I haven’t abandoned it, it’s being shelved for now in favour of a less “Corporate Logo” thing. This was mainly decided after spending a while playing in PSP with possible new designs, and things to go in the top left, going though clouds, purple rounded rectangles, books, Fish, and finally taking a photo of my glasses against a white piece of paper and then turning up the brightness & contrast until you couldn’t see the paper. A little mucking around and alpha transparency effects brought Aq9, the current design.

A few upgrades since then. I wanted for the comment-boxes to be semi-transparent but couldn’t find a way that worked in both IE and Moz (The IE was a wonderful failure. The entire box was semi-transparent, including the text. The more replies to the thread, the more transparent it got), and the ones I did find were non-standard. Eventually I gave in and put a semi-transparent png as the background for the comment boxes, blockquotes, and sidebars, with appropriate CSS trickery to hide them from IE6, which displayed my nice white png as a murky grey colour which looked horrible. The CSS that does this is: div.content>div.comment, div.item>blockquote, div>div.sidebar {background: url("back.png");}

The bold links thing is a double-edged sword, too. I like bold links and find them a lot less annoying than underlined ones, but until this weekend if I used bold text in an entry you couldn’t tell the links from the bold text. My first solution to this was the highlight links in this paragraph trick (which has problems), which solved the problem slightly (Links in the current paragraph had a yellow background) but not totally, because things that weren’t links still looked like they were. Eventually I increased the brightness on the blue for the links (It was slightly brighter already, but not enough)

The final trick is the reason why I like this layout better than the previous one (and all the other mock-ups I did before this one went live), The logo and glasses are a background image, which means I don’t have to muck around with z-indexes to superimpose a new image on top of the glasses.

Plus, as of this morning we have a favicon, and it’s blue, and I like blue. And that’s the explanation for this redesign.