Rob Weychert on ProPublica’s Article Layout Framework
Rob Weychert, a Philadelphia-based designer/web developer I’ve been following for decades goes deep on the article layout framework he put developed for ProPublica:
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 mobile phones, the layout is based on a narrow four-column grid. On a tablet, it might 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.
[…]
We’ve built all of these layout options into our content management system so they don’t require our producers to have any coding skills to use them. But for code-savvy power 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.
As someone who has to revisit this exact issue periodically, it’s really cool to get a behind-the-scenes glimpse of how it works at one of your favorite news publications, and to hear one of your heroes go deep on fundamentals like this.