A Warm Gun 2.0

It’s been a long, hard road, but I’m very proud to present AWG 2.0. Not only is there a new design, but everything underneath has also been reworked. The site should now be more focused, easier to use (for you as well as for me), and just generally more polished. While the amount of time that elapsed in bringing you this was inordinate, I hope you’ll agree with me that it was worth it in the end.

It began as all things began

The year was 1995. I was in high school then. My second year, but my last before I started college. There was one class in particular which stood out among others, and that was my Multimedia Tech class, taught by a down-to-earth long-haired guy with a trimmed beard, perpetually garbed in an artist’s vest, named Olaf Buntrock. This was his second and last year teaching at Highline, but it was his idea to start this class to help give us kids a chance to learn about a bunch of emerging computer technologies, like video editing with Premiere, desktop publishing with PageMaker, application building with Director, photo editing with Photoshop, and vector drawing with Freehand, as well as providing us with a solid foundation of hardware know-how.

The class was in this old, converted office above the library. The only computers the school gave him was a couple Intel machines running Windows 3.1, and he brought in a bunch of his Macs from home to flesh out the class. System 7 had recently been released, and his main machine—the one we’d all fight over—was an old pizza-box Power Mac. (A 6100, if I recall correctly.) And indeed my love of Macs is all but solely because of Mr. Buntrock. But at the time I didn’t consider the implications of one of the other things he taught us; a simple, little language called HTML.

But it wasn’t until six years later that I would put that knowledge to use, when I built a small web site for an old music project. Because my knowledge was limited to pre-tables HTML, I read up on doing table-based design, and I can assure you that the resulting markup was just as atrocious as you’d imagine. Nevertheless, it provided me with my first taste of the Web as a design tool, and I found myself thirsting for more.

Loading the gun

This web site began as an experiment. In 2004 I decided that I wanted to do another web site, but one built using CSS for layout. The music site had long since withered away and died, and I found myself wanting to write more and more. I was working on a couple of scripts, and I thought that it would be a good idea to get into the habit of writing on a regular basis. So it was with those nebulous thoughts that work began on what would become a warm gun.

As I soaked up all the information I could on CSS-based design, I inevitably found my way to Jeffrey Zeldman’s excellent book, Designing With Web Standards. This book would come to have a tremendous impact on the site, not just in shaping the design and the underlying code, but also in introducing me to a slew of high-quality weblogs and showing me that blogging could be a legitimate and respectful endeavour, rather than the drivel I was used to seeing in places like LiveJournal.

The result, however, ended up looking like every other blog out there at the time. It’s was a fixed-width two-column design, with a header image on the top, navigational links in the side bar, and validation links and other indicia at the bottom. The columns were made using Faux Columns, and while a lot of thought went into the design, it felt uninspired. Flat. There was no vibrancy to it, and not enough colour contrast. (If you could really say there was any in the first place.) Resize-ability was poor (a problem which, honestly, plagues me still), and there was a lot of room for improvement with accessibility.

I remember the idea at the time being that the design should just get out of the way, and simply present the content as straight-forwardly as it could. To aid that, I used brightness and text size as a means of guiding the eye to the main content area. But the drawback to this was that everything else was de-emphasised. The navigation proved especially poor, being simply a list of links with descriptions only available in their respective title attributes. As I monitored my stats month after month, I became perpetually frustrated at the fact that nobody ever bothered to explore the site at all. Given the spotty quality of the navigation, however, it should have come as no surprise.

Underneath, the site began as nothing but a collection of flat index.html files, arranged in the directory structure you still see. (Thanks to this article on ALA.) As time went by, I began dabbling in PHP and began implementing a system of PHP includes to help make posting a bit easier. Slowly but steadily, I added features to the site, like comments with Gravatars, hand-rolled RSS feeds and a link blog. Modifying BlogKomm to fit in with my site provided me with my first real taste of PHP beyond simple includes, and it was as if a whole new world was opened up to me.

With the help of Tyler Kellen, I created a simple PHP content management system which made it so that, when I posted to the site, I only needed to create one file: the post itself. The rest was handled by includes and some really clever PHP at the top of the index page, and judicious use of mod_rewrite. And for a while, things were looking good.

Throwing the baby out with the bathwater

As posting to the site became more and more complex, I set out to create a Dashboard widget which would use scripts to automate all the hand-coding and other manual labour associated with posting to the site. This didn’t last long, however, and it would once again be Zeldman who would influence the inner workings of AWG when on 9 March Zeldman.com switched to WordPress. Knowing that he was a fellow hand-coder—and that he was able to shoehorn his existing site into WordPress—made it even more appealing.

