Nuketown's redesign project has slowly crept forward for the last year, but it saw a nice surge in progress this summer. First off, I have a solid Drupal 7 foundation for the site, with all of my social media, audio and visual, and content tools chosen and functional. I've also learned a heck of a lot about drush -- Drupal's command line tool -- and that's helped considerably with quickly iterating through build outs.
I was on the road last week, missing my family terribly and looking forward to getting back home. Oh sure, I had a blast on my trip -- I got to hang out with higher education friends as part of Moodle Hack/Doc Fest at Kalamazoo College, I saw two baseball games, and got to watch prices rise and fall at the Kalamazoo Beer Exchange -- but I was looking forward to coming home the whole time.
Summer is here and that means it's time to get serious about a new routine. Oh it's not quite summer -- the calendar says that begins on June 20, and my kids are still in school -- but the college's spring semester ended a week ago and The Avengers proved that the first big summer movie is here.
The big thing is getting back to the gym. Longtime readers know this refrain: get back to the gym, get back into a routine, and keep it for as long as possible before something derails it. I've been particularly bad about getting the gym over the last year -- too much work, too little sleep, too many excuses.
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.
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.