Sunday, January 6, 2013

2013

Things were getting dusty with a faint hint of adaptive grid moldiness around here, so I finally took the plunge and retooled the design with the goal of moving to a fluid-grid responsive design focused on readability and large photo display.

We’re still coming to you live from Tumblr’s AWS servers, with static files served from my own S3 bucket. I toyed with the idea of moving over to Wordpress, but the cost-benefit analysis doesn’t add up for me. I love not having to maintain a server running MySQL, and Tumblr seems to have hit their stride on the uptime issues which have all but disappeared in the last year. No, I don’t have a copy of my blog’s data in a structured format, but I am backing up content to Dropbox via IFTTT in case of catastrophic data loss. Creating a new Tumblr theme from scratch was cake with Dave Santos’ Tumblr Boilerplate to establish a solid baseline of all the various content types.

The old layout was built on top of Dave Gamache’s great Skeleton grid and typography package. The new design abandons Skeleton in favor of a frankenstein monster of Bootstrap’s typography and mixins package and Zurb Foundation’s fluid grid. Bootstrap’s grid is solid, but the Zurb tool is slightly more robust with discrete mobile grid assignments and push/pull offsets. I opted to use LESS for preprocessing, which means the Foundation grid is included as pure CSS instead of the SASS component from the Foundation package. The LESS files are authored in Sublime Text and compiled with the LESS-build package before being shipped off to S3.

Body copy is set in Freight Text Pro and most everything else is Freight Sans Pro. Fonts are served by Typekit.

Visually, this is the most minimal design I’ve ever deployed on the site. Type-driven and stripped-down may be the flavor of the month, but I feel strongly that it’s the right toolkit for the mix of content the site has historically seen. Here’s hoping an uncluttered palette will be the catalyst for more and better content on the blog going forward.