Twitter  The NYT's David Leonhardt says The Upshot could be reimagined for local with a staff of no more than three nie.mn/WHcDmB  
Nieman Journalism Lab
Pushing to the future of journalism — A project of the Nieman Foundation at Harvard

Meet Scroll, a new tool that wants to de-templatize the news web

Cody Brown and Kate Ray launch a new tool to help non-coders design on a story-by-story basis.

The 2010 version of the Knight News Challenge featured an entry for a very cool project: PaperNews, middleware that sought to “reinvent how we see news design on the web.”

PaperNews wasn’t, ultimately, funded. But part of its spirit lives on in Scroll, a new editor that aims to de-templatize news design. The tool, created by soon-to-be-serial entrepreneurs Cody Brown and Kate Ray, wants to take the basic design approach of print — start with a totally blank page, add elements — and apply it to the online world.

Its elevator pitch: “Scroll helps you make magazine style layouts for the web and iPad without needing to know how to code.”

In print, designers have more than a century’s worth of experience building visual structures to please the eye. Different stories get different placement on the page, different headline treatments, different kinds of accompanying art — even within the daily grind of newspaper production, there’s room to spend a little time matching a reading experience with a visual one.

On the web, though, most news sites dump every news story into a single — or, if they’re lucky, maybe a handful — of predefined templates. Those templates might be terrible or they might be great, but they generally render the news with all the style of an assembly line. A few special projects each year might get a special design treatment, but that often requires collaboration between coders and designers whose skill sets don’t overlap.

Which is the point of the without needing to know how to code kicker of Scroll’s elevator pitch. Tools like Scroll — a lightweight editor that generates html and CSS — can put journos of the coding and non-coding varieties on, literally, the same page, allowing them to collaborate to create online news experiences that mimic the intimacy and immersiveness of print.

“There are so many elements of an article beyond headline and body that lure someone into a read or make an impact and convey information that’s hard to express through words,” Brown told me in a Gchat. He pointed me to a piece Jack Shafer wrote for Slate this summer, in which the press critic extolled the benefits of the print experience over the digital. Shafer “assumed that you really couldn’t express those kind of print native nuances online,” Brown said. “I think you can.”

Print-ethos-online may well be best facilitated by rethinking news outlets’ content management systems entirely. (“The CMS needs to be burned to the ground,” Brown puts it.) But while most news orgs you talk to aren’t generally thrilled with their systems — “slow,” “unwieldy,” “industrial,” etc, etc. — they’d likely be even less thrilled at the notion of starting from scratch. Scroll wants to implement design changes incrementally. “What we’re suited for now,” Brown says, “is for people to experiment with us on features.” (Scroll is planning on a freemium model that’ll offer paying clients “more advanced features” and hosting.)

The history of WYSIWYG apps designed to make web design accessible to non-coders is long and not particularly filled with glory; most produce klutzy, bloated code that doesn’t work as well or as quickly as the product of actual coders. But Scroll’s code, at first glance, at least seems not to suffer from that problem; the growth of web standards and of grid-based web design has made it easier to generate pixel-tuned designs without relying on the hacks of the early web.

One thing that should help its pitch is the fact that Scroll is meant to facilitate design for both the web and tablets. (In the video above, the red lines are guides for the iPad’s screen.) We tend to assume that the web and the iPad facilitate completely different reading experiences that are reflected in completely different design aesthetics — that web design, essentially, has a pass to be busy, while tablet design must be print-like and pretty. But Scroll’s bespoke approach assumes that readers want clean, immersive consumption experiences regardless of what devices they use to do the consuming. As Brown puts it: “It’s 2011 and the print product of most newspapers and magazines is vastly superior to what they have on the web. They can change that but it takes a different workflow and different technology. We’d like to help them with it.”

                                   
What to read next
RevealCIRlogo
Justin Ellis    July 18, 2014
With $3.5 million in grant funding and an eye for collaboration, the Center for Investigative Reporting and PRX aim to bring deep investigations to radio and podcasting.
  • http://twitter.com/CodyBrown Cody Brown

    Cool article Megan. 

    If you’re interested in trying out Scroll, just head to the homepage and request an invite: http://scrollmkr.com . If you’re a publisher wondering about how this could work with your current setup—shoot us an email: hey ‘at’ scrollmkr.com

  • http://www.baekdal.com Thomas Baekdal

    One question: What about multiple sized screens in multiple orientations? E.g. the difference between a 7″ Android tablet in landscape mode vs. an iPad in portrait mode.

  • http://twitter.com/holmor Morten Holst

    Print-ethos-online may well be best facilitated by rethinking news outlets’ SMS -exactly what Vizrt intend to do. 

  • http://foomandoonian.net/ Foomandoonian

    This feels like a backward step to me. News online would be far better served innovating responsive, accessible and semantically meaningful designs. Play to the strengths of the internet.

  • robin

    I’m sorry, but the code this tool produces is kludgy, and not semantic, judging from the example ‘New York Observer’ article/page.

  • Paul

    If any one is interested in checking out a publishing solution that builds community, take a look at Kontribune Engage. http://Www.kontribune.com

  • http://twitter.com/CodyBrown Cody Brown

    Thanks for the feedback. Semantic is pretty simple to add. I’m not sure what you mean by kludgy, all that matters is that it loads fast.

  • http://twitter.com/CodyBrown Cody Brown

    I understand the semantic design point but don’t understand what you mean by responsive or accesible. We think giving publishers more control of the page will lead to much more accessible and impacting work. 

  • http://foomandoonian.net/ Foomandoonian

    By responsive, I mean a design that uses CSS media queries to deliver the most appropriate layout to each device (mobile, tablet, desktop etc.), like the new Boston Globe design. 

    And by accessible, I mean designs that are accessible to all types of disabled users (can your text size be changed, colours be altered, can it be read properly by an audio browser, does all non-text content have appropriate metadata, etc.)

    I agree that semantic data can be bolted on afterwards. The fact that you consider it a lower priority than cosmetic design is unsurprising. I’m sure Scroll will appeal to many designers and journalists (and readers) more comfortable with paper media.

  • robin

    You guys are doing a lot of hard work in pursuit of a million-dollar idea:  visually engaging screen presentation as our hand-held gizmos become more and more powerful.  You’re starting with a green field, I’m jealous!  If your market is not the web, you’re in good shape.

    If it is the web, imho, you’re totally missing the point of separating mark-up (html) from presentation (css).  From the mark-up your tool is generating (assuming it’s that example page), how on earth am I able to tell that:

    BEATING THE STREET

    is your headline/title.  Googlebot sure can’t either.  More:
    IS OCCUPY WALL STREET THE BATTLE OF THE BATTERY OR THE BONFIRE OF THE HUMANITIES MAJORSIs this a lede, and minor headline (h2) or a paragraph?  Can’t tell :(.  It gets worse from there.Again mho, the markup for that whole exercise is dirt-simple, with all layout and presentation being done with css:                                 

  • http://twitter.com/stretchphoto Stretch Ledford

    Is there supposed to be audio with the video??

  • http://twitter.com/CICM Center for Innovatio

    Part of the attraction of a CMS is the content is stored in a database. I’m assuming this will be the case with this? If not, how is it supposed to benefit a news outlet that archives everything?

  • http://www.bradezone.com/ Brade

    How can you identify anyone as a “soon-to-be-serial entrepreneur”?