You might be thinking to yourself “But what about all that effort he put into that PHP CMS? He’s just going to throw that away?” Well, yes; the code would just be thrown away (okay, I actually removed it from the server and archived it in a folder on my hard drive), but you have to remember that not only was AWG started to be my own virtual soapbox, but also to serve as my web workshop—a place to learn about all things Web via experimentation. And in that sense, the PHP CMS worked perfectly. I learned a great deal about PHP, and had I not had that experience I’m not sure that I would have been able to make the migration to WordPress. Customising WP to work the way I wanted it to work was a direct result of the knowledge I’d gained of PHP from that experiment, so by no means do I think that it was a waste to whip up that PHP CMS and then throw away the code.

Plus ça change

Having decided to migrate the site to WordPress, I started looking at what else needed improvement on the site. All the things that were wrong with the old design begun to stare me in the face. After mulling over the issue for awhile, I decided that a completely new design was in order. I figured it would be a good idea to do the redesign before switching to WP, which would ease the migration, and so I began work on the redesign first.

I felt that a redesign, coupled with the move to WP, would allow me to address many of the outstanding issues I’d been having with the site. WP, for example, would all but eliminate the pain of adding content to the site, which would allow me to concentrate more on writing without worrying about the pain that would be involved with posting new material. At the same time, a redesign would allow me the opportunity to more effectively present this new influx of content. Most importantly, however, it would provide focus to a site which desperately needed it.

Sketching things out

The first thing I wanted to work on was navigation. I broke everything down into primary navigation—which would take you to the main blog sections of the site—and secondary navigation for all the non-blog pages. I started taking my sketchbook with me everywhere I went and jotting ideas whenever I could.

For the first few iterations, I tried applying the aforementioned navigation split on what was essentially the same sort of generic layout of AWG 1, but I was unsatisfied with the results. I felt really closed-in with that kind of design, and I really wanted to break free. I decided that I wanted huge swaths of white space, and a right-aligned design.

I worked next on the logo. Pretty much from the start I’d had the basic idea of what I’d wanted. The word “a” was to be solid white and laid over a transparent circle (which isn’t really noticeable at all on a white background) and the letter “r” would be a gun (just like in the Sopranos logo) to match the favicon that’s been with the site since its launch and use it to reinforce a new branding scheme. The final version actually consists of three different fonts: Avant Garde Md Bt; Mobsters, for the “r”; and MammaGamma, because I just loved that lowercase “g”. I stitched them all together in Photoshop and, with a little colour applied, the new logo was born. I’ve now used it for the site, my résumé and a business card, so it’s pretty versatile and seems to work pretty well so far as a branding system.

Desire lines

There’s a term in landscape architecture called a “desire line”. These are the paths people wear in the grass when they cut across instead of walking along the sidewalks. Many landscape architects will wait and watch these trails develop, then pave the emerging walkways. With this in mind, I took a long hard look at my stats, taking note of how the site was being navigated by visitors. Several patterns emerged, while at the same time I discovered some key barriers that appeared to be keeping people from from getting to the pages they were trying to get to.

Improving usability was one of the main goals for the site revamp, and this data had a huge influence on the design of the site. Some usability enhancements were addressed with the move to WordPress—like the addition of the site-wide search at the top of the page—while others involved small but important changes in the site’s design. With the old design, for example, a link’s destination was indicated only in mouse-over “tooltips”, which are intended to be an auxiliary method of providing information. Now they display that information beside the link, so that no additional work is required by the user to know where a link goes.

This is an example of how much care was given to how information is presented in the new design. Both the primary and secondary navigation areas are actually marked up as definition lists so that each link would be a definition title and would have an accompanying description that would appear on the page alongside it. The CSS actually hides the description for the primary navigation, to allow for the tabbed interface, and so actually repeats each description in the mouse-over. This helps to visually differentiate the primary navigation from the secondary navigation, which use different visual models. However if you view the page with the design turned off, the two navigational sections meld into one and appear as a unified definition list.

Knowing that the majority of my visitors arrive via direct links to specific pages then leave without going anywhere else in the site, I took a cue from places like jasonsantamaria.com and stopdesign.com and added an “introduction” section to each page. The first part would be a general introduction to the web site, with additional meta-data added about the page in particular, when applicable. The second part would be a sort of “how to get around on the site” tour. This introduction section is written out in paragraph form, to aid comprehension.

These changes and additions, I hope, will encourage more people to “take off their shoes and stay awhile”, exploring the site and seeing what it has to offer in and of itself.

