If you're revisiting the site, then I'm sure you've noticed the new design. If you're reading over RSS, well, then you'll have to pop over and check it out.

I got bored last night, started sketching out what a logo might look like for The Future of the Web, and ended up sketching a whole new site layout to match it. Then I painted it in Paint.NET, was surprised how much I liked it, and spent the rest of the night wrestling with CSS until it came out the way I wanted.

Here are a few notes on the design:

• This was the first time I used Internet Explorer's Conditional Comments. I have a single CSS file that works for both Firefox and IE 7 (no hacks), but I use the extra CSS file to get rid of some of the png transparency files, and to fix a couple of bugs.
• I tried to keep the HTML the same and just change the CSS. I ended up having to change a few things (the search form of course, adding some classes, moving a few elements around) but it was fairly minimal.
• I encountered some of the strangest CSS bugs I've ever seen, like things disappearing/reappearing when scrolling down and up, or things moving around when making a link active. For IE 7, my greatest friend was zoom: 1, forcing things into hasLayout mode. This always fixed weird behaviour.
• I opted for a fixed width design to improve readability. I think a lot of web designers developers have huge resolutions, and having the text stretch out so wide makes it harder to read.
• I feel the site looks a lot cleaner and simpler than the original design, even though there is really just as much stuff on the page. I think this is due to the text being in a white area in the center of the page instead of stretched out filling most of the page.
• There are random slogans at the top of the page. Refresh and collect them all!

I'm looking forward to your comments. This is the first web design I've done that I'm actually really happy with. Not bad, I think, for not being a designer.

Update: For those of you who are new to the site, or if you just want to compare, here is a screenshot of the old design.

There seems to be a trend towards using floating layers instead of popup windows. Floating layers (sometimes called "Div Popups" or "Floating Divs") are just HTML elements, such as a divs, styled to sit on top of the rest of the page. It's basically like a real window, and usually they are designed with an X in the top-right corner to let the user close the "window" (i.e. hide the layer).

There are some things to consider when deciding to use floating layers:

1. Popup blockers don't block them
2. People have to look at them at least to figure out how to close them
3. If the user clicks a link on the page, the floating layer disappears with the rest of the page
4. JavaScript is required to close them, but not necessarily to display them (popup windows require JavaScript for both)
5. They will never look or act like real windows on every computer
6. There is usually no way to minimize or resize them, or to switch back and forth between windows

If you think about it, each of these points could be a positive or negative. If you're displaying advertising, you'll be glad to sneak around popup blockers and force people to look at the thing. If you're designing a user interface, you might want to let people minimize, move and resize the popup window so they can see what is behind it.

From a usability perspective, floating layers are a bad idea. You have to design a way to close them, maybe even to move them around. But however you design them, they won't match everybody's desktop. Sure, you can design them to match the default Windows XP theme, but they will stick out like a sore thumb on Mac OSX. By using floating layers, you make people have to stop and think and figure out how to close the thing, whereas they would automatically know how to close a regular popup window without thinking.

There is already a very easy way to make a window that fits in with the rest of the operating system that can easily be moved, resized, minimized, maximized. Unless you have a strong need to use a floating layer, you might as well stick with window.open.

You may not even notice right away, but I added shading to the boxes on this site. This is the final product of over three hours of working on my design.

No, I didn't struggle with making shading images for three hours. I tried to redesign my whole site from scratch. I'm getting a bit bored with seeing the same thing for over a year, and I've been told at least once that my design needs an overhaul.

I messed around with some different layouts and different looks, and some of the changes seemed good. One of my strategies was to put the side boxes with links to the bottom of the page. Although it did look a bit better and cleaner, I didn't want to lose the navigation "above the fold". I think when visitors come for the first time, these links may be the only reason they stick around.

Of all the experimenting I did, one thing was clear: I need to introduce images to add another dimension to this design. I decided that I could do this to the current design. So I did. And that's why I made the shaded boxes.

I think that rather than redesign the whole site, I'll continue to make minor improvements, move things slightly, add images, change the colours, rework the header or footer, etc. It's just too much to redo the thing from scratch, and then I'd lose all the work I've done so far.

Let me say it again in case it's not brutally obvious: I'm not a designer. I don't consider myself a designer. I have always been interested in art, and I like to draw and paint. I also know CSS inside and out. I think I know good design when I see it. But I'm no photoshop ninja. I have ideas in my head, but by the time I'm "finished" I'm looking at an ugly cheap pile of crap. This is an area I'd like to improve, but for now it's just a bit of a hobby.

Many people don't get the difference between a web developer and a web designer.. "Wait, we still have to pay someone to draw the thing? So what do you do exactly??" So maybe it would be in my best interest to tackle some web design.

If any designers out there want to pass on some tips on how to improve or which sites can teach me the tricks, I'd be very grateful.

Jonathan Snook just posted a nice example of why you should stick with what's predictable. When designing, there's a lot of temptation to go against the grain, to do something a little different than everybody else does it. Except, it makes your interface less predictable. And predictability is key for user friendliness. Whether it's underlines on hyperlinks, or simple navigation titles, you'll usually end up winning more points for usability than you ever will for creativity.