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.
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.
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.
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.
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.
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.
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.
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.