This Is An Updated Website.

I rolled out the last redesign of this website was way back in 2009, when kids still respected their elders and we had to walk 15 miles uphill both ways to get to school.

I finally had a couple days to squeeze in a redesign, so I went for it. Here’s the before and after:

Baby Steps

As you can see, not too much has majorly changed. That’s intentional. I’ve spent my entire career on Big Fucking Redesigns. Knock down the crusty old website, put up a new shiny website in its place. Nary a thought is given to the site’s legacy or what users are familiar with. It wasn’t until An Event Apart DC that I heard Jared Spool articulate what’s been in my head for a long while. People enjoy a sense of familiarity. If you were to go to someone’s house and rearrange all their furniture while they were sleeping, chances are they’d wake up pissed off and disoriented (for a number or reasons given the example). Because of this, I wanted to make sure the redesign was more a natural evolution of the existing design.

Doubling Down on WordPress

After several conversations with James King and Scott Jenson regarding self-hosting versus publishing on a 3rd party, I’ve solidified my belief that the only reliable way to keep control of my content is to self-host. I’m through being a sharecropper on sites like Google+, which give me so so little in return. I’d rather build more gravity around my own planet.

Another part of me was tempted to go the route many others have recently taken, which is to build a flat file system using tools like Octopress or Jekyll instead of a full-blown CMS. The promise of writing everything in Markdown and not having to worry about databases was certainly tempting, but my gut told me that I’d run into limitations pretty quickly. I have big plans for the site moving forward that require the infrastructure to be as flexible and dynamic as possible.

Design

You may have noticed the gratuitously large type at the top of the screen. People who actually know what they’re doing with type will probably hate this, but I don’t really care. It’s big and obnoxious and fun, so naturally I like it.

Navigation

The site on small screens utilizes the toggle pattern, which slides down the navigation from the top. The navigation is also repeated in the footer, creating a site sandwich where the navigation is the bun and the delicious content is the meat. I had a conversation with Luke Wroblewski about why I didn’t just use the footer anchor pattern, and my reasoning is that I feel an abrupt jump to the footer can be disorienting to people. I prefer to keep them in their place on the page instead.

To implement the toggle, I utilized the CSS-only toggle highlighted by Aaron Gustafson in Build a smart mobile navigation without hacks. It’s a super clever technique that uses the :target pseudo-selector to toggle the navigation. One unfortunate problem with it however is that Opera Mini doesn’t update the URL with the anchor tag, so the navigation doesn’t trigger. That’s a bummer, but the super smart Tim Kadlec was able to find a way around it. I still need to solve it on my end, but it’s good to know that there are ways of making it work.

On larger screens the navigation fixes itself to the footer of the site. I’m normally not a fan of fixed positioned elements, but a relatively narrow band at the bottom of the screen didn’t seem too invasive. And coincidentally, Luke published Responsive Navigation: Optimizing for Touch Across Devices that says that a fixed footer is actually good placement for navigation on all these emerging large screen touch devices. I could say “Oh yeah of course that’s what I was going for the whole time”, but I’d be lying. It’s purely coincidence, but it’s good to know that the placement isn’t totally crazy.

Performance

I’ve been recently talking about performance as design, so keeping the site lightweight certainly influenced my design decisions. This design has two background images. The homepage weighs 29.87KB. The goal was to get away with doing as little as possible. If I need to add more later, I can. I still have a lot of performance-related tasks I still need to do, but it’s off to a decent start.

Development

This was my first site really going to town with Sass. I made ample use of nested media queries, which helped keep me in one place instead of sifting through a style sheet figuring out where I defined what. I also just got Coda 2, which adds nice syntax highlighting, autocomplete for Sass variables and other really nice stuff. I also started using Sparkbox’s Scss Rem Mixin Now With a Better Fallback in order to use rems but still fall back to relative units if rems aren’t supported.

I also used this site as an opportunity to restructure my CSS. I really enjoy Harry Robert’s CSS Guidelines and tried to do a better job documenting my CSS. It proved to be tremendously beneficial.

Oh, and Javascript on the site? There is none. That will probably change, but I think that’s pretty crazy.

Onwards

This is just the beginning. I’ve got a lot of work to do to get things where I want them to be, but I feel I have a simple, solid foundation that I can build upon. And that’s probably the biggest advice I can give. Start small and chip away at things when you get a little time. Don’t feel you need to bite off everything at once.