Layer Cake: A Responsive Design Layout Pattern

There is a design pattern that I’ve noticed emerge on a lot of the responsive projects that I’ve worked on in the last few years. They have all tended to gravitate towards a particular kind of layout. There are a lot of situations where this pattern is helpful, so I wanted to write a bit about it.

I call it “The Layer Cake” – it’s a way to approach page layout in a responsive design. You can also call it ‘tiered’ layout – but, mmmmm – cake. This differs from a regular ‘multi column’ layout in that there is no all-encompassing container, or long running sidebars. There can be multiple columns within a layer, though.

A 2 Column Layout vs. a Layer Cake

Read MoreLeave a comment

Creativity is yet to come in Web Design


The above talk was given by Andy Clarke last November, lamenting the lack of “soul” and creativity in Web Design. He argues that the industry’s fixation on process and execution has left little room for great ideas.

Read MoreLeave a comment

Front End Testing with Wraith: A Step by Step Recipe

I had occasion to finally get to one of my goals from last year – and that was to introduce some testing to my front end development.

My goal was to have a way to have a before/after visual regression test. The open source Wraith project, from the BBC, fits the bill wonderfully.

This post is merely meant to be a step-by-step procedure to get Wraith up and running. I’m not going to provide any context to what each step means.

First off, this post assumes that you’re running Mac OS X, and already have Ruby installed. This post also assumes that you want to use the “history” mode in Wraith – where you are taking two snapshots of the same URL. (The “standard” mode requires two different URLs).

Read More2 Comments