Adapting Grids to a Fluid Medium

responsive_blogheader

The trouble with the word “grid” begins and ends with edges.

A page in a book, a broadsheet newspaper or the back of a napkin — regardless of format, print design can count on two known values: Width and height. But web page boundaries are ambiguous. A given site may adapt to smartphones, desktop browsers and everything in between. Even with the same template, pages’ lengths often vary depending on how much material they contain. Readers can enlarge or decrease text size. Devices show images at varying densities. Add semantics, accessibility and periodic updates to the mix, and it’s hard to imagine a single solution that fits all situations.

But old habits are hard to drop. Today, CSS-based solutions let designers organize web pages into columns, a time-honored practice in print design. It’s not hard to see see why. Both are visual media composed on flat surfaces. Both are mostly comprised of text and images. Books have pages; sites have pages.

But the web does not have, and never has, fixed boundaries. The term “web page” misleads us into thinking that grids for web are the same as grids for print. Browsers are not books.

The layout tool

Few people lay out a page at random. With or without a grid, the right spacing — proximity and position — are tools designers use to visually organize a page.

diagram showing how grids create groups

Above: Simply changing the space between elements organizes them into different groups. They create an implied organization — a structure that makes the best use of available space. But to really see the importance of layout, take it away.

diagram showing a page without layout

It’s not pretty. But what, exactly, did it lose?

  • Aesthetics: Balance, contrast and visual weight create a pleasing composition.
  • Relationships: Proximity and distance indicate which elements are associated with each other.
  • Importance: Position suggests each elements’ importance relative to its neighbors. (To be fair, importance doesn’t disappear — it becomes less sophisticated.)
  • Rhythm: Regular shapes and spacing give a sense of reassurance or control. Variation in spacing implies activity.
  • Sensible image sizes: Graphics and photos that were resampled to fit a given space look strange when the space isn’t specified.

It’s counterintuitive, but removing layout from web pages creates a few advantages.

  • Portability: Without specific widths, content flows to any size window, leaving width up to the reader and/or device.
  • Scalability: Layout-free content can be sized or zoomed to suit users’ needs.
  • Direct order: Line for line, the order in which a layout-free page appears on screen matches the order of its HTML.
  • Importance: People may assume higher elements are more important. Removing layout simplifies ranking. No elements appear to be of equal importance.

For centuries people have used grids to create a sense of order in their compositions. Grids bring related information together; create uniform block sizes; allot space based on need and priority; reduce guesswork; and add a degree of order. Strike that — designers use grids for those purposes. Grids are tools, after all, not mandates.

But if we can’t rely on page boundaries to create grids, how do we manage web page layout? One answer lies in reversing the question: Are we using an old tool for a new job?

A deeper grid

Raw HTML won’t win many beauty contests, but a well-ordered document does possess some attributes we lost by removing layout.

  • Relationships: In HTML, elements like <p>, <ul>, <ol>, <dl> and <div> exist to create groups of like information.
  • Importance: Heading elements rank what follows them. For example, paragraphs after <h4> are minor compared to paragraphs after <h1>.

We also gain meaning.

Like “web page” doesn’t mean “paper,” the names of some HTML elements only sound like layout descriptions. They are not. <Aside>, for example, isn’t text pushed left or right, but a brief divergence from the current train of thought. <Header> and <footer> are introductions and conclusions, not just tops and bottoms.

This is where structure in HTML differs from structure in layout, even though they share a goal. Like color and typography, layout is a tool designers use to guide people through information set forth in HTML. Visual design is semantics for humans.

But even as the web gains structure based on meaning, it loses the definitions on which grids are based: fixed width and height. Lacking known edges, many CSS frameworks create their own. Often 940 or 960 pixels wide, these edges-within-windows are based on established thinking. As a side effect, grids derived from edges reinforce the illusion that viewing experience is predictable.

To be fair, many designers have used 12- and 16-column CSS frameworks to great effect. Foundation and 960 have case studies of success stories. But increasingly, designers can’t rely on wide viewports. Handheld devices vary in size. People change their desktop browsers’ window width. Other people add comments, extending article pages already of unpredictable length.

What if, rather than fighting the web, grids could take advantage of its fluid nature? It turns out there is another foundation on which we can create grids.

Concept in practice

Information does not exist to fill web pages. Web pages exist to present information. This simple idea turns the nature of grids on its head. Design based on content works from the inside out.

diagram showing content as a unit of measurement

No page? No problem — We can create a grid based on a known quantity, such as the width of an image. Carried further, column widths and gutters may be derived from fractions of our base element.

diagram showing how to extrapolate rhythm from fractions of content

Above, a content-based grid is created by subdividing a piece of content. The fact that each column uses uneven fractions — 1, 5/8, 3/8, 11/8 — is less important than that all are derived from the same rhythm. This example also shows how content-based grids involve a degree of intuition. Why use eighths? I thought it looked right. The parameters did not dictate design; I chose the parameters.

We can also create grids based on typography.

diagram showing how to derive grids from ems

Ems are units of measure based on the width of an uppercase M. But which M? Above, a grid is derived from the most important element in the composition. As supporting elements, the photo and attribution are arranged according to the quote’s font size.

This gets to the spirit of a grid based on information. Web pages do, in fact, have edges. But now they’re called tags.

<div>
  <div>…</div>
  <nav>…</nav>
</div>
<div>
  <article>
    <section>…</section>
    <section>…</section>
  </article>
</div>
<div>
  <ul class="sample">…</ul>
  <div>…</div>
</div>

Above: Three div elements contain multiple sub-elements that describe their contents, such as nav, article and .sample A web page’s edges are not visual. They’re meaningful.

Meaningful layout

There is no formula to derive layout from HTML elements. No algorithm, no template, no gimmick. But there is a thought process.

  • What HTML element(s) contain information for which people have come to the page? For example, people read a blog for its posts. Shopping sites, for its products. A FAQ for its answers.
  • What spacing makes that information look best at different sizes? Should an article have, say, 30, 45 or 60 characters per line? Should a product show thumbnails at 120, 250 or 333 pixels wide?
  • Derive a grid based on increments and fractions of that base unit.

Specifics vary per project. Creating an information-based grid calls on design experience, intuition and common sense. The process is a tool — like grids themselves.

Going forward

Print grids aren’t showing their age; the web is showing its youth. People are learning the web is not paper on computer screens. It’s a new medium. One whose fixed edges are not visual, but structural. It calls a for framework that embraces rather than fights the web’s fluid nature. It leads one to wonder if the metaphor no longer fits.

Really, has there ever been a web page?

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Ben Gremillion

Ben Gremillion started playing with pixels in the mid-1980s and building websites circa 1997. When not hiking or stargazing, he crafts HTML and CSS, spends a lot of time debugging PHP and MySQL, ponders the details of user experience, and injects bits of personality into staid websites. He blogs about his lessons learned in web design at benthinkin.net.

Comments

Comments are closed.