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

Counting Blocks in Drupal

We had a situation where we had a region of blocks, but the number of those blocks could fluctuate. This was based on how much content the client wanted to feature in the region.

This posed a problem when it came to the layout CSS – using traditional floats, we need to know how many things we have that we’re trying to lay out. This lets us know how wide to set the child elements. Flexbox would have solved a lot of this, but alas.

So we needed some way to know how many blocks would be present in a region, even if that number changed. We could adjust the CSS accordingly.

It turned out to be a really simple preprocess function:

function THEMENAME_preprocess_region(&$vars) {
		$block_number = count($vars['elements']) - 5;
 		$vars['classes_array'][''] = 'block-count--' . $block_number;
	}

This function needs to go in your theme’s template.php file, and be sure to change ‘THEMENAME’ to whatever your theme is, well, named.

What is that ‘5’ all about? In Drupal, a region contains a number of arrays, and the blocks show up in the ‘elements’ array. That array lists all of the blocks, plus 5 other properties of the region. So we count the number of items in the elements array, subtract by 5, and that is the number of blocks we have.

This will attach a class to the region parent that indicates the number of blocks, e.g. ‘block-count–4’ or ‘block-count–2’.

This works on any region that has a <div> wrapped around its output. So, the $content region usually won’t get this class. Most other regions should.

With that, you can do things like this in your CSS:

.block {
	float: left;
}
.block-count--2 .block {
	width: 50%;
}
.block-count--3 .block {
	width: 33%;
}
.block-count--4 .block {
	width: 25%;
}

I hope you find this helpful!

Read MoreLeave a comment

Book Review: Ordering Disorder – Grid Principles for Web Design

I pre-ordered Ordering Disorder: Grid Principles for Web Design by Khoi Vinh as soon as I heard about it being published. Vinh is a designer that I admire a great deal, and knew he was as good of an expert on web layout as anyone out there.

Overall, it is a great book on a subject that, while popular in the web design blogosphere, has not had much physically published about it. There are a plethora of books on grids in what Vinh refers to ‘analog design’, but none on grids in web design.

(It should be noted that Mark Bouton, author of a seminal set of blog posts on grid based web design, will be publishing a book on this subject through his own imprint, Five Simple Steps.)

I like that there is an entire book devoted to the concept – it gives Vinh the space to articulate thought than is sustainable in blog posts.

The book is broken down like this:

  1. Introduction
  2. Concept
  3. Process
  4. Execution – this is the meat of the book, and what you’re paying admission for
  5. Conclusion

I’m afraid that many readers might skip chapter 2, “Concept”, and it’s a pity. Vinh deals with what grids are, they’re history, and the difference when it comes to the internet.

The history of grids won’t necessarily help you when you’re on deadline, but it helps to know why and how grids were developed. They were developed to deal with a particular set of graphic problems, especially in the 20th century. While web design has similar problems to deal with, there are some fundamental differences – what Vinh calls the need for “conversational” solutions. A conversational solution takes into account what the designer is trying to accomplish, what the technological context of the solution is, and how the user is receiving it.

Chapter 3, “Process” is a short but vital chapter. Vinh (briefly) goes into researching solutions, figuring out what restraints one must deal with, sketching, and grid terminology. You could almost write a whole book on what he goes through in nine pages.

Example Page from Ordering Disorder
Khoi Vinh shows you how you can develop layouts
The main attraction is chapter 4, “Execution”, where Vinh takes an theoretical project and shows you how to develop a grid system for it. The example website has four ‘kinds’ of pages, and Vinh develops layouts for those four page types. For this sample site, he starts with the restraint of having to accommodate a large ad space, and works the rest of the system out from there.

Some highlights for me were:

  • Don’t start with the homepage when developing a grid system – start with content pages. I usually work this way anyway, but Vinh articulates the point well.
  • Grids on the web should account for the behavior of content – text should rarely but right up against the edges of columns in a grid
  • Baseline grids, while helpful, cannot be adhered to by every element on the page. It’s just not practical, so let it go!

Vinh has proven himself to be a clear, articulate author on his blog, and that is also the case in his first book. One thing that I really appreciate is that in the development of these layouts, he takes the time to go back and change things, to show you how a grid can evolve in the course of a project.

He does NOT delve into the technical how-to’s of how to execute a layout in HTML & CSS. You won’t find a tutorial on the 960 grid system. This is by design, and I think it’s a good decision. This book is about the thinking that goes into developing a grid, not trying to clear floats.

The one criticism that I can offer is that I wish that there was a greater range of example projects/problems. The example site has one restraint (an ad) that dictates how the rest of the layout is formulated. That same restraint is used over and over. I would have appreciated at least one example of a layout designed for a different restraint altogether – maybe a different example site.

I wholeheartedly recommend the book, though, for both beginning designers and seasoned pro’s. If you’ve also read it, or have questions, I would love to know in the comments below!

Read MoreLeave a comment