At WIRED we’re always experimenting with new ways to showcase our long-form journalism on the web. In the past, we spent months hand-coding custom templates to give our important stories unique presentations—with dynamic multimedia elements, vivid photography and graphics, and complex animations and special effects. That’s why we’re excited to debut our Feature Story Builder tool, which lets us build high-impact web features in a fast, modular way, without the need to hand-code everything.
We used our new Feature Story Builder tool for the first time last week to produce our exclusive, behind-the-scenes story on the Apple Watch’s design process, and the differences in our workflow and finished feature were immediately apparent.
Historically, some of our most recognized and lauded stories, from our interview with Edward Snowden, to our feature on eradicating polio in remote parts of the world, to our multimedia coverage of the Station to Station art project, were true labors of love, requiring a couple of months of lead time to scope, design, and build. Testing these stories across devices was a complex challenge for our tech team and product managers. But the new Feature Story Builder changes all that.
In building the Feature Story Builder tool, we extracted what we learned from all of the custom executions that we produced before it, and then integrated our styles with the open source WordPress Page Builder tool from the “Make” WordPress theme.
Now, the flexible components of a page can be assembled to construct a WordPress post using a simple drag and drop interface with plenty of customization options. The tool is designed to be extensible, so we can add new elements over time, expanding the toolkit of modules, animations, and styles at our disposal. And, by standardizing some of these capabilities, including full-bleed images and video, parallax effects, wide galleries, and headline effects, we’ve cut the build and QA time for every feature dramatically.
Another benefit of the Feature Story Builder is that the features we build are basically future-proofed. Since we’ll be using the same uniform code every time we build, if we need to redesign or migrate anything in the future, that is now infinitely more possible than before, when everything had custom inline styles that could break in a differently designed site. Our web producers can now select from a simple interface and drag and drop the components they want to construct the DOM of the page. Each component has preset configurable options within it that reference JS and CSS that is global to all posts using this template.
Our web design process has become much easier, too. WIRED’s designers and art directors now know what components are available off the shelf and how they render. Now we’ll only need to do mockups and rounds of detailed reviews when we decide to expand our tool’s feature set.
Please enjoy our first Feature Story Builder feature—an inside look at the design process behind the Apple watch project.
Additional story contributors: Nicole Wilke, Zack Tollman
No comments:
Post a Comment