Embrace the ubiquitous ‘Layer Cake Layout’

Layer Cake Layout—rows spanning the width of the browser, stacked on top of each other and distinguished by background color, line separator or space—arose from the demands of responsive design.

Check out the Google search result for images of newspaper grid. Then magazine grid. Then book grid.

What do you see? Columns. 1 column, 2 columns, 4 columns, 5 columns, 9 columns—maybe more, maybe less. But regardless of the number, this much is clear: Print layout is columns 1st.

The columnar grid had been the publishing norm for centuries. Not anymore. Not in digital style.

Digital layout is in layers of rows

Have you ever wondered why so many websites now look like WordPress’s? And Drupal’s? Or Penn State World Campus or Harvard Extension or UW-Madison’s IT site?

These sites—and countless others—are built with what I call a Layer Cake Layout. Layers of rows—distinguished from each other by background color or line separators—contain columns of cards, blocks, text, whatever. 

Layer Cake Layout dominates the web’s summary pages. These are pages that serve as big guides or menus, showing you what’s inside and how to find what you want. Examples are home pages, section or category pages, landing pages and the like. Especially on these summary pages, layer-cake layout is so universal that you might be tempted to grouse, “How come these web people have no creativity?”

Resist the temptation. It ain’t the designers; it’s the context.

The tools make the rules

We learn from the history of document style that the tools make the rules. Each era’s agreed-upon style practices flow from the capabilities and limitations of its tools of document production and consumption.

Handheld tools of document consumption have changed the rules dramatically.

A print document is static. It has the same size and orientation (portrait or landscape) for all who consume it. Not so a digital document. For the 1st time since human beings began making marks in clay to share information, readers view the same document through differently sized and differently oriented devices.

If this post—or any other—is to accomplish its communication purpose, it must be clear, usable and appropriately styled in:

  • Large, landscape desktop monitors
  • Medium-sized tablets that can be turned portrait or landscape
  • Pocket-sized mobile devices that can also be turned portrait or landscape

You can’t do all that with a columnar grid. You can’t squeeze a 5- or 6-column broadsheet into the viewport of an iPhone—even the oversized one—and expect your audience to maintain interest in what you have to say or sell.

From different viewports to Layer Cake Layout

Within months of each other in 2011, Twitter released Bootstrap and Zurb released Foundation, the original responsive CSS frameworks. Both of these amazing innovations featured something brand new: a row-1st grid easily accessible to developers that stacked columnsrather than shrunk them—on narrow screens.

Layer Cake Layout was born. It matured when developers launched WordPress, Drupal and other CMS themes built with style sheets using Bootstrap or Foundation or a similar responsive grid, making layer-cake layout available to anybody who learned how to make a blog.

The tools make the rules; resistance is futile: Dig into a Layer Cake Layout for your website’s summary pages.

Leave a Comment