It's the little things that kill you. Most of the broad strokes of the Nuketown Redesign are done: I have template for pages, nodes, microcontent, and blocks, and the site renders under the new theme without any major errors. Since last month my work has focused on building out the nooks and cranies of the theme. It's stuff like block headers, the "read more" links, and sidebar bulleted lists.
In short, the little stuff ... and it's time consuming. Each component takes about two hours to knock out (though in the case of captions for images that's more like 8 hours ... and I'm still not done) as I tweak css and tweak template files. It is satisfying, in that each small piece that I complete brings its own sense of accomplishment but man, there are a lot of pieces.
I was distracted from my theming adventures by needing to re-jigger how Nuketown 7 handles Twitter updates but that landed in a good place.
One of my goals for the Nuketown 7 redesign project was to tightly integrate social media options into it. In particular I wanted to be able to capture all of that microcontent -- the quick movie and book reviews, the game news, the retweets -- that the site currently misses and incorporate it into the design. The key here isn't that I'm simply trying to post tweets about new articles; I want to make microcontent an integral part of the site.
To do that the tweets needed to be captured as nodes, which would then allow me to manipulate and display them however I see fit. I accomplished this by creating a "microcontent" content type and then setting up the Feeds module to import tweets from my NuketownSF account via RSS.
Naturally once I got this working Twitter deprecated RSS feeds. As of March 2013, you'll no longer be able to use them ... and Nuketown's microcontent import would cease to function.
Fortunately I have a Plan B: the Twitter module. When I started building out Nuketown7 I'd considered using this module, but it had two drawbacks:
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.