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.
The main story text occupies the eight-column range in the middle of the 14-column grid, which prevents lines from becoming 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 location
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.
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.
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.
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.
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.
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 code-savvy users who want 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 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.”
Comments are closed.