Nuketown now has a Facebook page: http://www.facebook.com/nuketownsf. The goal of this page is two-fold: promote Nuketown, and figure out how to use Facebook pages. As I discussed previously, although I've been using social media for years and have 975 followers on my NukeHavoc account, Nuketown was sadly unrepresented.

This created problems with my day job as the goal becomes marketing the college via social media, rather than networking as an individual. I don't have a lot of experience with tracking social media analytics or setting up a write-once, publish-multiple times mechanic. Getting this setup -- first one Twitter, now on Facebook -- is an essential part of the redesign.

It's amazing what a little free time can do. Back in Autumn 2011 I worked hard to come up with wireframes, design comps, and an HTML build out of the new Nuketown. It was built on HTML5 and CSS3 and it was all going swimmingly ... until I looked at it in Internet Explorer 9.

The entire design fell apart. IE9, which I thought had better standards support than its predecessors, simply didn't understand HTML5 elements like "nav" or "figure". It refused to style them, and without the formatting, the design collapsed. About the same time work got nuts, and most of my free time was devoured by work projects. I probably could have pressed ahead with Nuketown, but truth be told I just didn't have the energy to fight the good fight.

Flashforward a few months. My big projects are complete, and I finally found some time to figure out what the hell was going so wrong with IE9. An hour of searching and experimentation revealed the answer: IE9 mode.

You see, Internet Explorer has a long history of "modes" -- ways of operating that supported (or broke) certain standards. It was quirky to say the least, and I'd forgotten about it. By default, Internet Explorer 9 operates in compatibility mode, which apparently means it tries to display everything as a sucky old browser would, while choking on the latest HTML5 standards.

It's been mighty quiet around here at Nuketown, partly because I've been super busy at work, but mostly because I've been slowly working on the redesign.

My current task is converting the design comps into an HTML/CSS compliant layout. After that, I'll turn those pages into a functional Drupal 7 theme. The challenge has been that going with what I know, I decided to do the entire site in HTML5 and CSS3 ... which means I'm spending a lot of time learning exactly how much I don't know.

It's not that HTML5 and CSS3 are earth-shatteringly different -- a lot of the key concepts (at least with a simple web page) are the same. The challenge comes with HTML5's new semantic markup. These are tags like "header", "footer", "article", "section" and "aside" which are designed to give meaning to your markup.

The idea is that instead of just having a whole punch of div tags with IDs like "header" and "footer", you use actual tags that let your web browser understand that this content is different. This in turn can be helpful for search engines, which know which areas of the site are content rich, as well as for accessibility, as accessible browsers are able to recognize headers, navigation, etc. and present them accordingly.

It took me a longer than I like, but I've finally worked up design comps for the Nuketown. These designs throw flesh on to the skeleton of the wireframes. There are some divergences; the original home page wireframe had a section for dedicated specifically to projects; I've removed that from the current iteration because it didn't really fit as well as I built out the design. I'll likely add a "projects" tab to the final design to replace it.

Now that these are done, I'm going to start working on the HTML build outs, and once those are done, I'll be able to the real meat of the project: creating the Drupal 7 theme and converting the entire site to D7.

I love wireframing. It's like playing with LEGOs -- you can build anything, hate it, tear it down, and then start all over again at a moment's notice. The idea's simple enough -- create the barebones design for your web site, focusing on the user interface without getting bogged down in graphics, colors and arguments over whether the hyperlinks should be underlined or not.

Attached as PDFs to this post are my initial tier one and tier three "evolutionary" wireframes for the Nuketown redesign. These aren't a radical change from what we have now, but they accomplish a number of my design goals, including integrating microcontent into the home page, creating some new advertising options the (the skyscraper ad on the home page, the box add on the tier 3 page), a place to show case projects/features, and columns for exposing content like top rated stories and comments. It also gets rid of the login forms in favor of a login link in the primary nav (the sidebar login is something I hate in the current design) and cleans up the layout.

It's been pretty quiet around Nuketown for the last few weeks, but it's not because I haven't been working. It's just that I have been working, but haven't had much I could talk about yet. The big thing I've been working on is a scope document for Nuketown's redesign.

