MarkKawakami.com

Brushed!

Categories: General, Technical, Web Standards

Here it is, the new design. I call it "Brushed" for the brushed metal appearance*. I'll probably change it soon, because although it's not a bad design, it really doesn't push the envelope as much as I'd like, in terms of both the actual visual appearance and the underlying CSS. The criticism a lot of people have of CSS-based design is that the resulting web page all tend to look "boxy". This is a completely ridiculous assertion as many of the beautiful designs at CSS Zen Garden can attest, but there is a grain of truth to it. The problem is that until recently, most of the people that really know their CSS were programmers and not designers, and the resulting aesthetics tended to reflect that. So I'd really like to get to something that doesn't have that perpendicular feel this site has always displayed.

There are a couple of cool features, CSS-wise here. The "MarkKawakmi.com" graphic utilizes image-replacement techniques that replace text with a graphic, which means I don't have to have the image embedded in the source code. It's also a rollover, and that uses a refinement to the image replacement to avoid pre-loading the image, which makes it the fastest possible rollover.

The other cool feature is the Ajax-based search box on the right. You can type search terms in the box and it will automatically fetch the results of the search. It works in Internet Explorer 5+ for Windows and Mac, Mozilla based browsers like Firefox, Safari, OmniWeb and Opera. Basically the full list of modern web browsers.

And an extra for all those browsers except IE is that if you roll your mouse over the title of one of the search results, a box pops up that has a little excerpt of the entry. This is entirely CSS, not Javascript based, which is a very neat trick. I'd be more proud of it if I had been the one to think of it, but the behavior is based on the "LiveSearch" feature of 1976Design.com, so credit is really due to him. The background of the popup excerpt is a semi-transparent PNG, which gives it a translucent effect. Truthfully, that's really just showing off and I think it's sort of un-subtle, so I'm probably going to change that eventually.

There's also a couple of little bugs with my search tool that need to be fixed. The most obvious one being that if there are quotes or other special characters, they get displayed as their HTML-encoded values. I think this is because they are sent back to the browser as CDATA, which basically means that they should be interpreted as is. This shouldn't be too hard to fix.

Another semi-bug is that when you click on one of the entries, you lose your search results. And clicking the back button fails to bring them back. You have to retype your search to get the entries. This isn't a bug, per se, but it is poor interface design. To fix this I think I'm going to set a cookie that has your last search term because I want the links themselves to be clean, but that raises a couple of implementation details that need to be handled.

My blog roll on Windows Internet Explorer

My blog roll on Safari

There is another bug that appears in Windows IE, and it's Microsoft's fault. My blogroll should look like one continuous list of links without any gaps between each entry. In IE, a visible gap appears. If I add a border to the list elements, the gap disappears.This makes no sense, it should respect the margin settings I have regardless of the presence or absence of a border, but that's IE for you. Which is why, if you're using IE, you should really consider switching to Firefox. Actually, the reason you should is security, but this is a good reason too.

At any rate, I'm not in any hurry to find a workaround for this bug, I'm all right with just living with it. It's just really disappointing that in 2005, I still have to decide between having different displays on different browsers or spend time and thought fixing things that should already work.

Another change that my friend Jon suggested is integrating the search box into the blogroll area, and having the results push down the blogroll. That's a great idea for a number of reasons. First of all it saves horizontal space, which means that the entries area can be wider. Secondly it prevents the large empty gray box when you have no search results, and I won't have three different boxes of varying height. In fact so many positives come from this change, I'm kind of kicking myself for not thinking of it immediately. It really is the obviously right thing to do now that it's been pointed out to me.

I also need to add some sort of little explanatory text for the search tool, I think. Nothing fancy, just a "What's this?" type link.

So, even though I've been dissing the entire design, I'm pretty happy with this as a first draft. Hopefully I'll have simple fixes and changes done soon. And I'd like to get the next major redesign up faster then it took me to get this one up. I get pretty bored of a design after about a couple of months, and my old design (the now retired "Greenbriar") was up since October or September.

For my next design, I'm thinking about something inspired by the graphical design of "The Incredibles" credits. Something with bold color, angular (but never perpendicular) lines, and a 50's-modern look, but that may be just because I recently got my "Incredibles" DVDs. At any rate, I really like the sleekness of it, and I think the general look could transfer well to the web, but I haven't really seen anyone else doing anything like it.

* For you Photoshop mavens out there, creating a brushed metal appearance is extremely simple. You just start with a solid color, use the "Add Noise" filter (set to monochromatic) at a relatively light setting, then add a horizontal motion blur. Voila! If you're using it in a tiled setting, like a webpage, you can make it tile seamlessly by running the offset filter with only a horizontal offset. This makes it wrap at the edges. Then select the area with the seam (and some of the surrounding area) with a large setting for "feather" and run another motion blur. I forgot to do that on the medium-blue background image here, so you can see the seam just to the right of the entries. I'll fix that soon as well.

posted by Mark Kawakami at March 18, 2005, 11:03 PM // permalink // (6) Comments

There's more fun at "Mark Kawakami: A casual relationship with reality" home