Xinus asks, How this website is designed ? Specifically, he's talking about the fancy right-aligned images that flow with the page.

Now, I'm not rightly sure why Xinus didn't opt to contact me directly. I became aware of his question only by examining how I suddenly got 50 unique visitors in the span of a few hours. Luckily, Apache's referrer logs came to the rescue and let me know the source of my newfound visitors.

Nick thinks Xinus is boring and a bit slow:

<Nick> What a boring guy
<Nick> [Xinus] looks like he has learned everything he knows off tha inna-net and not well at that

But who cares what Nick thinks? Nick is dumb. I'm going to ignore Nick and answer Xinus' question. Plus Xinus says my layout looks great. You're damned right it's great, and transitively I am also great. So yeah.

While I have explained many facets of the site's layout and my own ideas regarding web design in general, as well as the usability of software in general, I don't think I've ever fully explained the details of the avatar mechanism. (At least not on this particular blog. I think I had explained it on Oh Two.)

The short answer is I use the background-attachment: fixed CSS property. But that doesn't explain the whole thing. That just explains how the image does not scroll with the rest of the page.

The real magic comes from the images in front of the background that make it look like the background is more than it really is. I got the idea to make a system like that when I saw a website that used transparent images in front of a fixed background (the same idea used here, but in a different way). It was doing it to make it look like the web page was floating over space.

I figured that I could do the same thing, but make it look like the website had a window in it, looking onto some fixed scene.

My very first concept page is the easiest to start with. There, you can see a film reel in front of an image of a crying girl (yeah, a crying girl, so what?). The page is nothing more than a div, with the film reel background, on top of another div with the crying girl background. The girl background has the aforementioned background-attachment: fixed setting, and that completes the effect.

My next idea was to see if I could coax the browser into displaying a different image in the same position, based on the class of a div. My second concept page was completely successful, and bears an obvious similarity to the Right Glue. The window idea works by assigning each post an avatar, which is behind the post itself. Then, next to the post, there are transparent gradient images that make the images look more like they're actually part of the post.

After that, it was just a matter of writing the necessary PHP on the server side to drive a dynamic page that supports multiple users, comments, multiple dynamic avatars and a host of other things. Believe me, that was the easy part.

So, Xinus, I hope this helps. You can step through my concept pages (which are much simpler than the software as it currently exists on this site) the same way I did. If you have any more questions, please feel free to leave a comment or contact me directly via the contact page. But don't pay attention to Nick's nay-sayings. No one even likes Nick.