When I saw the third issue of Fray Magazine I was impressed and fascinated. When you resize the window to the site, the layout actively changes to properly make use of the space. I had no idea anything like this was possible, but I knew that I needed to find a project where I could use this.
It’s called Responsive Design, and there’s been considerable buzz about it lately. It involves overlapping boxes, which move underneath each other when there’s not enough room for them. It not only allows for different layouts without having to reload the page, but images and fonts dynamically resize. It’s a one-size fits design method.
My personal blog had been starting to outgrow the Posterous account it was hosted on, so I decided this would be the right opportunity to try this out.
The first step was mocking up a design. I started with a 960.gs grid.
And came up with a rough mockup.
Added a logo and tweaked.
Then expanded on the idea and started provisioning for content.
Next up was the search for a template to base it on. There is no shortage of options searching for a “responsive design” WordPress theme. I tested and configured my blog using three different templates: Skeleton, Reaction, and Infinity.
WordPress Skeleton seemed the simplest and cleanest. It’s based on the Skeleton Boilerplate It had the least number of options, but it was very responsive, and it was very well commented and documented. It is based off a 16-column 960.gs layout, but by default it divides pages into three columns.
Reaction uses what they call Super Skeleton. It also uses 960.gs, and it has more control over layout. It came with a lot of options, including an amazing dynamic portfolio. Something about it felt too sluggish for me. It felt like it was slowing down my whole system whenever a page using that template was loaded. I tried eliminating features to see if I could find the source of the problem, but it seemed to be a lost cause.
Infinity was very nice to work with. It worked great on the iPad, it was fairly responsive, and also had a nice portfolio. The layout was a little too far removed from what I had in mind, and I didn’t want to have to de-engineer the whole template only to have to start from scratch again.
I decided to go with the original Skeleton template. Using the built-in hooks, I was able to rebuild, or integrate some features from the other templates I had tried out too. The separate Projects section, the menu system, and the contact section were all pieced together into the original.
The end result is what you see here. Stay tuned for future updates.