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 GeneratePress’s or Emma’s or Penn State World Campus’s or Harvard Extension’s 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 presentation pages—home pages, section or category front pages, landing pages, persuasion pages and the like. It’s so universal, you might be tempted to grouse, “How come these web people have no creativity?” Resist the temptation. There’s excellent reason for this layout becoming so dominant.

The tools make the rules

We learn from the history of document style that the tools make the rules. Each era’s agreed-to-be-proper practices flow from the capabilities and limitations of its tools of document production and consumption. (I flesh this argument out in the Elements From History series of posts.)

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.

Let me say that again (slightly shorter): For the 1st time ever, readers view the same document through differently sized and differently oriented devices.

This has changed everything. 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; experience forms expectation. Reality always wins; resistance is futile: Embrace the Universal Digital Layout for your presentation pages.

Leave a Comment