Insights into ProPublica’s article layout framework – ProPublica

Editorial design is a very beautiful thing. 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 rendition of the written word can benefit from a thoughtful visual presentation. Photography, illustration, and video can humanize the characters of a story. Charts, graphs, and other data visualizations clarify complicated concepts. Typography and color set emotional accents. And giving it all 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 how much. When introducing a series of characters in sequence, a small inserted portrait of each at the beginning of each paragraph can speed up the writing. When the story’s focus shifts to a new location, a large shot of that landscape can signal a change in the story’s focus. The decision to instead make this image small, off-center, and surrounded by ample white space offers 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 almost limitless.

When we overhauled ProPublica’s article design system last year, sophisticated layout features like this were a top priority. Building our article layout framework has been a balancing act of providing a range of options that are broad but not overwhelming.

How it works

Our articles are based on an underlying grid structure that varies depending on the size of the reader’s device or browser window. On most mobile phones, the layout is based on a narrow four-column grid. On a tablet it can 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 with a 14-column article layout grid, a tablet with an 8-column article layout grid, and a smartphone with a 4-column article layout grid

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

The main article text occupies the eight columns in the middle of the 14-column grid, which prevents the lines from becoming too long for comfortable reading. On smaller screens, the 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 smallest version.

All other layout elements, such as photos and illustrations, use combinations of multiple attributes to determine how they behave in the grid. Let’s take a look at them.

size and position

Using the 14-column version of the grid as a base, a layout element can be one 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 expands into the margins to take up the full width of the browser. On smaller screens, each size is automatically scaled down in approximate proportion to the size of the grid; For example, size 5 includes 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 article layout grid

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

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

By default, layout elements are anchored within the text area of ​​the main article. They can be positioned to align to the center or to the left or right edge. If they have a left or right position base, they can be pushed into the text area or dragged into the outer columns, up to three columns in each direction. As with resizing, the spacing automatically decreases roughly in proportion to the size of the grid on smaller screens.

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

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

An image indented one column from the left. Because the indent scales proportionally on smaller screens, it disappears on the smallest screen.

text wrap

Layout elements have the option of completely breaking the article text or letting the text flow around it. In situations where there is not enough space for a comfortable text wrap, the layout automatically ignores the text wrap setting.

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

Layout elements can break or wrap article text. The mobile screen ignores the text wrapping setting in this case because our article layout framework knows that there is not enough space for a comfortable text wrapping.

responsiveness

Automatically proportionally scaling elements across different screen sizes can be very handy, but it can also be a drag. An image that looks great at a small size on a big screen can become tiny and unreadable when scaled down on a small screen. To solve this, we’ve built in the option to force an element to take up the full width of the text area 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 shows the same image reduced to a very small size.  A red X appears above it. The second smartphone shows the image larger with a different section.  A green tick will appear above it.

A laptop and two smartphones.  The laptop displays a small image in an article layout.  The first smartphone shows the same image reduced to a very small size.  A red X appears above it. The second smartphone shows the image larger with a different section.  A green tick will appear above it.

This small image works well on large screens, but becomes too small when scaled down, giving us the option to force it to full width and/or alternatively crop it on smaller screens.

Also included is the option to use two different versions of an image for small screens and large screens. This can be used for two different crops of the same photo (a wide crop for large and a narrow crop for small) or for two different orientations of a bar graph (horizontal/large and vertical/small).

Diptychs, triptychs and more

Any number of items can be placed next to each other on the grid, which is useful for creating something like a series of portraits. The same responsive options mentioned above can turn the array of items into a stack on smaller screens to keep them from becoming prohibitively 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 optionally becomes a stack on smaller screens.

To encode or not to encode

We’ve integrated all of these layout options into our content management system, so our producers don’t need any coding skills to use them. But for code-savvy power users looking to extend the system, it’s built with Column Setter, the open-source tool we developed for grid-based editorial design. We recently updated it with a variety of new features.

Controls for layout options in our content management system. Programming knowledge is not required.


The many ways to combine our layout framework’s optimized set of variables — size, position, responsiveness, and text wrapping — make it a simple yet powerful system. With a total of 616 unique ways to present a layout element, its visual vocabulary is vast! Coupled with photography, illustration, video, data visualization, and our typography and color systems, the framework gives our editorial teams tremendous flexibility to express themselves visually in a way that best fits the story they are telling.

Photos in the layout examples above by Celeste Sloman for ProPublica, originally appearing in The Lost Year: What the Pandemic Cost Teenagers.

Comments are closed.