← developer

Scrolly Topper

The Storytellers Studio team built and maintains what’s referred to at the “in-depth” framework, a collection of tools and components that allows desingers to create an engaging and unique presentation on a story-by-story basis.

The framework started out with just the editor, but as it gained in popularity, I turned to the Vue javascript framework to build a suite of tools to aid producers in their work.

A searchable index lists the stories that have been published to date with scannable metadata to make finding something easier — pubdate information, headline, byline — and links to the published story, the story in Gannett’s CMS, and the configuration editor.

Stories are configured using ArchieML, a scripting language created at The New York Times to make it easier to write and edit structured text. The editor features a text area for inputting ArchieML that describes how selected parts of a story — headline, images, videos, subscription offers, etc. — should appear. Below that is a list of all the assets attached to the story that can be targeted for configuration. And to the right is the preview area, where a designer can see the results of their work in both desktop and mobile widths.

Since we’re always trying to serve up stories that drive the most engagement, there’s an “Optimizations” panel describing how the story could better keep the reader’s attention.

The Insights tab offers up analytical data to the development team to determine which features are most popular with designers. And the Demos tab gives designers examples of how to execute configurations on the available in-depth components.

The framework is an evolving suite of tools. As designers stretch existing components to their limits and dream up new ways of using them, we extend or re-imagine the components to help producers turn their vision into reality.