Drawing attention

One of the things I really concentrated on in the design was guiding the eye around the page. As I mentioned earlier, the previous design used brightness to achieve this, which left the design with insufficient contrast to draw the eye around the page. Because of this, most people probably got sucked right to the main content area, with their eyes never leaving that section of the page.

With the new design, contrast has been greatly increased, which alone helps guide the eye around the page to the various elements. The body text is quite a bit larger than both the menu text and the text in the introduction section, with the latter being larger than the former as another means of further differentiating the areas, and showing importance. The headers are now much larger than they were before, and show contrast within each section both through size and colour. Judicious use of margins and negative space help to increase readability, and made certain parts of the design stand out more. If I did it right, the design should pull your eye around the page in a weird sort of spiral pattern.

Icons were added not only to aid in identification and memorability with various interface elements, but also to help add a little more visual interest to an otherwise largely text-driven design. Sharp-eyed readers may notice that they are Dan Cederholm’s Stockholm Mini icons. I plan on changing them out at some point, probably to my own custom-made icons, but for now these should work.

The mouse-overs in the navigation should provide good amounts of feedback when using the site while still being sufficiently restrained, as well as make a simple but effective way for you to know where you are within the site.

A thousand words

I don’t remember exactly where the idea for the row of pawns came from, but its genesis was probably Scott McCloud. I was struck by this idea of a pawn out of line with a row of other pawns, making its own path. At the very bottom of the page is, personally, my favourite part of the design—the tipped-over king, which provides a nice visual “payoff” for scrolling all the way to the bottom.

Knowing that I would have to photograph this myself, I scoured stores both online and off for the right chess set. I wanted a glass chess set with the black pieces being flat black instead of just smoked like most other glass chess sets, and the white pieces would be clear. This was not as easy as it sounds, but I managed to find exactly what I was looking for online for around $15 including shipping. (In fact, shipping cost more than the set itself!) The white background was accomplished using a three- or four-metre-long piece of white construction paper hanging from a door jam. All in all, I’m quite proud of how well it turned out.

Arguing semantics

Additional care was taken with the source order. Since I knew that everything was going to be absolutely positioned anyway, I focused on how the page was laid out without any styling applied at all. This way, if someone were visiting this site in an alternative browser, they would have the easiest time getting around.

Going hand in hand with this was using even more semantic markup than before. “Sidebar”, for example, tells us nothing of what’s in a particular div. When the page is not styled, or when the div is moved somewhere else via positioning, “sidebar” loses all meaning. But “introduction” or “secondary navigation” make much more sense, and describe the content of the page without saying where they should be positioned. Likewise, information in a “footer” is often not at the “foot” of a page. “Indicia”, on the other hand, exactly describes what the row of validation and other links are.

To hell with bad browsers

Having worked with IE7 during its public beta, I felt confident that I could finally say “fuck you” to IE6. (It felt really good.) My stats show that the only versions of Internet Explorer that visit the site are IE 6 and 7, and knowing that IE7 would quickly supplant IE6 made me feel quite confident in this decision. To that end, I’ve put up a little notification only seen by IE6 users letting them know about IE7. Really, there’s no good reason not to upgrade, and thanks to its good enough standards support I’ve been able to implement a CSS-hack-free design.

Having decided that IE6 support was not really a priority, I decided to use nothing but PNGs, many of which were transparent, even though with the white background it wasn’t necessary to have them be transparent at all. It wasn’t really necessary to use them, but I wanted to make a bold statement by saying “they’re now safe enough to use exclusively”. Of course, this is only my personal site, and certainly not done for client work, so I’m allowed more leeway with this decision. Still, I think it’s important.

I did check the site in most browsers, though, and it seems to hold up well. The design should degrade quite gracefully if someone does view the site in an old, broken browser.

The Never-Ending Battle

There’s still a few little things I want to do with the design. The live preview on the comments could use a little work. I want to add a mobile style sheet, and replace the icons like I mentioned earlier. I’d like to add more 3D elements to the page to help give it more weight, and not appear so “flat”. At some point I’m going to start experimenting with other colours besides white for everything, maybe having it appear as though it’s ageing over time. That could be neat. Whatever happens, the basic design is going to remain for the foreseeable future.

Things are still going to be busy as I try to move to Canada, but I intend to publish more regularly, and even have a few multi-part posts. Overall, the writing should show more focus than it has before, and hopefully the quality of the writing will show some improvement over what has gone before.

Well, that’s pretty much it. Welcome to a warm gun! Now, why don’t you take your shoes off and relax? Have a look around—you might just find something you like.