Updated Look For The Dot Com

As a designer, I quickly fall into the trap of thinking my site looks tired. Unfortunately, I’ve written about this before (and before that) but both my personal site and course sites serve as spaces for experimentation as much as anything else.

Recent projects have had me focusing on designing small, nimble sites that run on very little. This is a bit more difficult on this space due to the nature of WordPress and its love of database calls, so my personal site has been the last space to get a refresh. Historically, I’ve done this about once a year, and the last iteration involved a premium theme called Readme, which is absolutely gorgeous but a bit too bulky for my current taste.

A WordPress hero of mine is Anders Noren who has designed more than his fair share of high quality WordPress themes that he has freely given away. Really, I don’t know how he does it. I try to follow what he’s doing closely though it seems like he’s now employed at a place where free themes are no longer the lion’s share of work. In June, he quietly put out there that he had built a starter theme, a lightweight theme for developers to build on top of. One of the things I always compliment WordPress on is it’s ability to be both simple and complex depending on the user’s desire. For example, when it comes to theme-ing a site, a developer can write all kinds of custom PHP pages that the platform will automatically recognize based off of its naming scheme. These include 404 pages, author pages, archive pages, category pages, front pages, etc. But if none of these exist, WordPress will default to the styling of index.php. As simple or as complicated as you want to make it, do so. This is called the WordPress hierarchy and wphierarchy.com is a great reference for how this works.

Anders latest theme is just that: one little index.php with a couple of necessary functional pages (comments, functions). And that’s it! If you want more, you gotta write it. My last theme had SIXTY different page options and SEVEN different CSS files (they broke up various screen resolutions into different stylesheets). This means for someone who likes to really fine tune and customize the look and feel of their site, there’s a lot of headache spent tracking down the appropriate page or stylesheet to make minimal changes. A premium theme can seem great for the amount of options that developers build in, but they can also be unbearably overwhelming.

So needless to say I’ve been ready to take the opposite approach. Rather than using a little slice of a big powerful theme, I’m now starting with a tiny theme and building up.

When Anders mentioned that he was going to release a 38kb theme file, I was more than intrigued, but I had heard very little since June. THEN a couple weeks ago he added to the end of a different blog post that the theme is still working it’s way through WordPress.org theme repository compliance but that he had gotten it close to their taste even though it was still a couple of months away (which gives me insight into why we don’t see new themes too often–what a nightmare of a process this must be). But, being the nice guy that he is, he went ahead and quietly dropped in a downloadable zip file of it in its current state.

So I started playing around on it. Because there’s only an index page, this means there is no way to distinguish the look and feel of the front page and a single post. I started first by writing a single.php that would serve single posts. Next, I actually cut out a lot of the index.php by swaping out the full post blog for a small excerpt of the post so you could find posts quicker, and then I added some styling to give the posts themselves a card effect.

Last, I added a header. I’ve always been a fan of Audrey Watters sites and, thanks to the fact that her sites are hosted on Github, I was able to see the code necessary to create the social media icons row (yay open source), so, yes, that part is completely ripped off and it’s a good thing. The icons are a free set called Font Awesome, which I was able to easily integrate into the theme (I ended up adding a couple extra icons in the cards themselves as well).

All in all, I’m really happy with this one. If the last theme gave me a year, this one should do so as well. In fact, several of the things I enjoyed about the last one including color scheme, fonts, and overall aesthetic are still here. This is actually my favorite part; the identity didn’t change much, it just got a reboot. Gone are the file-size heavy, full-width featured images, shadow animations, and all the things that make it a really nice desktop experience. In exchange, I get a simple mobile-friendly (dare I say mobile-first?) approach to the blog that still looks top notch. AND, since it still hasn’t been publicly released, I guess I’m guaranteed to not see it being used everywhere for at least two more months 🙂