Embrace the universal digital layout

Screen shot Bootstrap digital layout

The Universal Digital Layout arose from Bootstrap, Foundation, Unsemantic and other CSS frameworks that gave web designers & developers easy access to a device-responsive, row-1st grid.


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 rows 1st

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?

I call this layout style the Universal Digital Layout, or UDL for short. Rows come 1st; columns fit within the rows.

UDL 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, UDL 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 UDL

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.

The Universal Digital 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 UDL available to anybody who learned how to make a blog.

The tools make the rules; resistance is futile: Embrace the Universal Digital Layout for your website’s summary pages.

Leave a Comment