Raise the Hammer
Raise the Hammer has a new look, streamlining the main menu and giving the Hammerblog and Word on the Street their own space.
By Ryan McGreal
Published April 21, 2006
Raise the Hammer has a new look! We added a second menu bar on the right side of the content area, featuring the next scheduled Word on the Street event and the four most recent Hammerblog entries. (WOTS and the Hammerblog are updated on an ongoing basis between issues.) We also made the Search box more prominent and moved it to the top right corner.
That has allowed us to streamline the menu bar on the left, getting rid of several links that competed for the reader's attention and moving the actual contents for each issue closer to the top.
We also rebuilt the 'engine' that runs the website in the background so that it is powerful enough to handle our steadily growing readership. With a more robust, more stable back-end, we can continue to add features and improve the interaction between the site and its readers.
Thank you, dear readers, for supporting us over the past year and a half. Without readers willing to share suggestions, contribute ideas and articles, give us valuable feedback, and above all read Raise the Hammer, there would be no point in doing it at all.
We're pretty sure there will be some unexpected bugs during the first week or so. If you run into any problems or notice areas where we can improve the design, please let us know so that we can iron out the kinks more quickly.
If you're familiar with web design, you may want to read on. Otherwise, trust me - you're not missing anything important or even particularly interesting. :)
Like a city, the Raise the Hammer website started small and grew by gradual accretion over the past year and a half as we expanded our focus and added features. One result is that the underlying code base has gradually become a Winchester Mystery House, full of redundant passages and corridors that lead nowhere.
Quirks and redundancies might make for a charming and serendipitous urban experience, but an increasingly exasperating programming experience, so we decided to take the plunge and rationalize the code base. (Warning: this is another way that the programming and urban development analogies break down: rationalizing a city environment leads inexorably to abominations like the Meadowlands Power Centre.)
We also finally got around to some usability testing, which demonstrated that many users simply aren't aware of the Word on the Street (WOTS) and the Hammerblog. Mainly this was because readers just glossed over the forest of links in the left menu bar - clearly an opportunity for us to give these sections their own space on the page without crowding out other important items.
The final straw was notification from our web service provider that we were exceeding our bandwidth limits and needed to move up to a more expansive plan (too many readers: that's my kind of problem!). Our new plan includes a proper MySQL server instead of the crappy MS Access database we could get away with when we had twelve readers a day.
We took advantage of the opportunity to redesign the site from the inside out, replacing the mishmash of procedural code with compact classes that can be called, assigned a few optional properties, and reused throughout the site.
ASP with VBScript is not as friendly a language for creating classes as, say Ruby, but once you take the time to build them, it's a lot easier to create pages with a few objects than replicating big chunks of code and remembering to make changes all over the place. (This is called the DRY Principle of programming: Don't Repeat Yourself, as contrasted with the DRY Principle of public discussion: Do Repeat Yourself.)
While the underlying code is now much simpler and more compact, the layout readers see isn't much different. We've added a second menu bar to the right of the main content area and filled it with the next scheduled WOTS event and the four most recent blog entries. That's allowed us to simplify the menu bar on the left, bringing the contents closer to the top.
We've also separated the three web design layers - structure, layout, and behaviour - entirely. There's no more inline JavaScript and no presentational HTML. In fact, we were pleased to discover that the jump to DOM scripting was the easiest part of the redesign.
This approach to scripting, often called "unobtrusive JavaScript", makes it easy to add behavious to page events and degrades peacefully on non-supporting browsers. Instead of messy, flickery DHTML hacks, DOM scripting writes and re-writes HTML on the fly, giving web applications a more desktopy feel.
As a further step, we've begun to future-proof our URLs. Instead of http://www.raisethehammer.org/index.asp?id=300, which exposes the programming language (ASP) that runs the site, you can now browse to http://www.raisethehammer.org/article/300/, which is simpler and will still work if we eventually port the site to a different programming language.
Of course, we ran into the inexorable snags along the way. The site was down for much of Wednesday as we ironed out a seemingly endless list of bugs. Also, when we migrated the article comments over to the new database, we managed to lose most of the posted dates and most of the line breaks. (If you knew what we had to go through to move them over, you would understand why we're willing to live with that.)
If there's one lesson I can draw from the experience, it's this: when you start out, don't lose any sleep over potential scaling issues. If we had waited until we could build a juggernaut of enterprise-class code, the site simply would not exist.
An iterative approach to development works just fine as traffic grows over time. By the time you need to make the leap to a more powerful engine, chances are you'll have the resources to do it properly.
By adrian (registered) | Posted April 22, 2006 at 00:40:27
Looking good Ryan. Great, in fact.
You must be logged in to comment.
There are no upcoming events right now.
Why not post one?