Category > Design
Where does all the content go?
Ok, redesign of Aquarionics is finished
Ok, redesign of Aquarionics is finished. As a general idea, this diary becomes the front page, New and Cool goes to the left of it, and the menu of other pages to the right. You will see it in action over easter, because today I am packing to leave Sunderland.It's strange, our flat, which used to be close, has drifted. Matt went home on thursday without me noticing, and I havn't seen two of my flatmates for days! Never mind, only a few hours until I go home.
Public Domain
Dorothea has put her entire site into the public domain. The problem I have with doing things like that is that occasionally people will take advantage of you.
(Sorry)
Edit: It's been pointed out to me that this could be misconstrued as being nasty. It was meant as a joke, and I'm sorta hoping people take it with a sense of humour...
This isn't to say there isn't a point behind it, but the implimentation is a joke. I'm just scared about how little beyond the stylesheets I had to modify...
Edit, 20:40 2003-02-06
I've uploaded a couple of screenshots of the sites in question for the sake of the archives. Tomorrow we go back to Aq6, Revenge Of The Coloured Boxen. Hmm. I wonder if I could do a differant-designs-daily thing for a week or so...
Attachments
Those who spoke on this:
Gentoo-man's club
Ahem. I really should plan these things out better.
So, I had finished part one of the Gentoo install project, getting a basic system (but not yet bootable, so I had to boot from the CD image and chroot into it) with glibc and stuff, then I wandered into windows to catch up a little.
Twenty minutes later, I'd redesigned Aquarionics to look like CavLec and done the post, so I started on the next bit (Stage Two: Basics such as bootability) compiling, and went to bed. (Insomnia caused me to spend a couple of hours on usenet, but I digress).
So I get to where I am now. The two possible problems with the design, one that Dorothea would object, and the other that Shelley would (It's her photo, and sending a preemptive email would have been nice, but I only thought of that as a problem this morning. See what I mean about thinking it though?) have both resolved nicely, so I started the next stage, which is getting XFree installed. The problem with this is that this part could take hours, and until it's done, I can't get at my original files to change the design back, so this design may be up slightly longer than I planned...
Those who spoke on this:
dearg:
I quite like this design, actually. It’s … refined. Classy.
Not that yours aren’t great, of course.
But I won’t be sad if this one stays for a while. Confused, maybe…
Icmp-echo:
Silly question, but how does not having a working X11 setup stop you from accessing files?
Oh, and the design is nice, though I think the yellow could do with being a bit lighter…
Martin Wisse:
The design is nice, but your real design suits you better, Aquarion. For some reason it feels almost claustrophobic on your site…
Back to normal
The CavLec tribute is down, I'm back to normal. I am, in fact, a moron. I saw Dorothea's post on Aquarionics’ oscillation and thought "Wha?". I haven't had any flack for this, so I wondered what she was talking about. Then I realised. Epistula is a fried system, and I didn't delete the cache when I redid the design, so the only things that had the new design were the stuff that was generated after the post in question or isn't cached (Like the "Add Comment" page) or was regenerated due to changed content (The relivant archives and categories are flushed when a post is added or modified to them), so the Gallery, Articles and any other page that was generated before midnight last night were still Aq6, instead of Sunset. I'm a fool.
It's taught me some things about CSS, and has reminded me how much I like playing with other peoples designs :-). Ahh, home sweet home...
For definitions of "Normal" that include all articles broken because something's deleted 800 records of the category links database. Thank zeus for my backup system
Those who spoke on this:
Burningbird:
Bummer! I kind of liked the CavLec persona. But this is very nice too. I like the boxes.
However, the text does wierd things in IE 6.x. I don’t know if you care about IE 6.x, but I thought I would let you know. It overlaps in places and can get hard to read.
Minor Redesign
As Shelley pointed out, the changes that I made to the Aq6 template while I was pretending to be CavLec impressivly broke IE6 (See attachments). Regression has happened. Damn IE6...
Edit: Mercy of Zeus, I've just noticed both that this is entry number 1000 (Though there are only 778 entries, what with tests, deletions and mistakes) and that I've had over 13,000 hits in the last two days.
Attachments
I'm a design geek, arn't I?
Via Abraxas (Because I missed it on NSS) there is the Helvectia or Ariel quiz (req. Javascript & images, natch), on which I managed an impressive 9/10 (I lost on WINDOWS because I can't tell the difference between the caps-lock set like I can with the lower case (the slope on the top of the "t" in ariel, the serif on the back of the "a" in Helv, the top-curve on the "r"). Bah, now you'll beat me :-P
Those who spoke on this:
dearg:
Um, no.
6/10 first try, 3/10 on the second.
I can’t tell the difference at all! They’re just fonts to me…
Marco:
9/10, missed on APPLE.
But I cheated, by having read the pointers here. :-)
JavaSick
So, I wanted to create some kind of thing in Javascript to test the limits of image displaying in browsers. The end result doesn't work in Moz (because of the way it handles animation) and possibly requires 512mb of memory (I know it used to crash my browser, and now it doesn't)
This is the default grid, which fills a 1280×1024 screen properly, but you can play with the size of the squares as well as the number of blocks by playing with the variables sent to this page.
Aquarionics Experience
On the first hand, I’m going to mention that things appear to be going upwards in life, banks are paying me money instead of charging me it. This won’t last, but is cool while it does. I may even not be homeless soon.
In the meanwhile, Phil Ringnalda was just lightly ranted on the subject of excepts of posts in feeds instead of the full post.
I’m semi-guilty of this. The description field of my RSS .9 feeds are all cut-down excerpts, whereas the RSS2 feeds contain the full post within content:encoded tags as well as the thirty metric tonnes of other stuff RSS2 gives us to play with. (I maintain that the best way to autodetect the trackback of a post is to find the trackback fragment of the RSS feed. My page is too big to add thirty lines of comments for every entry already.
The original reason for the excerpts was that I wanted people to visit the site. At the time, new stuff was appearing here daily (In much the same way he sidebar to the right has been filling over the last couple of months, but over days rather than months) and having spent time and energy on the design, I’d rather people viewed it here instead.
The other major point was that I tend to format posts, emphasise stuff and insert pictures in entries from time to time, and the fact that putting HTML in the description tag was evil was also a factor. The content was having problems in a purely textual medium, and I’m a designer, damnit. You will be forced to see my designs…
In Other News, The blogroll is about to vanish, or at least shrink considerably. It doesn’t mean I’ve Deblogrolled anyone, it’s just that I’m experimenting in differant ways to get my blogshares share value somewhere above $1.
Those who spoke on this:
Phil Ringnalda:
D’oh. Maybe if I actually looked, rather than just hanging onto a feed URL that I’ve passed around between half a dozen readers, I’d be getting more. However, now I’m stuck halfway: I unsubscribed from your 0.9 feed, but the unescaped ampersand in the description of “Please stop hanging around” is stopping me from being able to add the 2.0 feed.
Aquarion:
D’oh.
htmlentities(break_string(strtr($item ‘content’] “”,”’”),400)) would be better then…
Fixed. Well, Validating.
Paul:
Yeah, well, you stole all the shares I bought. I had faith in your blog, but you let me down. Let’s see how your share price copes with being removed from my blog roll. Take that!
Disclaimer- This is a joke. Blogshares are virtual. Shareprices may virtually go up as well as virtually go down. Your virtual home is not at risk.
Ch-Ch-Ch-
I shall not redesign my website.
I shall not redesign.
Redesign is the time waster.
Redesign is the little distraction that precludes me doing code I’m paid for.
I shall face the new design.
I shall allow the new design to pass though me into Paint Shop Pro,
then I shall analise it for possible pitfalls.
Is it elegant? Does it say “I am cool”? does it spring from the page and make you want – nay – need to explore it?
It does? Then it is good.
Does it dance? Does it swing? Does it sway from side to side? Does it rely on Javascript for important design elements?
It does not? Then it is good.
Is it codeable? Can it be done without resorting to tables? is today’s CSS up to the challanges of this design?
It is? Then you have done well?
Is it easy? Can you complete it in a few days? Will you be bored of the mindless tedium of creating the templates? Will it streach your knowledge of CSS?
It will? Then it is a worthy redesign.
Nevertheless.
I will not redesign my website.
Yet.
(Edit: I did. Six days later. Bah)
Those who spoke on this:
dearg:
How long, do you reckon?
A day or two? A week? Maybe a month?
Place your bets! :)
A New Hope
I’ve redesigned. It’s Stuart’s fault. IE doesn’t like it much (I’m using semi-transparent pngs and an Evil Hack() to hide them from IE. Most of everything you can’t see yet will be returning, some of it hidden until you click (New design paradiem). It works as designed in Moz1.*, Fails to work but in a readible way in IE, and will probably look even worse in Konq than the previous design did.
What do you think?
Those who spoke on this:
lonecat:
I think the design’s nice. Very clean looking. Nice and blue.
I think several things that would embarass you, were I to mention them here.
I think I did rather well managing to write both episodes 500 and 600 of Forever.
I think we should remember to phone each other.
That’s what I think.
AdrianO:
Looks clean, but a little cluttered. Needs a little more whitespace around the edges of the journal, and also to keep the index box distinct and separate.
Stuart Langridge:
Hey, what did I do? :-)
It’s got a minimum width, and if your browser is less than the minimum width wide then you lose content off the left-hand edge, in Moz 1.2.1.
I like the fade effect on the buttons at the top, though.
Did you only change the CSS?
Aquarion:
You redesigned :)
The minimum width thing is a bugger. For some reason, if you have five things of twenty percent each, IE renders the last one on the next line, meaning that IE can’t do basic maths. My solution to this has been to make the page a fixed width (780px) and do the maths by hand. Eventually I’ll serve up browser-specific CSS (using PHP’s “Get Browser” stuff on the CSS file) and Moz users – and any other browser which supports both max-width and 5 20% = 100% – will be able to resize it to any level.
Corinne:
Much as I hate to say it, I actually liked the design before ;)
MP:
Hmmm… I actually prefer the IE version…
Not keen on the fading buttons under K-Meleon…
Then again, I’m just weird, and it probably doesn’t crash the browser should a KHTML based browser dare to consider looking at it, like my site does…
Oh, and is it “readable” or is my brain being weird… Please bear in mind that my brain spells “vehicle” as “vericle” if left unchecked, so I’m by no means a good spell chequer :-)
Wheee! Design!
Another day, another design. A couple of known errors:
- It looks crap in IE. Yeah, we know. Not sure why, working on it.
- There is a line down the middle of the header in Gecko-based-browsers. Yeah, we know that too. That’s because IE can’t count, so the left hand side is 50% and the right is 49.9%, because if left+right are both 50% IE has to put them on two lines because, you know, 50+50 > 100.
- The Aquibble logo still isn’t here. That’s because I don’t have the vector graphic of it on this machine. It Will Return.
- The bars in the menus on Gecko are black, but the end point is white. Why? Search me. I’m only the designer. I said “color: white !important” and our survay said “no”. Working on it.
- If you’re still working on it, why did you put it up? The entire internet is a work in progress, man, full of potential and stuff, and what is blogging but an attempt to justify the universes we inhabit? Woah, deep. I’ll have to write that one down. Anyway, I work better with people telling me what doesn’t work. Besides which, I was bored. Besides which, it’s my website. Neh.
Those who spoke on this:
MP:
I can’t find a line in my Gecko based browser…
And does it have my trademark trick of crashing KHTML based browsers? If it does, you’ll have lawyers breathing down your necks – it takes a lot of skill and effort to make a perfectly valid XHTML/CSS page crash a browser… Well, apart from IE...
Once again
I’ve redesigned again. Taglines are back, and I still think the blogroll is taking too much space. This needs fixing.
Broadband comes tomorrow, when life will be back to normal. Currently I’m surfing the web over a 28.8k modem, which sucks in facinating and horrible ways.
TTFN.
Those who spoke on this:
dearg:
Oh, cool!
/Love/ the redesign. Want to see the film, but project and exams come first, dammit…
Stuart Langridge:
Hey, that’s really nice. Although I had to jump out of the aggregator to look :-)
Paul:
Wow, that’s nice.
Although I can’t see a way of getting to the index page from the individual page (journal doesn’t count, or does it?) Important if you have to break out of the aggregator to view the page.
Aquarion:
It would do. I added it about ten seconds before you posted :-D
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.
Those who spoke on this:
Tom Pike:
Just a suggestion: perhaps you should specify the max-width of the page in ems rather than pixels, thereby allowing people with high screen resolutions and high font sizes to see a more appropriate-sized page? Good work btw :)
Paul Freeman:
I must have force reloaded about 5 times before realising you were talking about your current design and not a new one.
The link at the end (timecapsule) appeared to be broken too, which didn’t help me work it out.
Aquarion:
Aha, this is because I’m a moron who hasn’t worked out what year it is yet…
Those who spoke on this:
Aquarion:
I should point out for the terminally confused that I redesigned the front page, not any of the internal ones.
Pingter:
It’s quite nice, but I fear the horizontal scrollbar…
Google Redesigned
Google have redesigned their results page. Since it hasn’t reached all the clusters yet, here are some screenshots:
And the base:
Those who spoke on this:
Kayode Okeyode:
Not seeing it here yet, but I would be more than interested if their code validates.
Jason:
Interestingly, the changes don’t seem to be there still. I wonder if it was an experiment that accidentally leaked?
Reasons IE Sucks chipmonks though chainlink fencing, Number 11 in a series of infinity
Given this URL:
http://www.aquarionics.com/gallery/Gid_[and]_Suzi’s_New_Year_2003
IE does the following:
http://www.aquarionics.com/gallery/Gid_%5Band%5D_Suzi/’s_New_Year_2003
Now, I realise the escaping error in the generated URL was my own stupid fault, but the fact that IE automatically reverses any backslashes in a URL - to retain compatibility with Windows’ broken directory seperator – is interesting. It means, for example, we can do this:
@import url(”/assets/cssspecial-ie-stylesheet.css”);
and IE will load it (It will try to “fix” the broken backslash) where Gecko/KHTML will attempt to load a file called “cssspecial-ie-stylesheet.css” in the assets directory is interesting. New browser-hack?
This isn’t news, really. When the first version of the new, all accessible RNIB site went live (And I ranted about it) some of the links contained backslashes, and thus broke for Mozilla, and it’s still annoying, but it might be useful.
What would be really interesting would be combining this with an IIS server. Does the server resolve it as the right path on the system (The Windows one) or as the RFC 2068 compliant one?
My solution, by the way, was to rename the album to “New Years 2003” and leave the escaping problem until I’ve got time to fix it properly.
Those who spoke on this:
Pingter:
I think some ’s have been lost in that post somewhere, and if I write that without the apostrophe it disappears in the comment preview as well…
Peter:
Well, I can’t see any instances of the character causing the problem at all – pingter, in your comment I just see ’s, without whatever character should be before the ’
I assume the little beastie is the diagonal slash that isn’t /, yesno?
Aquarion:
Yeah, half as many as you put in :-)
I wrote the [E]2 commenting system with PHP’s “Magic Slashes” turned on, which caused fun when taking things out of the database and previews. As I recall I strip all escape systems at least three times {stripslashes(stripslashes(stripslashes($string)))} before display, just to be sure.
- Aquarion adds this to the “Bugs to be fixed” list
Laurabelle:
This really scared me before I realized that it actually still was your site, and the link I clicked on to get here, which still said Aquarionics, hadn’t metamorphosed into a link to Caveat Lector.
I guess it says something about me that I’m more scared by inconstant links than by creepie-crawlies or by the idea of monsters under the bed.
Simon Willison:
It scared the heck out of me as well :) Took a few seconds before I realised I hadn’t clicked the wrong link.
dearg:
You evil, evil man, you!
I wondered how my Aq.com favourites link had taken me to Caeat Lector. Then I woke up, so I suppose that’s a good thing…
Dorothea Salo:
No worries—I think it’s hilarious! ("Did I just click the right link?" I asked myself.) Well done!
Of course, it does kinda expose the weaknesses of the design… but I suppose I can work on that.
amy:
Scream it ain’t blue!
Aquarion:
Bah :-P
The other design isn’t blue either
Michael:
The amusing thing (to me, at least) was that I had the exact same idea. You quite handily beat me to it, but it was a tempting thought before I got to the end of Dorothea’s post where she linked to you. Good to see she was able to laugh at it!
Stuart Langridge:
Heh. Clearly my brain doesn’t interpret CSS, even if my browser does, because I didn’t notice what you’d done until I read to the bottom of the entry and, confused, took a metaphorical step back and noticed that the design had changed…
Martin Wisse:
Hmmm…
This raises a question with me,where does site design swiping start and "looking at source code to figure out neat tricks" end?
(I was only looking at Dorothea’s site just now to figure out how she did her linktable so I could adapt for a site I’m working on and not have to depend on a table based layout instead of a css based layout. ((Not being somebody who used to think much about design, other then let’s keep it readable I still need to figure out those tricks))
Paul Freeman:
Sadly, I knew about it before visiting the site (read cavlec first; I’m always behind). Wonderful redesign.
Did you change any HTML at all? Just CSS?
Aquarion:
A bit of HTML, for removing the title image and the post-info box (Permalink, trackbacks etc), but mostly it was importing CavLec’s CSS files and renaming divs in them.