Noscope

Presenting Fauna

September 2nd, 2004 by Joen fauna, personal, redesign

Fauna, is the brand new name for this Noscope design.

“A living organism characterized by voluntary movement” – Definition

I felt the design needed a name. I’ve worked on it for so long that it deserves the value a name adds. Furthermore, naming the design makes it easier to refer to.

It has been named “Fauna” for several reasons. First of all, it is not a redesign, it is an adjustment to an existing design; since the beginnings of this design some year ago, it’s been changing over and over again. Thus, it can be referred to as a living organism voluntarily moving forward, just like the definition of Fauna states.

Secondly, the soft warm gray color tone reminds me more of animal life than of, for instance, plant life.

The third reason for the name has to do with future proofing the site. I will, eventually, redesign this website, but due to the form and function of at least the journal aspects of the website, the layout and usability won’t change drastically. Thus, a redesign shouldn’t have to be more than replacing the current stylesheet. If this actually happens to be the case, that would mean I can keep Fauna in a stylesheet switcher, and let the user choose. This brings me to some of the changes that have happened…

Changes

• New logo

The Noscope logo has been redesigned. The “no” shape used to be in a circle, and I never really settled on a font or case for the logotype. Thus, this logo represents a “settled” logo. This is how it looks! I’ve finally made up my mind.

• Cleaner header graphic
  Since adding a Journal section, I’ve been wanting to sow it together with my Installment section. A header graphic featuring images from the installments archives was a logical choice, but the first iteration of this header graphic suffered from bad usability, cluttered graphics and too much distance to the rest of the design.

  This new header graphic, I feel, connects much better with the rest of the design, and the revamped “prev. image / next image” buttons are much more usable (albeit not perfect). Still to come: an option to view the installment currently selected.

• Space!

The header graphic has been detached from the top of the browser, thus suddenly lightening the whole experience. Where the old design was tight and cramped, the new design adds air and freedom.

• New navigation

The navigation on the old version used to be left aligned, placed in the sidebar. It didn’t work well there, because navigation should be in the top-left corner (at least for non-Arabic speaking nations). This has been resolved by making the navigation horizontal, and top aligned.

• Background graphic
  A soft shadowed line has been added to the background. It is designed in the same way as the drop shadows on the rest of the website, as such it fits right in.

  Sadly, almost all blogs today looks the same—they’ve got a sidebar, some main content, and it’s all vertically oriented. While Noscope is no different, the new background graphic adds a little bit of horizontal orientation to the website, breaking some of the vertical movement.

• Subtle changes to the sidebar

Highly inspired by how Jason Kottke does it, for some sections of the site (such as the colophon, or the archives), I now present humanly readable information about what page you are looking at—right at the top.

• Search box placement

Because Jakob Nielsen says it’s best that way, I have moved the search box to the top right corner of the page. It’s smaller, less cluttered, and right where it usually is.

• The vertical scrollbar is now forcefully enabled

With the help from Jon Hicks excellent article “Forcing Scrollbars”, I have now implemented the technique on this site. The main purpose of always having the vertical scrollbar enabled, is to prevent the 18-something-pixel jog that happens when going from a page without scrollbars to a page with scrollbars.

• Firefox users get special treatment
  All users of the excellent browser Mozilla Firefox, get a special—albeit geeky—feature. Namely the ability to switch stylesheets on the fly. Yes, try looking at the bottom left corner, there should be a small palette graphic. Click it, and you can choose between “Basic” and “Fauna” stylesheets. Currently, “Basic” contains nothing, so you can see how the site markup looks without the CSS.

This also serves as a personal development tool for me, since the markup still needs some work.

Remaining Problems

While I feel the design is nearly there, there are still a few things I need to do.

First of all, navigating permanent link locations (unless you’re looking at this page in category view, you should be at such a location right now), there are “previous post | home | next post” navigation links at the top of the page. The problem is the “home” link, which links to the journal index. Only, “home” usually links to the website front page, which in this case would mean the index page. It can probably be solved by a simple rename, but I have no idea what to call it. Suggestions are welcome.

As mentioned earlier, the markup still needs work. As you can see, there are still a few “align” and “style” tags in the markup, and these have to go. Furthermore, all navigation and lists should use UL and LI tags, positioned using CSS.

Afterthoughts

I am really happy about this version 3.5 of the site. Adding air certainly lightened the whole thing, and I feel I can finally move on to other projects. This is good, because I have a few that are long overdue.

With that said, one should never underestimate the power of “not doing what you’re supposed to”, because this very design adjustment was made during my September Installment sessions. I’m sure you know the feeling—you should be working, instead you clean the house, do the laundry, the dishes, etc. Well the point is, sometimes skipping work is good…