Lay It Out
We save trees
And when Microsoft put together a dynamic page layout for The New York Times Reader, did they know that it was the future? It certainly wasn’t the immediate present, since they couldn’t pry the WPF visual layer off of Windows, leaving it a single-OS solution. (The Times’ Reader later was taken up by Adobe, which at least got it to work on both Mac and PC.)
Filipe Fortes, PM on the MS news client project, knew. I’d met him when the group invited me out to Redmond to help design the first templates for the Times. Later I saw him at the 2007 Mix conference in Vegas, and I asked him how to make the dynamic page size idea work multi-platform. He said, “We could do it in HTML.”
Of course, the reply had to be, “What do you mean we?”
After leaving Microsoft, Filipe took some time to see the world, even living in China for several months, and then to my surprise showed up in New York. Meanwhile the iPhone took off. Doing some coding for big media customers to pay the rent, he started working on a proof-of-concept for Treesaver, a name suggested by Matt Goldenberg, my former client at Bloomberg, then working in the studio.
By late 2009, we had presentable a demo that we showed to the Washington Post. The Post took a big pass (later coming up with hauntingly similar design for Flipboard Pages), and in the course of 2010 we showed it to one big media company after another. Some of them got the idea that with proliferation of digital devices they need an adaptable presentation platform, but none of them could put a decision together to do it.
It turns out that the magazine groups and newspaper chains—my clients over the last 20 years—are going to be slow to make the change to Treesaver, or any change, bound up as they are with their own inertia, the terror of the collapse of their business models, or as Michael Wolff says, trapped in the effort to maintain their lifestyles.
Filipe sardonically said we should have just sold them an app. Last year that might have worked better, since the media folks got it into their head that an iPad app would be the magic bullet. Now they are beginning to see that there is no magic bullet, that what they need is a new business model—and a cross-platform solution that allows them to create their content once and publish it everywhere.
Meanwhile, some friends who had already left the media companies, now free of institutional momentum, embraced Treesaver for fascinating new ventures. Mark Edmiston chose it for Nomad Editions, and John Solomon chose it for the Center for Public Integrity’s new investigative news site. (More on in coming weeks.)
Filipe sat down to write the real code, dealing with the basic structure and features like swiping on different devices. We had a working launch for Nomad in December, and now we’re pushing it out the door in open-source release. Filipe is dogged and determined when he has a good idea. And Treesaver is his idea, and his code. If you don’t know him you can get an idea of his personality and focus in Robert Scoble’s video interview late last year.
You can tell from the interview that Filipe is a personable and articulate kind of techie. I call him a genius, and it bothers him if I say that in meetings. Only Filipe saw that Treesaver could be done, and then did it. He has other attributes: He speaks Portuguese and Spanish and has a beautiful Brazilian fiancée who is a IA consultant on the side, but for this effort what counted was his tenaciousness.
Moving on from page design
All I’ve done is to work on the design. I brought in Scott Kellum, a young typographer who understands web design, last spring. Together we applied the concept of an HTML 5 app that takes web content, text and pictures, and dynamically lays it out for different screens. Treesaver.
Sounds easier than writing the Javascript, but I don’t know, since I couldn’t write code if you held a gun to my head. But is not easy. All media designers have been working on the design of pages with fixed dimensions, like so many artists in smocks and berets staring at their canvases. Web designers aren’t much better than print designers at letting go of the idea of starting with a fixed, blank page. They’ve are used to PC screens, and have become rooted in pages that are 960 pixels wide. (As proof of this, note how few web sites have started using adaptable widths in CSS so they work on mobile browsers.)
At first, I tried designing on three or four screen sizes at the same time in Photoshop and InDesign—iPhone, iPad and desktop to start. This was slow.
Scott worked directly in HTML, which provides immediate previews, but sometimes you can get sidetracked in the code and forget what it looks like.
With a few months of experience, I began to realize that after you settled on the column grid, you have to focus on the relationship between the elements—headlines and text, text and pictures, pictures and captions, and so forth. Then you could think about the rules, the algorithms, that govern these elements.
This is the essence of publication design, which I started thinking about when I was six and my dad let me use the Ditto machine to put something called, “My Fun Reader,” my answer to the boring, condescending My Weekly Reader they handed out in school. (It was later closed for scandalmongering.)
The way you put a caption up next to a picture, the way intro text is handled at the beginning of a story, the author’s bio, the pull-quotes—all of these typographical styles are the essence are the building blocks that I’ve left behind at dozens (I hate to say hundreds) of magazines, newspaper sand web sites, for others to deploy.
Now combing these blocks, these styles, has to be more fluid, and adaptable. The result can seem very simple, partly because if you make it complicated you’ll find the layouts don’t work at certain sizes.
With Treesaver you just have to think ahead more, and provide fall-backs when the first component won’t fit. You have to think, “if this, then . . . .” It’s algorithmic design. Web pages have had some of this since the first PHP and ASP dynamic pages.
The Treesaver Javascript framework carries these rules, and sorts out of the pages for different operating systems and screens. And while I think the hard work was getting the basic idea out there (and hurrah! to Filipe for pushing it out as open source), there is much creative work left to make the designs that Treesaver is capable of.
The idea here is create a great reading experience that works on all platforms. That by itself can be a forceful alternative to the cluttered, junky and irritatingly slow formats that deliver stories (text or pictures) on the web.
The first-generation “retail” themes are now available at treesaver.net. One of these themes is actually designed by Filipe, and can be hooked up to an RSS feed. Treesaver will eventually be hosting customer sites.
Another template library is an extension of a Robb Rice design at Ready-Media. And we’ll be offering these pre-designed packages on both sites. And of course of this looks and reads a lot better, because of the fonts from Webtype.com. As Patric King guess on Printmag.com, there is a little eco-system coming together here.
This eco-system is going to be a good business, an international design business. We are going to be busy improving the platform. As we move toward grids for richer media, such as video and animation, we have to write new rules into the code. So we’ll always be working on the code one version ahead.
At the end of the day it’s rewarding for a publication designer to connect readers with writers, viewers with photographs, and editors with an audience, creating narratives along the way. I’m getting pretty happy about this. We may not be saving the world (the name was intended to be ironic, of course), and it is true our first clients are all-digital publications, so there have been no ecological benefits so far!
People are already moving to digital publications, and if we can provide some of the readability of print, we doing good. Yet I hope that we also help great print publications to stay in print. There are big advantages of each, and I believe printed magazines and newspapers will be around for a while.
Nonetheless, Scott said recently that he wants a T-shirt that says, “I Save Trees.”