Quickie redesign

What you’re looking at right now is a one-afternoon redesign. I’ve been running Twenty Eleven on this site for a while, and while I love it, you can’t really escape the fact that it’s pretty much everywhere. That’s what being the default theme gets you. And in the mean time, as I’ve been busy building other sites, I’ve been squirreling away a list of neat tricks that I’ve seen, or maybe even used in various places but never all in one place; not to mention a few ideas that I’ve been wanting to try out where I’m the only one who can get into trouble with it. It’s my tech blog and I’ll cry if I want to!

Toys:

  • Forge is incredibly cool, except for the parts of it I didn’t like. It’s a toolkit for bootstrapping theme development, and uses LESS or SASS (whichever you prefer. It switches automagically. It’s that kind of cool.), CoffeeScript, and all the new hotness. Better yet, it’s an amazeballs packaging tool: As you develop, you can watch (and optionally live reload) in multiple test environments, and package everything to a zip file when you’re done. As a test for both Forge and my own OCD, I packaged, uploaded, and activated on a live site while resisting the urge to zip, unzip, go back into the generated stylesheet to tweak by hand, run theme check three times over, etc. etc. etc. You’re looking at it. It worked.
  • Speaking of bootstrapping, of course, Bootstrap. I know I’m late to the game on this one, but it has some amazing stuff in it, and it took pretty minimal changes to make it look not totally like a Bootstrap site (but check out the nice glowy blue borders around any active form field. Huge Bootstrap giveaway!) Because learning twelve whole new systems in a day was a little too much even for me, I’ve been playing with this SASS port of Bootstrap. The original framework is written in LESS, which many people like, but for today, I wanted to use the way of writing mix-ins and variables and such that I already know. For what I was doing, it didn’t make much difference, or rather, I didn’t run into anything that I wasn’t able to do just the way it seemed like it should work.
  • Underscores (_s), which I’ve been using for all my new themes lately. My one big gripe with Forge was that it fires up a blank starter theme with templates I didn’t like; it turns out that you can dump whatever files you want into your working directory and get all the live-previewing and packaging goodness, so I just swapped in the ones I like instead. Easy-peasy. But if I keep combining these three (and I will), I’ll have to come up with some less kludgey ways of launching things just the way I like them.
  • Others: Google Webfonts. Subtle Patterns. C8H10N4O2

Inspirations:

  • Zeldman wrote a Design Manifesto the other day. Aside from the fact that, yes, he knows, his type is really really REALLY big, it’s got some great thoughts about designing for content and readers (not to mention about the importance playing around with your own site just for the hell of it).
  • Mark’s post on How I Built Have Baby, Need Stuff is really excellent: he goes far beyond playing with front-end goodies to some neat tricks beneath the surface, including some that I’d never even heard of. Plus, unlike me, he actually documents it all.

Miscellaneous notes:

  • Mobile views are passable but hardly awesome: on the iPhone, it’s squishing even narrower than it needs to be – but out of the box and with literally no attention to mobile browsers, it’s readable and looks like itself. I blame the tools. The Kindle Fire has a different set of issues: the whole sidebar is bumped to the bottom, which says “box model weirdness” to me. And I miss my goofy fonts. Still, again, better than a lot of sites out there, with no extra effort. The fact that it bothers me so much is a good sign of how much we really are moving to a default assumption that mobile will be used, a lot, on all sites.
  • I didn’t bother with an editor.css in this theme, and typing this post without matching styles is seriously bugging me. It’s another one of those WordPress things that seems like a small thing until you miss it.
  • I’ve been realizing lately how much I’ve come to dislike 960px fixed width designs even as I’ve continued to use them because they’re easy enough to drop into certain uses. Opening up to fluid, 1140, and percentage-based while still keeping an eye on readable measures, proportions, and plenty of leading and padding for breathing room? Plain old fun.
  • Most importantly, I’ve had it on my list to redesign my main site for, oh, months now. Sometimes, tossing something off as fast as possible is the best thing going.

4 thoughts on “Quickie redesign

  1. You should have the sidebar drop below the content (or disappear altogether) for widths thinner than iPad portrait. That’d help its display on phone screens.

    • Yeah, that’s exactly what I ended up doing – it’s always the few last-minute tweaks that take up the time on “small” projects, isn’t it?

Comments are closed.