Bernzilla Redesign 2005: Submerged

Album Cover: Icky Thump

"I'm gettin' hard on myself, sittin' in my easy chair."
White Stripes / 300 M.P.H. Torrential Outpour Blues

Posted on September 25, 2005 5:18 AM in Web Design
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

Using image maps an old, dead technique? Says who? :)

Introducing "Submerged," the latest design of As you've probably noticed by now, as long as you're not reading this in one of those new-fangled news reader thingies, I have completely redesigned my website. I've dubbed it "Submerged" simply because it just has that kind of feel to it.

I'm actually pretty amazed at how long I was able to stay with my previous design. I got a lot of positive feedback about both the "Snow" and "Gecko" themes that were available, so that probably helped a bit too. However, as obvious by my recent refresh, I was getting a little antsy last month, and it eventually led up to the complete overhaul that led to what you see today.

Yes, I am using an image map for my main header, but I've employed techniques similar to those put to use by Dave Shea to ensure that getting around my site is as efficient as possible with the new header. I've also moved back to a smaller font size for my main content, simply because I agree with Ryan's opinion that it makes for a "crisper" look. As always, though, thanks to the beauty of CSS and non-fixed-width font sizes, you can hit CTRL/+ or CTRL/- at any time (in Firefox at least) to change the font size to your liking.

As is apparent in the preceding paragraph, I've also added permalinks to comments so that interesting or useful comments (I find they are usually more interesting than the original content I post) can be linked to directly. Those are available via the arrows next to commenters' names.

I think probably the most monumental change, though, is the move from a sidebar to a subheader. The thing about a sidebar is that eventually it loses its usefulness as you expand a page vertically. Since I'm only interested in linking to a few of my recent posts from the main page, and because I usually only list a few of the most recent B-Sides anyway, it made sense to move those items into a subheader. The list of recent comments is just icing on the cake that became possible with the aforementioned permalink addition.

I've taken a gander at the new design in Firefox on Linux and in Internet Explorer 6, Opera 8.5 and Firefox on Windows. Not surprisingly, it actually looks the niftiest on Linux, but I think that has more to do with Redhat's native font handling than anything else. Of the Windows browsers, the new design seems to look the best in Opera 8.5. I'd love to hear how it looks in other browsers on other operating systems.

I've still got a few tricks up my sleeve when it comes to my blog, but most of the aesthetic changes are now complete. As always, I'm open to feedback and criticism so let me know what you think!


Yoel Roth on September 25, 2005 at 7:49 AM:

It grew on me pretty quickly, and now I'm rather fond of it. Good job, as usual.


Bernie Zimmermann on September 25, 2005 at 11:03 AM:

Yoel, coming from someone with a slick design like yours, that means a lot. Thanks for the feedback.


Ryan on September 25, 2005 at 12:34 PM:

Although I am a bit surprised that you chose to go the imagemap route, I guess
it is the only way to ensure that the header menu is exactly the size you specified. However, for accessibility's sake, I think you should add links to your header that replicate the image map. I just took a look at the site in links, a text-based browser for Linux, and this is what I saw:

Bernie Zimmermann (1/4)
Link: Atom Feed (alternate)

Recent Posts

* Bernzilla Redesign 2005: Submerged
* RSS By Any Other Name
* The State of the Browsersphere - Part 2: Opera

The problem of course is that the entire imagemap shows up as one [USEMAP] thingy. If in your <head>, you add links after <link rel="alternate" type="application/atom+xml" title="Atom Feed" rel="nofollow" href="/feed/atom.xml" />, like wordpress does for archives, like so:
<link rel='archives' title='September 2005' rel="nofollow" href='' />, then the site will be accessible to us occasional users of links, and maybe some other text-based browsers as well.

Apart from that, I love the new layout. The colors are great and the whole page
feels very clean and crisp indeed. I especially like the form inputs here with the shading at the top. Now all I need is a comment previewer - I have so much code and so many tags in this comment, and I have no idea if it will display properly. When I hit "Post Comments" below, I will be taking a giant leap of faith...


Bernie Zimmermann on September 25, 2005 at 1:06 PM:

Ryan, I'd say you did a pretty darn good job of flying in the dark with the code and tags in your comment. I think comment previewing is a great idea, and I'll try to work that in with some of the other changes I have in the pipeline.

As for the image map, reading that A List Apart article that I linked to kind of burst my bubble a bit, but I was so excited about the design that I put it up anyway. It will be very easy for me to replicate the header in CSS, so I'll be making that change before long. Hopefully no one will ever notice (except for those crazy types who still use Lynx).

Thanks a bunch for your feedback.


Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.


Email Address:



Check this box if you hate spam.