The frequency decoder undesign

The “undesign” overview

I was never happy with the previous incarnation of the frequency decoder website – It was something I had hastily cobbled together in the week before Jude’s birth and never reflected the clean and airy direction I had originally wanted to take.

With this version, I’ve tried to make the site as “un-design” as possible – gone are the restrictive article images (restrictive in the sense that I had to launch Photoshop and create an image for each and every post) and the overbearing green colour scheme to be replaced with clean whitespace and a simple two column layout.

Suprisingly, under the CSS hood, there’s actually not that many deviations from the old design. The left column has been shifted to the right and the drop shadows that used to break-up the page sections have been removed entirely. Additionally, the post headers and oblique single-line post leadin’s have been centered and their colours changed (in a respectful nod to the Grow Collective’s header styles).

I will state upfront though that I don’t intend to support any version of Internet Explorer that has a version number lower than 6. I could never get away with this in my professional life but as it’s a personal site, I’m not making any excuses. If you happen to be using IE5.x, please don’t take it personally.

The JavaScript goodies

It’s no secret that I like to tinker with JavaScript and the redesign gave me an opportunity to integrate a few bells and whistles for the browsers that currently matter. Here’s what’s already been dropped into the mix.

The favicons on the link list

Probably one of the easiest scripts to write but the one with the biggest visual impact. The script attempts to download the linked site’s favicon and add it as an old-school image before the link in question. Should the site favicon not exist within the site’s web root, a placeholder image is used instead.

The live comment preview

Most sites these days have a live comment preview but I’m quite happy with the dynamically generated gravatar created whenever the commenter enters their email address.

The inner-shadows on the Flickr images

Again, an extremely easy script to write. It adds a span to each of the flickr links which is then styled with CSS to display a subtle inner-shadow over the original flickr image. Internet Explorer doesn’t get the inner shadow treatment due to it’s reliance on the proprietary alpha image filter when using pngs.

The comment textarea resizer

A script that dynamically adds a resize arrow to the textarea used within the comment box. Opera seems to have problems with the resize action when the textarea is situated at the bottom of the page (as is the case with the commentbox) and so I’ve had to (temporarily?) drop Opera support for this script.

The “Save draft” button within the comment box

Almost every time I attempt to comment on someone else’s blog, I’m diverted by something more “worklike” half way through typing the comment.

This gave me the idea of creating a “Save draft” button that, when clicked, will save a draft of the current comment text as a cookie. Another little bit of JavaScript then automatically repopulates the comment textarea with the saved draft every time the visitor returns to the same page. Hey presto, you can now write half a comment and head off to do something else without losing the text you have just typed.

The “Quote” button within the comment box

Highlight any piece of onscreen text, click the “Quote” button and the text will be automatically added to your comment as a Textile formatted blockquote. Useful for quoting other people’s comments.

The deferred “gravatar” loading

A script that dynamically creates each commenters gravatar after the onload event has fired. This means that posts containing lots of visitor comments do not have to wait for each and every image request from the gravatar.com site to complete before the page becomes “active” i.e. useable. This is still under development so might be – erm – “quirky” until the bugs have been ironed out.

The Animated miniTabs

An animation effect for the site navigation. I’ve only just integrated this and am already getting bored of it so… it might just have to go.

It ain’t over till the fat lady sings

As with every redesign, there are a multitude of things to do just after the launch. Here’s a few of the more notable tweaks and inclusions that I need to complete:

• Create the “About” section template
• Actually write something coherent for the “About” section
• Write and integrate the “Live Search” feature
• Test the site in Safari and fully in IE6
• Review all of the old posts for formatting (not spelling) errors
• Write a script that dynamically creates gravatars after the onload event fires (to make posts containing lots of comments load a lot more quickly than is currently the case)
• Integrate the 3 column footer into the live design (which contains RSS info etc)
• Integrate the world map and dynamic visitor locator into the “About” section
• Style the archive and integrate the table sort script (thanks to SonSpring for the archive tutorial)
• Create a favicon for the site
• Create the 404 page
• Create a “scroll to top” icon that doesn’t suck
• Create gif equivalents for all png images used within the design (thanks Internet Explorer)
• Squish the bugs…