Inside the ProPublica Article Layout Framework — ProPublica

0

Editorial design is a thing of many splendours. As cliché as it may be to say a picture is worth a thousand words, there’s no denying that even the most skilful and vivid display of the written word can benefit from thoughtful visual presentation. Photography, illustration and video can humanize the characters in a story. Charts, graphs and other data visualizations clarify complex concepts. Typography and color set an emotional tone. And bringing it all into cohesive form is perhaps the most invisible and least understood aspect of editorial design: layout.

A good layout works its magic by modulating visual rhythm and contrast to determine which elements of the article are emphasized and to what extent. If a cast of characters is introduced one at a time, a small inset portrait of each at the start of each paragraph can add momentum to the writing. If the focus of the story shifts to a new location, a large establishment photo of that landscape can signal a shift in story focus. Choosing instead to make this image small, off-center, and surrounded by generous white space provides a different kind of contrast and tells a different story.

The size and position of images and text can be just as communicative as their content, and the possibilities are virtually limitless.

When we overhauled ProPublica’s article design system last year, sophisticated layout capabilities like these were a top priority. Building our article layout framework was a balancing act of providing a wide but not overwhelming range of options.

How it works

Our articles are built on an underlying grid structure, which varies depending on the size of the reader’s device or browser window. On most cell phones, the layout is based on a narrow four-column grid. On a tablet, there may be six or eight columns. And in a large desktop browser window, there’s enough room for 14 columns, the largest version of the grid.

A laptop displaying a 14-column item layout grid, a tablet displaying an eight-column item layout grid, and a smartphone displaying a four-column item layout grid

The grid structure of our layout is responsive and varies by screen size.

The main story text occupies the eight-column range in the middle of the 14-column grid, which prevents rows from become too long for comfortable reading. On smaller screens, text fills six columns of the eight-column version of the grid, four columns of the six-column version, and all four columns of the smaller version.

All other layout elements, such as photos and illustrations, use combinations of several attributes to specify their behavior on the grid. Let’s take a look at them.

Size and position

With the 14-column version of the grid as the basis, a layout element can be any of 15 sizes. Size 1 is one column wide, size 2 spans two columns and so on, up to size 14. The 15th and largest size spans the margins to take up the full width of the Navigator. On smaller screens, each size is automatically reduced in approximate proportion to the size of the grid; for example, size 5 covers five columns of the 14-column grid, four columns of the eight-column grid, and three columns of the six- and four-column grids.

Three sets of laptops, tablets and smartphones, each displaying different sizes of an image on an item layout grid

Three sets of laptops, tablets and smartphones, each displaying different sizes of an image on an item layout grid

From top to bottom: Size 3, Size 5 and Size 8.

Layout elements are anchored inside the main article text box by default. They can be positioned to align with its center or its left or right edges. If they have a left or right positional base, they can be pushed into the text box or pulled into the outer columns, up to three columns in either direction. As with sizing, the spacing is automatically reduced in approximate proportion to the grid size on smaller screens.

A laptop, tablet, and smartphone, each displaying an indented image on an article layout grid

A laptop, tablet, and smartphone, each displaying an indented image on an article layout grid

An image indented one column from the left. Since the indent is scaled proportionally on smaller screens, it disappears on the smaller screen.

Text wrapping

Layout elements have the option of either breaking the text of the article completely or having the text wrap around them. In situations where there is not enough space for the text to wrap snugly, the layout automatically overrides the text wrapping preference.

Two sets of a laptop and a smartphone.  The first shows an image with the text of the article above and below.  The second shows the same image with the text of the article surrounding it.

Layout elements can break up article text or cause it to wrap around them. The mobile screen ignores the text wrapping preference in this case, because our article layout structure knows that there is not enough space for the text to wrap snugly.

Reactivity

Automatic proportional scaling of elements on different screen sizes can be very convenient, but it can also be a liability. An image that looks great in a small size on a large screen may become tiny and unreadable when scaled down on a small screen. To fix this, we’ve included the ability to force an element to fill the full width of the text box on smaller screens, regardless of its size on larger screens.

A laptop and two smartphones.  The laptop displays a small image in an article layout.  The first smartphone displays this same image in very small format.  A red X appears above.  The second smartphone displays the larger image with a different crop.  A green checkmark appears above it.

A laptop and two smartphones.  The laptop displays a small image in an article layout.  The first smartphone displays this same image in very small format.  A red X appears above.  The second smartphone displays the larger image with a different crop.  A green checkmark appears above it.

This small image works well on large screens but gets too small when scaled down, so we have the option of forcing it to be full-width and/or giving it an alternate crop on small screens.

The ability to use two different versions of an image for small screens and large screens is also included. This can be used for two different crops of the same photograph (a wide crop for large and a close crop for small) or for two different orientations of a bar graph (horizontal/large and vertical/small).

Diptychs, triptychs and more

A set of any number of items can be placed side by side on the grid, which is useful for creating something like a row of portraits. The same responsive options mentioned above can turn the row of items into a stack on smaller screens to keep them from getting too small.

A laptop and a smartphone.  The laptop displays two images side by side in an article layout.  The smartphone displays the same images stacked in an article layout.

A diptych on large screens eventually becomes a stack on smaller screens.

To code or not to code

We’ve integrated all of these layout options into our content management system so that they don’t require our producers to have coding skills to use them. But for power users who know code who want to extend the system, it’s built with column adjuster, the open source tool we developed for grid-based editorial design. We recently updated with a variety of new features.

Layout options controls in our content management system. Coding skills are not required.


The many possible ways to combine our layout framework’s simplified set of variables – size, position, responsiveness and text wrapping – make it a simple yet powerful system. Offering a total of 616 unique ways to present a layout element, its visual vocabulary is vast! Used in conjunction with photography, illustration, video, data visualization, and our typography and color systems, the framework gives our editorial teams enormous flexibility to express themselves visually in a way that best suits their the story they tell.

Photos in sample layouts above by Celeste Sloman, for ProPublica, and originally appeared in “The Lost Year: What the Pandemic Cost Teenagers.”

Share.

Comments are closed.