The idea behind the scope document is to nail down exactly what it is I'm doing as part of the redesign. It's not meant to be a soap-to-nuts document -- I have to sleep some time -- but I wanted to summarize my objectives, create some solid tasks to accomplish them, and then identify goals to see whether or not my plan worked.

It was worth the time it took to write it up -- as I was working on the IA and analytics, I realized that I'd gone to far in thinking about how I would do what I wanted, with out identifying what it was I wanted to do. It's an easy trap to fall into when you're working on a hobby project like this, but it ends up costing you dearly when you get halfway through the project and realize it's a muddled mess. I don't have a lot of free time -- and I seem to have less and less of it as life goes on -- so I can't afford to make those kinds of mistakes.

Nuketown's information architecture has taken on several different forms over the years. At one point there where two major buckets: News and Features. This then evolved into the current, broader buckets that break out the old News section by media: Books (Bookshelf), Games (Game Room), Hoaxes (Hoax Central), Links (Link Port), Music and Audio (Music Hall), TV and Movies (Theatre) and Podcasts.

Cutsy names aside, from my perspective the problem with this structure hasn't been the top level links, but rather the secondary ones. Each section has subcategories, such as reviews and columns. The major sections have sidebar navigation elements that exposes the subcategories, but they are buried in the sidebar, and not readily apparent. They're also not comprehensive, exposing only the first tier of subcategories: there's no easy way to get to finer-grained categories like "Savage Worlds"-related posts.

As I mentioned in yesterday's post when I look at the the existing sitemap, another problem I see is that its hard to tell what's a column, and what's not. There are no buckets for columns, and at a glance its not easy to see that "Off the Bookshelf", "Game Day" and "The Libertarian Gamer" are columns. Adding a parent taxonomy might help.

With analytics in hand, I've conducted an inventory of Nuketown's content. Below is a list (as of 7/13/2011) of the categories that comprise Nuketown, and their corresponding post counts.

It's an interesting report. I expected that the "Games" section would have the most posts, but that honor goes to the "Blog" section with 907 posts. I expect this is a legacy of the early Aughts and my frequent rages against the Republicrat political machine, coupled with numerous Geek Dad updates as my fury gave way to wonder and exhaustion as my kids were born.

It's been five years since Nuketown's last redesign. The imputus then was to experiment with this nifty new open source content management system I'd heard about: Drupal. I converted Nuketown from the homegrown CMS I'd written, created a Drupal theme, and then had fun experimenting with views, content types and way too many modules.

Five year later it's time for another Drupal upgrade: Drupal 7. Unlike the last few Drupal upgrades, Drupal 7 changes a lot of things under the hood, including the theme. Rebuilding the current Nuketown theme -- which has sabertooth-like incisors -- seems like a waste of time ... why not take the opportunity to do something new?

Thus, the redesign. A lot has changed in the last five years and as I re-work Nuketown, I want to acknowledge those changes and incorporate them into the design. A good example is social media and the microcontent associated with it. In 2006, Facebook was still largely a college phenomenon and Twitter had just launched. Five years later I've made 14,339 tweets, much of which might have been a blog post in an earlier age, almost all of which isn't captured on Nuketown in anyway.

I'm in the progress of updating Nuketown's Mac Role-Playing Game Tools page, which has developed an embarassing case of bitrot.

Unfortunately some of the more stalwart tools, like Crystal Ball, as well as one-offs like the Town Creator and D&D Manager, are no longer available, and their sites have gone to the Great Bit Bucket in the Sky. Still others, like Dunjinni, no longer work with under Mac OS Lion and don't seem likely to be updated any time soon.

As such, there's aren't a whole lot of tools featured on the page that are actually still working. And yet, I know from researching my "Summon Web Scryer" columns for Knights of the Dinner Table that Mac compatible tools do still exist. Many of these are Java based apps that are platform indepenent, which may make them even more appealing to gamers who want to share their creations with other players.

Know of a Mac-centric app that deserves promotion? Post it as a comment below, and I'll add it to the features page as I rebuild it.