Blog Post

Screenshots from development of the 2015 design of the 'Bred Crumbs blog

D-tails of a Relaunch

Trying to get this blog off the ground in the 2010s has been challenging. Most of that is simply finding the time to work on it. But motivation is elusive too, and repeatedly I’ve found that the design and organization of the blog don’t quite give me the juice I need to go forward, or the means to keep maintenance simple enough to let my time be used for thought and writing.

I’ve taken another crack at it, re-motivated by the opportunity to bring in techniques I’ve picked up in my professional life — particularly the notion of, for the first time in my personal blog-dom, using a development environment to really see what I was building instead of, as in the past, dismantling HTML prototypes into PHP chunks, moving them to the live server, and being prepared to make immediate fixes.

This post lays out how I went about it all and a lot of the tools and tips I used. As it happens, all the steps involved begin with “D.” Do with that what you will.

The plan involved embracing some counterintuition, such as using a Rails installation for a PHP site, and applying processes geared toward working on Macs to working on, gasp, Windows.

Step 1: Dev setup

Reasons

So I could more accurately enable the site design in WordPress without having to do it in production; and, so I could use SASS to generate the CSS. In the past, I would not have considered this step worth the trouble for a mere blog; finally, there are reasons, and clearer advantages.

Actions

The SASS and WordPress guide at Elegant Themes was a hugely valuable guide to getting not just SASS going, but the whole server setup, covering a lot of these steps (though I had to adjust around Mac specificities of the article):

Downloaded and installed MAMP for Windows — enables a local web server with Apache, PHP and MySql

Set up categories in WordPress — this helps me better bear in mind the intended goals of this revamp as I work out the design

Make a to-do checklist to track the dev project in Evernote — kind of a mini one-person JIRA

Step 2: Documentation (yes, now!)

Reasons

So I can get things down before I forget the details, so I can more easily do this again later; so I could maybe help others with it; and to provide a great first blog entry in the local WordPress to work with in designing, replete with lots of semantic structure.

Actions

I started this here blog entry, and updated it with each step as I proceeded.

Step 3: Design (and build — at once)

Reasons

Regarding visual design, I was happy with much of the blog’s previous look, so there was much I could easily bring forward with only slight adjustments. Most changes were needed to fit the new organizational goals, and to modernize the look a bit by making more of the white space truly white (for example, ditching a patterned-background sidebar) without making it look exactly like every other site. As I sometimes do, I thought all this could be better accomplished, for this project, by designing via code on the fly; no need to stop and Photoshop. That provided another reason to take the time for the local dev setup, which made design iteration simpler and more realistic. And of course, the coding needed wasn’t just about sincerely semantic HTML and lovely, tricksy SASS, but a fair amount of bending WordPress to my will.

Actions

Set resets — Compass reset leaves nearly no formatting standing (hey, you don’t really want your <strong> elements to be boldfaced, do you?, it seems to say), but if you prefer another brand of reset, that might suit you as a no-mixups starting place. I removed it in favor of normalize.css as provided by HTML5 Boilerplate.

Add a grid — if you’re using one. For this blog, I prefer to roll my own, but I am grabbing chunks of HTML5 Boilerplate as a solid starting place for cross-browser support, including jQuery, and the resets mentioned above.

Prep a framework for vertical rhythm — Vertical rhythm is too often overlooked or disregarded in web design, and the complexity of it (math made worse by the centering of font size against line height) doesn’t help. Turns out Compass has got your back. Trying to mix Compass vertical rhythm with responsive breakpoints complicates things, though it doesn’t have to be as head-hurty as posts on the topic make it seem. But it is a little much for this post, so my solution will have to wait until another time.

Plot content organization — one big goal that prompted me to redesign and rebuild this blog in hopes of actually using it was a change in organizing the would-be content: clearly delineating, highlighting, and even separating Interaction vs. Entertainment vs. Etc. I needed to pause and think out the ramifications of that, on the home page and the single-post level, before going further with design.

The fun stuff — the details of designing and building.

Step 4: Deployment

Reason

So that people could, um, see the redesigned blog.

Actions

Deploying the site via Git would be nice, but all the above is enough server and process setup for right now.

However, the fact that almost all the new code — PHP, HTML, and SASS — lived in one new WordPress theme made FTP’ing it to my servers far simpler than such efforts have been in the past. Then came some readjustments of categories (and, I admit, some HTML within posts) in WordPress below flipping the switch on the new theme.

For post-launch fixes and improvements, the Git log of changes for each commit provides a handy list of which files have been updated and need to be moved to production.

Out of scope

(Being out of scope, “Out of scope” does not begin with “D.”)

Deploying the site with Git.

Optimizing web fonts for mobile: Of course, now that we finally achieved our wondrous solution for pretty typefaces, we find out it’s not so pretty for mobile bandwidth. Cannot deal right now, but when it’s time, Chris Coyier provides a good starting point for font-loading options.