Home » HTML5 et al » Treesaver: an HTML[5], Javascript and CSS based universal platform for dynamic publications on the web

Treesaver: an HTML[5], Javascript and CSS based universal platform for dynamic publications on the web

Prerequisites (June 2015⇒):

Welcome to technologies trend tracking for 2015⇒2019 !!! v0.7
5G: 2015⇒2019 5G Technologies for the New Era of Wireless Internet of the 2020’s and 2030’s
Networked Society—WTF ??? v0.5
Microsoft Cloud state-of-the-art v0.7
• Service/telco for Networked Society
• Cloud for Networked Society
• Chrome for Networked Society
• Windows for Networked Society

Opportunity for Microsoft and its Partners in FY17:

As progressed since FY15:

Or enter your email address to subscribe to this blog and receive notifications of new posts by email:

Join 95 other subscribers

2010 – the 1st grand year of:

3.5G...3.9G level mobile Internet
• system-on-a-chip (SoC) and
reflective display technologies

Why viewed most (till Feb 1):

Marvell SoC leadership
Android 2.3 & 3.0
Hanvon's strategy
Welcome! or Home pages
Treesaver (LATELY #2!) and
IMT-Advanced (4G)
MORE ON THE STATISTICS PAGE

Core information:

The overal initiative ended as you could see from below:

A big move for me [Roger Black, May 10, 2013] (the last post on his blog)

imageThis summer, I am moving to Hong Kong. And I’m changing, after 25 years from consulting to working for one specific, expanding publication group: Edipresse Asia. With publications in China, Taiwan, the Philippines, Thailand, Indonesia, Malaysia and Singapore, Edipresse Asia has a small and talented team led by Barrie Goodridge, CEO and Sean Fitzpatrick, group editorial director.

Since print is still robust in this booming part of the world, they are getting a chance to get the digital transformation right. And, I’ll get a chance to do what I’ve always loved doing, design magazines.

Nomad is dead as of June 11, 2012???: https://twitter.com/nomadeditions

image

As of Oct 17, 2013: https://github.com/Treesaver/treesaver/releases

Home · Treesaver/treesaver Wiki · GitHub [Last edited by Andrea Campi, Oct 21, 2012]


What Treesaver is not

  • Complete: The framework is still quite immature. There are still a lot of bugs that need to be fixed.
  • WYSIWYG: Treesaver is not designed to provide designers with the ability to create pixel-perfect layouts — quite the opposite in fact. Treesaver is designed to give designers the ability to create general design guidelines, which are then used to quickly construct a layout appropriate to the current browser and device.
  • Suited for all content: Treesaver currently works best with simply-formatted text and images. Complex tables, videos, and JavaScript widgets might work, or they might not. Once again, the framework is not yet complete.

As of Oct 17, 2013: Filipe Fortes [Linked in]

Filipe Fortes’ Experience

  • Technical Lead Flipboard Inc.
    October 2011
    Present (2 years 1 month) San Francisco Bay Area

  • CTO Treesaver
    January 2009
    October 2010 (1 year 10 months) Greater New York City Area

Filipe Fortes’ Projects

      • treesaver.js
        April 2010 to October 2012
        Team Members: Filipe Fortes, Bram Stein
        JavaScript framework for creating magazine-style layouts that work on mobile, tablet, and the desktop. A fast, small library that uses standards-compliant HTML and CSS to provide app-like reading experiences in the browser.

image

Update: SAVORY IS UP! [Savory blog, Sept 5, 2012]

Well, here it is. Savory. The new platform for digital publishing. It’s built with Treesaver®, the rule-based HMTL5 responsive and algorithmic layout engine, and managed by a powerful CMS  from ZephirWorks.

Savory is a new kind of web hosting service. Its page-based design is tuned for publications—regular collections of stories by different writers, photographers and artists. Savory puts the narrative first. It’s like a tablet-smartphone magazine app meets a blog hosting service.

Unlike apps, it’s on the web. The same Savory publication can be read on a phone, a laptop, a tablet—on any device that has a browser. You can share stories on the social networks, or e-mail links to friends.

Savory goes beyond the linear story river of blogs, which are fine for short iterative items and links, but not for an issue filled with different kinds of stories.

And it’s better for publications than a conventional web site.  (Have you ever used a magazine or newspaper web site that is as immersive and easy to read as the printed edition?)

Monthly service is an affordable $49, or €49. This is great for start-ups—or for new efforts at established publishing companies. The fee is charged monthly like a subscription, but there’s no contract.

At launch there are two complete design themes—one for magazines, and one for news publications. More features, and new themes will be introduced in coming months.

So check it out. Savory is ready to serve your publication. We look forward to working with you.

and here is a sample publication (click on the link or the below image to check for yourself):

Treesaver finally became commercialised? I hope so!
End of the update

The http://treesaver.net/ site became “real” on Jan 25, 2011 with the above image on its home screen and with the below “Welcome!” text:

Design for reading

Treesaver is made for people who like to read. It’s a platform for narrative experiences— with text and pictures and video. Treesaver divides content into pages, automatically adjusting the layout to the size of the screen. Almost any screen.

Treesaver works on any device that has a web browser: Desktop PC or Mac, notebook, netbook, iPad and iPhone, Android and other smartphones and tablets. It’s produced with web standards—HTML, CSS and JavaScript. You can even embed video or Flash in it, just as you can with any web site. There is no app to download. No plug-in to install.

The above image is in fact showing the Top Stories (Top Headlines) section of the real-time news feeds from the Associated Press in a significantly more readable form. As a current [Feb 1, 2011, 8:15 AM GMT] content here is the Top News part of the Technology section as seen via Treesaver on a 22″ monitor (only the essential content page is shown here, not the whole screen — see more on that further below when the complete reading experience in this given case is discussed):

as well as via the particular Associated Press site (the essential source) at the same time:

AP Top Technology News At 8:36 p.m. EST

Baidu net income surges in 4th quarter
NEW YORK (AP) — Baidu.com Inc., which operates China’s leading search engine, said Monday that its fourth-quarter profit more than tripled to surpass Wall Street expectations, sending shares higher in after-hours trading….

Oracle to pay $46M to settle kickbacks charges
WASHINGTON (AP) — Oracle Corp. has agreed to pay $46 million to settle a lawsuit over alleged kickbacks to win government work….

Stimulus funds help wire rural homes for Internet
EAST BURKE, Vt. (AP) — Up in rural northern Vermont, it took until the 1960s to run power lines to some towns – decades after the rest of America got turned on….

Last Internet provider in Egypt goes dark
SEATTLE (AP) — The last of Egypt’s main Internet service providers, the Noor Group, has gone dark….

In future, cars might decide if driver is drunk
WALTHAM, Mass. (AP) — An alcohol-detection prototype that uses automatic sensors to instantly gauge a driver’s fitness to be on the road has the potential to save thousands of lives, but could be as long as a decade away from everyday use in cars, federal officials and researchers said Friday….

Toshiba returns to black on smartphone chip demand
TOKYO (AP) — Toshiba Corp. said Monday it returned to the black in the October-December quarter thanks to robust global demand for the flash memory chips used in digital cameras and smartphones….

Internet cutoff fails to silence Egypt protests
NEW YORK (AP) — In its effort to silence protesters, Egypt took a step that’s rare even among authoritarian governments: It cut off the Internet across the entire country….

Technology cos. commit funds to Obama program
NEW YORK (AP) — Three of the nation’s biggest technology companies are committing hundreds of millions of dollars to an initiative backed by President Barack Obama to encourage job creation and economic growth by supporting small businesses….

The day part of the Internet died: Egypt goes dark
SAN FRANCISCO (AP) — About a half-hour past midnight Friday morning in Egypt, the Internet went dead….

Comcast takes control of NBC Universal
LOS ANGELES (AP) — The nation’s largest cable TV company, Comcast Corp., took control of NBC Universal after the government shackled its behavior in the coming years to protect online video services such as Netflix and Hulu….

You can compare the readability difference in the two presentations very easily for yourself. When going into the news items themselves the difference is becoming even bigger.

FYI: some of the news are coming to AP news feeds even from blog posts (like the Last Internet provider in Egypt goes dark) on one extreme, while some others as articles requiring many pages (even on a large monitor) and from one or more AP writers on the other extreme (like the Internet cutoff fails to silence Egypt protests in addition to two others shown on the Top News part of the Treesaver presentation via expressive images), with the rest in between. The AP written articles have a sufficiently large collection of media files on their feeds as well (see the complete feed content for the “In future, cars might decide if driver is drunk” article as an example).

Here is the first page of the 3 page (on a 22″ monitor!) “Internet cutoff fails to silence Egypt protests” article as seen on the screen of the monitor:

On this screen image you can also recognize the complete reading experience developed by the designer (i.e. what has been custom built for this particular publication on top of the Treesaver platform): there is a section list on the left, then adjacent pages are also shown on the left and right from the actual page, and finally there is a numbering scheme for the currently visible page of the article as well as a Menu on the bottom part.

[The content of the original Dec 20, 2010 post is coming below with siginificant updates as of Jan 30, 2011] On line journalists in US are already well aware of this revolutionary and high-quality platform, and we have as well two publishers using it. Moreover the Treesaver [“real” site from Jan 25, 2011] software is going to be released as an open-source in the 2nd week of January 2011 “end of next week”, i.e. Feb  4, 2011 (see Filipe Fortes’ response [Jan 28, 2011]), so more and more people will be able to reap the benefits as well as enhance the platform further. What Microsoft was able to achieve first time for The New York Times in 2006 (the so called Times Reader) with a platform specific technology called WPF is now made possible through the current crop of web HTML/HTML5, Javascript and CSS technologies masterfully applied in the publishing platform called Treesaver from the namesake US start-up. Moreover this is the first time we have the possibility to publish to the web in a true print quality without any applications needed to read the content. This is making the publishing/consuming process significantly simpler and more natural.

Want to experience? Go to http://www.publicintegrity.org/treesaver/tuna/ to see the first publication called “Looting the Seas” [Nov 7] from The International Consortium of Investigative Journalists. Change the size of your browser’s window to experience the adaptability if you are using a desktop, a notebook, or a netbook, and go to the same URL on your smartphone’s browser to have an experience of universality as well. You can also use different browsers, down to the old Internet Explore 6 (although in this case you will have traditional web page quality only since that browser has no more capabilities than that) even in the Internet Explorer range alone, as well as different smartphones (with different resolutions etc.).

There are two other reports have been published in Treesaver from ICIJ as well:
Smoke Screen: Multinational Tobacco Firms Target Smoking Controls in Developing Countries [Nov 16]
The Truth Left Behind: Inside the Kidnapping and Murder of Daniel Pearl [Jan 20, 2011]

The most important thing to understand from these first experiences is how much the design behind these reports was helping the flow of a story to grab and keep the reader’s attention. Treesaver as a presentation technology has made extremely simple for the reporters and journalists to submit their content while the designer of the publication has been put into an almost exclusive role of assuring how to grab and keep the reader’s attention for all types of publications of similar kind of storyboards — in the case of the above ICIJ reports the chosen investigative character of all the publications of similar kind, so called long-form investigative journalism, a 5,000-word piece . This also means that there is no per story web design as such but everything is designed well ahead for the kind of stories to be included into each issue and the whole publication as well. (To compare this with the usual pactice see — for example — Jane Stevens’ tutorial section on Assembling Your Story [Jan 19, 2011] from the Berkeley Graduate School of Journalism).

The technology part

Information about the technology is after the launch team part of the http://treesaver.net/about/ page (more technology releated / availability infomation on Filippe Fortes’ http://treesaverjs.com/ site). From this the most important thing is:

CMS & Web Server Requirements

Because Treesaver’s layout intelligence runs on the user’s browser, there are no special requirements for any server that wishes to host Treesaver content. The Treesaver Javascript files are small (under 50K total) and can be served from any static host.

Treesaver’s native content format is HTML, and all layout is done through a combination of HTML, JavaScript, and CSS. Here is an example of the HTML required for a minimal Treesaver article:

<!doctype html>
<html>
  <head>
    <title>Treesaver Sample</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="treesaver.js"></script>
  </head>

  <body>
    <article>
      <p>The quick brown fox jumped over the lazy brown dog.</p>
      <p>The quick brown fox jumped over the lazy brown dog.</p>
      <p>The quick brown fox jumped over the lazy brown dog.</p>
    </article>
  </body>
</html>

Treesaver has minimal base requirements for formatting content. In the example above, the entire article consists of three paragraph tags. Treesaver imposes a few requirements, one of which is that all article content must be contained within an <article> tag (any content outside the tag will be ignored).

Because all of Treesaver’s formatting is handled by JavaScript code, integrating Treesaver with a Content Management System (CMS) is relatively straightforward. We have handled the integrations quickly.

Multiple Image Sizes

An image with multiple= An image with multiple fixed sizes

Multiple image sizes are used by Treesaver’s sophisticated layout algorithims in order to take full advantage of the user’s screen real estate. Desktop users do not have to settle for tiny images that lack detail, and mobile users are not stuck waiting for huge images to download.

A typical Treesaver site might use four or five image sizes:

  1. Thumbnail (e.g. 80px wide)
  2. Single Column (e.g. 300px wide)
  3. Two Column (e.g. 600px wide)
  4. Three Column (e.g. 900px wide)
  5. Four Column (e.g. 1200px wide)

Obviously, the exact number and dimensions of the crops vary per design. Most CMSes already create multiple versions of each image, and adding the required sizes does not require much effort.

The designer’s part

Treesaver’s universality (from “Black and his digital assault” [Dec 14], emphasis is mine) means that it is for:

well-designed digital magazines or newspapers that can be read on any device that has a browser—smart phones, tablets, laptops and desktop computers.

Dynamic publications (vs. digital publications) made possible by Treesaver means (from El fin del mundo [Dec 14]):

… ability to adapt layouts to different screen sizes—and to integrate live feeds and updates

as well as (from South to Southwest [Dec 23], emphasis is mine):

… with Treesaver we can design not just containers for content feeds, but dynamic publications. Dynamic because they can take live feeds (like the AP news demo [seen in the topmost part of this post] Filipe Fortes has designed), and dynamic because the design adapts to different screen sizes, using algorithms to adjust the relationships between text and images and other elements, so that the resulting pages are well designed, and so that a reader can easily follow the flow of a story.

It’s all about flow. Mihaly Csikszentmihalyi describes “flow” as the state of consciousness that takes over when you are doing something you know how to do. He notes that then people become absorbed in their work, and focus completely on the work, not themselves.

I think of flow as that state of mind you enjoy when you are on the road, or designing a newspaper or a web templates and then watching them in action. This feeling has moved to real time with Treesaver. It’s much harder design than anything I’ve done. It’s like driving a 911 really fast down a great highway that you’ve never been on before.

The result can be a wonderful dynamic flow for readers. (See Nomad [immediately below].) The sense of satisfaction that I am getting when I see this work is not so much like finally getting to the end. It’s like starting out on a new trip.

The above quotes are from legendary Roger Black, the designer and business visionary partner on the Treesaver venture (more details about him are in the “More information section” below, where a video recording of an extremely important session for on-line journalists is indicated as well) .

Treesaver as a company is offering not only the platform (open-sourced) but the value-add services as well (if needed) which is showing the kind of design work needed for the platform:

Design and strategic consulting [Jan 25, 2011]:

Open source code allows publishers to create their own Treesaver products. Our firm supplies design solutions built on the platform for different kinds of publications—from feature magazines to B-to-B news sites.

We can create a custom, branded HTML5 app for a very reasonable fee.

And we’re now adapting Treesaver code to make hybrid applications for iOS and Android devices so that publishers can distribute through networks like the Apple App Store and the Google Android Market.

We provide training and technical support. And we can adapt Treesaver code to help integrate it into editorial workflow to create a dynamic publication.

Treesaver’s partners also collaborate with media companies and other businesses for strategic planning and product development. A complete Treesaver technology transfer can take place, with a client acquiring not just the open-source code, but also the know-how to continue designing and developing on the Treesaver platform.

And here is some more information on the design issues:
Center for Public Integrity’s HTML5 product aims to make long-form journalism readable on any device [Oct 29]

Is it possible to enjoy long-form investigative journalism in a digital age without a fancy tablet? A 5,000-word piece can be tough to get through on an ad-supported website. And while the experience on iPad apps is promising, an app is a costly investment — or investments, in a world with multiple incompatible platforms — for a news organization to make.

The Center has a new HTML5 product that gives users an app-like experience in a web browser. The project is part of a new digital initiative at the Center, funded by $1.5 million in grants from the Knight Foundation.

I spoke with Filipe Fortes, the developer of Treesaver, about what his product means for long-form journalism. “The idea is to be reader friendly,” he said. As an example, he pulled up a website of a large regional newspaper and had me click on a story. (No need to name names — the experience would have been similar across most newspaper sites.) “It’s really kind of hostile to the reader, I feel,” he said, pointing out all the ads and social media boxes that distract from the text of the story. “I think that’s why people are loving the apps,” he said. “It’s just a chance to finally read again. There’s a lot of cool things happening on apps, but people on desktops are missing out.”

Those distractions Treesaver is trying to spare us from are also what monetize the content — but Fortes says he’s not against advertising, just how we display it with the content now. By lowering the bar to the content (as he puts it), by letting users easily flip along, fewer, cleaner ads can be monetized more effectively. He showed me a mockup of a Nomad magazine that runs full page ads between pages, similar to an iPad app. “If you can get people coming in from a blog or Google and you get them to read three stories [by flipping along],” he said, “Congratulations, you just tripled your revenue on that user.”

Fortes is presenting Treesaver at the ONA conference this afternoon. He says he’s eager to work with more news organizations, and is in talks with several.

Since Dec 3 we have also the Nomad Edition weeklies as the best examples of this early phase of experimenting with the Treesaver platform (the u+me coming later).

See Former Newsweek Honcho Mark Edmiston On The Mobile Mini Mags He Plans To Make Profitable [Nov 2] (emphasis is mine):

Nomad Editions will publish niche weekly mini-magazines for mobile phones and tablet devices for a 12-month fee of $24 per edition (or the equivalent in three-month installments). Each editor will get 5% of the subscription revenue generated by each issue, and the writers will split a collective 30% of the subscription revenue per issue. In other words, the more subscribers they can attract, the more money they will make.

as well as Ex-Inc. Editor Joins Digital Startup Nomad Editions [Dec 16] (emphasis is mine):

The new custom division will launch two specific content areas in 2011: health and sports. With each custom digital edition, Nomad will partner with corporate sponsors to produce customized ads, editorial and sponsor sections in addition to original content.

While the company officially launches in January, Nomad debuted three themed digital editions this fall: Real Eats: Stories Behind Food; Wide Screen: Inside the Movies That Matter and Wave Lines: Your Brain on Surfing. A fourth, u+me: Voices Behind Videos, will launch in January. Each edition is a digital publication designed specifically for reading on a smartphone or tablet with a 20 to 30 minute reading experience.

There is also the possibility to see the first issues as demos:

Video presentation

Here is a last week interview with the platform’s CTO, Filipe Fortes (till 11:40 the content is not-technical at all):

Scobleizer | 2010.12.15. | Here Filipe Fortes shows me the HTML 5 technology that he developed to display publisher’s pages in a way that looks beautiful. We discuss how the Web is fighting back against apps designed only for the iPad, like Flipboard.

See also Scobleizer’s post Treesaver shows HTML5 can hold its own against Flipboard-style design [Dec 15] (Flipboard information is here).

Some important points from this interview:

– Treesaver as a company works just for publishers. Several demos in the beginning, one them is on the huge monitor of the reporter, Robert Scoble (Scobleizer).

– [3:00] Loading the next article when the user is on the last page of the current article. Also do offline caching. A Javascript library is behind which will be open-sourced (aiming for second week of January “end of next week”, i.e. Feb  4, 2011 (see Filipe Fortes’ response [Jan 28, 2011])). A designer says, for example, let’s design a page like this 4-column this and this, and that’s it. … The system goes and on the fly chooses the best one [representation from that].

– [5:05] A long discussion how with such an approach the web “can be saved”. For the users it means that the news comes dynamically from different sources and it is possible to avoid searching for an app when a news article arrives, as well as on the publishers’ side the advantage of using the web by playing in the web ecosystem (different CMSs etc.). These things are not true when an app needed.

– [7:40] The example of one of the first clients, called Nomad Editions. Then discussion why the web does not look like this today. … They are currently using four image sizes, this happens automatically in the CMS. … Pretty much any CMS does that (e.g. Flicker). … Nomad has their own custom CMS, some other clients are using just Drupal. When Treesaver will release open-source it will probably do a little quick WordPress plug-in. …

– [11:40] Some sample issues of Nomad are on the webstores. … The content could certainly be taken to an app, which is on the webstore. Nomad actually will release soon a native iPhone app which they can charge for. That basically hosts the web browser within there and still uses the same content. …

– [13:30] What Flipboard cannot do on the web? … the publishers’ fear loosing the control.

– [16:00] Filipe Fortes’ background: … Microsoft … WPF … The New York Times Reader [April 28, 2006] (later replaced by an Adobe based copycat) … computer science, human-computer interaction (HCI), interface design, MS developer platform, layout APIs …

– [17:30] What could do back then [with WPF] which you couldn’t do in HTML5 [now]? It’s kind of funny how far HTML5 has come along. Part of it is that you still got different browsers, .. you could almost do everything in the browsers but not across all the browsers. Still got IE7 holding you back … On IE6 we use a technique that is called progressive enhancement. Because I have limited development time we show a kind of traditional scrolling view, basically as any page looks on internet today. … Back to the question of what’s left of WPF did that the browsers can’t do: probably some things around graphics like, … write to the pixel shader … some typography is missing … but honestly for certain classes of apps it’s there, and in places where it is not there there are trade-offs that are worthwhile in order to … we would all like to have this and that but they are not worthwhile for a market share of 5%.

– [19:25] So why build apps there? … Why not just build web pages for end-users? … other than payment? … I think it is distribution and payment. … Some technologies are also which does not work in the browser, like accessing the camera …

– [21:58] Are you excited about the web? Certainly … I’ve been doing websites since 1995 at the high-school. …A lot of Javascript and CSS. HTML5 is like a tricky name. …

– [23:22] What’s your business? … we are working with publishers who want to go and make new experiences … custom work. Pretty expensive? … It is on the same order of magnitude as doing a normal web server design and work on the CMS side is basically the same thing as well. … But what we are really building up here is as we learn is a set of templates. So then you as a publisher basically choose from a whole bunch of templates we have, customizing with your existing developers and then use that to deploy it. And obviously we will be open sourcing it. … But we are still playing around with models here. There is lot of questions how make sure to take advantage of what is available out there. … When we are going to see the open source? Goal is probably second week of January … I have to write a lot of documentation at first. … And we are looking forward to collaborate with people in the community. … Right now our dev team is myself and I found this kick-us guy in Denmark but you know he has a kind of full-time job …

– [26:02] More examples: Wave Lines, a kind of weekly magazine about movies …

– [27:25] Anything else we need to know where is the web going? … … Everybody except Apple has a lot of incentive to make the browser … You will see continued innovation here … continued diversity of devices … … [35:30]

More information:

on the related past

Developing a Windows Presentation Foundation Application [April 21, 2006] a video record of Filipe Fortes’ presentation on MIX’06 as a program manager for WPF at Microsoft:

Windows Presentation Foundation (formerly code named “Avalon”) is Microsoft’s new graphical presentation technology, with support for advanced typography and layout, rich media integration, and vector and 3D graphics. WPF allows you to create next-generation user experiences that can extend from the browser to the desktop. This developer-oriented overview shows you how to leverage existing Web content to create richer, more productive users experiences anywhere from existing Web sites to users’ desktops.

Filipe Fortes, Microsoft

Filipe Fortes joined Microsoft in 2002 as a Program Manager on the Avalon team, where he specializes in the intricacies of text and document layout. He holds an MS in Human-Computer Interaction and a BS in Computer Science from Carnegie Mellon University in tropical Pittsburgh, Pennsylvania.

Times Reader – Exclusive Screenshots Of As Yet Unreleased Microsoft App [Aug 31, 2006]

Times Reader and offline Silverlight at Mix07 [May 2, 2007] to show the real change in web capabilities over WPF and Silverlight in the last 3 years:

Fortes talks about magazine publishing through a WPF Reader, with a more intensively visual appearance, embedded video, and community features like most popular articles, most popular ads. He is also saying that typical web content still lacks the sophistication that print provides (think fashion images, carefully designed text). I find this thought-provoking: is the Web really so bad for this? Clearly this is impossible for naked HTML, but when supplemented by Flash and/or clever CSS?

on the current achievements

Meet Treesaver, a New HTML Magazine App [Aug 11]

“Black and his digital assault” [Dec 14] starting as:

1. There seems to be a revolution in design and publications. All-things digital appear to be taking over more traditional media. Paper seems to be démodé. How do you think the new generations will aproach to a newspaper or magazine in the near future?

The change is caused by the proliferation of platforms for content. The iPad is the most famous of these, but the web, of course, is astronomically bigger. Print may be out of fashion now, but the real challenge for that old medium is the publishers’ ability to rethink their business models.

The next crop of publication designers will have to move away from “page design” and toward design systems, where pictures and text are arranged by a set of rules followed by computers, and adapting the layouts to fit a variety of platforms and screen sizes (and paper sizes). We’ll need a new breed of dynamic designers to create dynamic publications.

An evening with Roger Black [Oct 15] for a really good introduction of Filipe Fortes’ partner in the Treesaver venture:

For more than 35 years, working with magazines like Rolling Stone, for newspapers like The New York Times and web sites like MSNBC, Roger Black has been developing ways to communicate content more effectively.

Recently he completed redesigns of the Scientific American (both print and online), and is consulting on the design of MIT’s Technology Review web site.

His teams have redesigned Reader’s Digest, Esquire, The Nation (Bangkok) and the Los Angeles Times, to name a few. Last year he redesigned The Washington Post.

Black is now working with a major new digital content group, Nomad Editions on its launch, scheduled this fall. Nomad is the first customer for Treesaver, an HTML5 app that presents web content in pages that adapt to every screen size. Treesaver is being developed for Roger Black Studio by Filipe Fortes.

A partner in Ready-Media (a new template-based design service),  Font Bureau and Danilo Black, he works from a small office in New York and has homes in Texas and Florida. Black is a recipient of the distinguished alumni award from the University of Chicago.

ICIJ’s “Looting the Seas” Debuts in New Treesaver E-reader [Nov 7]

ICIJ’s just released project, Looting the Seas, on the black market in bluefin tuna, can now be viewed in Treesaver, a new e-reader designed to make long-form journalism easier to read on digital platforms.

ICIJ [The International Consortium of Investigative Journalists] and its parent, The Center for Public Integrity, plan to use Treesaver regularly to showcase major investigative projects. Let us know what you think!

Center for Public Integrity Introduces New Digital Platform [Oct 29]

The Center for Public Integrity, one of the country’s largest nonprofit, nonpartisan investigative news organizations, is partnering with designer Roger Black to launch the new Treesaver® digital platform that will make its long-form stories more readable on digital devices.

Treesaver uses HTML to create an e-reader experience for consumers that formats the news to any size screen — from a desktop computer to an iPad, iPhone, Kindle, Android phone, or Blackberry. And unlike most e-readers, the technology offers stories with a full multimedia complement of photos, videos, audio and Web links. Even better, Treesaver requires no “app” download, which can cause annoying delays.

The Center will be the first news organization in the world to deploy the technology, using it to publish a major investigative report November 6. The organization plans to use Treesaver regularly in the future.

Treesaver points the way to a richer, app-less future [Nov 3]

I had a great time at the Online News Association Conference

… like at most conferences, the best stuff happened in the hallways and bars. But, there was one session I sat in on that, my own not withstanding, was by far the most thought-provoking I’ve seen in some time.

It was basically a demo for Roger Black and Filipe FortesTreesaver, a soon-to-be-released (and open-sourced) design platform …

I’ll give a more detailed demo below, but for those with attention deficit, here’s why Treesaver so fundamentally changed the way I think about news design:

  • Unlike most other auto-design mechanisms I’ve seen, this one actually works, retaining design elements while reconfiguring them by device and need. This isn’t just a scaler — it reorders and resizes.
  • Up until now, there have been two primary modes of digital publication design: Either port the static print product; or flow the elements into a web-centric version that ignores the way humans have been reading for centuries. Those are polar opposite approaches. This is the first technology I’ve seen that culls the best of both. (I stress technology, because there are individual sites that solve this, but not in a way that scales outside their property.) If you’ve ever spent much time mucking with websites, you’ve probably been frustrated that when the right rail runs out of content, the rest of the page won’t naturally wrap the copy to take advantage of all the columns — this does.
  • It is going open-source. Treesaver plans to sell custom design implementations. But any web publisher can take advantage of it. (I’ll address the question of “will they?” below.)
  • Spending time with Treesaver highlights how even really cool digital implementations like  Flipboard interrupt the reader experience.
  • Although there isn’t a lot of it to see in the demos to date, Roger talked a good bit about using Treesaver to create better ad units that, wrapped in relevant content much more akin to a magazine layout, can better engage readers/buyers.
  • Dare we hope that a  better reading environment might undo some of the bad writing practices that SEO and web design have engendered?
  • The current app ecosystem is increasingly inefficient, causing publishers to have to create apps not just for each platform, but for variants on it. Just today, in a post on Apple’s apps,  John Gruber said:

The whole point of Apple’s success with iOS has been the opposite of “write once, run anywhere”. It’s more like “write a version that is specifically optimized for this particular device”.

He was praising Apple, but I see that as a major problem. I know developer friends who do too. This is by no means the deciding blow in the apps vs. mobile web battle — even Nomad Editions, one of the two earliest demos of Treesaver will have iPhone and iPad app versions (although, I suspect that like our Pegasus News app, they will be a simple portal into a webkit browser). But as we see more true “write once, run anywhere” implementations, and robust HTML5 apps like  37 Signals’ new Chalk, the uber-app will increasingly (but not exclusively) be the browser.

I’m not saying that these guys have it all figured out: It was clear that they’re still just scratching the surface in terms of how to deal with advertising within this platform. The commenting implementation is also yet to be seen.

I’m sure that like Roger Black’s print template design business,  Ready-Media, Treesaver will ignite a  bout of handwringing over whether good, readily available design templates will kill innovation and the design profession. (It won’t, and there are myriad content-rich, crappily designed publications and sites that will benefit.) Also, the mocks they show are, intentionally I imagine, devoid of a lot of the navigational shouting that most traditional media sites do to get  you to OH PLEASE GOD CLICK ANOTHER PAGE OR BETTER YET A HUB SO I CAN SQUEEZE ANOTHER .00001 in CPM OUT OF YOU!!!

Which begs the question as to how quickly media companies will adapt the Treesaver technology. We media moguls are a proprietary bunch, and while we hate writing checks, we love having stuff that is all ours. Worse, by its nature, Treesaver clings to standards of good design that our industry left behind in the CompuServe era. While a flexible, all-device design might be good medicine, many a publisher has been known to skip the cough syrup for an intoxicating, self-indulgent cocktail.

ONA10 –The Next Revolution for Web Design [Oct 29]: video recording of Roger Black’ session called The Next Revolution for Web Design, Roger Black (Roger Black Studio) as the major speaker and Filipe Fortes (Treesaver) as a demonstrator starting at 12:50 (Fortes from 20:25 to 31:10) and ending at 43:50, then Q&A ending at 58:10. Roger Black is giving an invaluable designer / on-line newspaper business perspective for this platform. Quite important to watch !

What you missed: Top three design highlights from #ONA10 in D.C. [Nov 2]

From Thursday through Sunday, about 900 journalists from throughout the United States and abroad joined in D.C. for our annual explosion of online news geekery, otherwise known as the Online News Association 2010 Conference. Unlike your typical journalism conferences, ONA was flooded with fresh ideas on design, data, multimedia, revenue and distribution. These are some of the highlights that pertain to online storytelling.

2. Treesaver’s web design “revolution”

Legendary Roger Black gave a session on the next revolution for web design, which was really more of a pitch for his latest project, Treesaver. Interfaces for Treesaver designs are based on print-style column layouts with big photos and clean text, rather than the typical column/sidebar combo used by most news orgs for displaying news.

From the student newsroom:

Treesaver runs like a webpage as opposed to an application, Fortes said. There is nothing to download, which means users can do the same things with this program as you can with with a regular webpage. This includes opening multiple tabs for multiple stories, just like you could do in a normal web browser.

Although I wouldn’t exactly call it revolutionary, I would say that it represents a shift in how news designers could start approaching web design. There’s a lot of really mindblowing print design out there, but mindblowing web design for news isn’t happening yet. This could be the start of a revolution, although not an ideal solution by any means.

Tweets (the good and bad, you judge for yourself):

  • Treesaver: One UI, one code base, usable on multiple platforms, full-screen ads. (via @yurivictor)
  • Not seeing Treesaver as a revolution in web design. Seems gimmicky and limited in application. (via @jeffsonderman)
  • Reminding us how beautiful #html can really be. With @treesaver. “It’s all about lowering the barrier of entry to reading.” (via @meg_e_martin)
  • “If @trsvr is as clean and simple to implement as demo appears, could revolutionize reading on all online platforms.” (via @mikeorren)
  • “So… Treesaver, not convinced at “revolution” aspect. Reminds me of Readability with extras.” (via @slongenecker)

ONA10: It’s a wrap [Nov 4]

on Nomad Editions

Starting up [Roger Black, Jan 25, 2011] (emphasis is mine)

… My memories of earlier startups are vivid, and trigger dozens of anecdotes. There was the time the late, great Bill Cardozo ran into the art department of L.A., yelling, “Stop the Press!” We all looked up and he explained, “I’ve lost the hash pipe.”

There haven’t been any hash pipes around for a while, and no exhilarating startups. Until Nomad Editions.

Nomad is a group of digital weekly publications, started by an old friend, Mark Edmiston, and the first client of Treesaver. With Treesaver, they’re available on any device that has a browser. (And an iPhone app has been submitted to Apple.) So far there are three titles, Real Eats, Wave Lines and Wide Screen—each with original content, focused on a vertical topic, guided by an entrepreneurial editor. Two new titles have been announced and there may be a total of eight by mid-year.

Edmiston, publisher of Newsweek when I was art director there in the mid-80, has started a number of magazines, was on hand for the creation of AOL, and built on his experience to become a successful investment banker in the media sector. This was a good vantage point to watch the changes in the publication business, and he’s drawn some conclusions. While he hasn’t said as much, he clearly thinks the old way of doing magazines won’t work any more. Nomad’s strategy breaks with familiar models both in print and on the web, in a number of ways:

  • Nomad is all digital. There’s no print.
  • The titles are filled with stories—narratives. Rather than the hyperlinked array of short takes, this is stuff you can read.
  • Content is original, not aggregated. There are no distracting, “most read/most e-mailed” lists. Just text and pictures, and soon, video.
  • Picture stories, rather than just portraits and still-life pictures,  are a key part of every issue.
  • Unlike most web sites, the Nomad weeklies are pushed as complete issues every week, without iterative updates.
  • The main revenue comes from subscriptions, not advertising.
  • Editors are partners. Each gets a significant revenue share.
  • Contributors, writers and photographers alike, are compensated (and incentivized) from subscription revenue—30 percent off the top.
  • Rather than a conventional launch promotion, Nomad is relying on social media, the 21st-century word-of-mouth, to find subscribers.
  • The launch budget of each title is zero-based. Constraints put more pressure on the writers and editors to connect quickly with readers.
  • It’s cross-platform, available on desktop, laptop, tablet and smart phone browsers—as well as hybrid iOS apps (hybrid meaning native apps with browser inserts).
  • New technology is being deployed. Treesaver is getting its debut, aided by a new content management system, Petr Van Blokland’s Xierpa.

The sum total of all this innovation is big risk. The fact is if that the old models are broken, we’re going to have to try to models, and there may not be time to test them all incrementally. A conventional mind might think that there are too many mold-breakers to expect them all to work.

Mark believes that real risk in this business is if you don’t break the mold. The old ways aren’t working any more. To replace the media eco-system, you need a new system.

If Nomad works, the idea is vastly scalable. Rather than one big startup like Murdoch’s Daily, Nomad is a lot of little startups. My hunch that at least some of the Nomad titles will find their audience. And at least some of the strategy will work. Without spending a lot of venture capital, and without the presence of the VCs that always come along with the money, Nomad should be nimble enough to tune the strategy in the coming months.

I’ve never learned so quickly as I do at a startup. (And as I write this I’m surrounded by Nomad editors and staffers, since the launch team is working out of the studio.) The risk gets your attention. A mistake rings home quickly.

And success . . . well, time will tell.

Nomad Editions Announces Official Launch; Releases First Four Editions of Digital Weeklies [Jan 26, 2011] (emphasis is mine)

Nomad Editions, a new media company producing first-of-their-kind digital weekly publications designed exclusively for mobile devices such as the iPhone, iPad and other platforms, today announced its official launch—marked by the debut of its full digital platform and the first complete wave of weekly titles—Real Eats, Wide Screen, Wave Lines and BodySmart.The response generated by the content released in advance of this launch has been highly positive, with several thousand subscribers already registered for the Nomad Editions platform ahead of official launch date.

In addition to the official launch of its first four titles, Nomad Editions has announced it will be working with National Geographic Traveler to prototype a digital weekly based on updated archival material and photography. If successful this new product will be a brand extension of National Geographic Traveler and marketed through Nomad Editions’ newsstand.

Real Eats – Stories behind food, edited by Sean Elder whose work appeared in New York, the New York Times Magazine, Details, Vogue, Elle, Men’s Journal, National Geographic, Premiere, Gourmet, Food & Wine, Redbook and Glamour. Content debuted on Dec. 3, andrecent stories include three men on a mission to find the best barbecue below the Mason-Dixon line, one man’s dream of bringing the bagels of his Brooklyn youth to the adopted land of his grandparents, and a modest proposal for bringing reasoned discourse to our society through the dinner table.

Wide Screen – Provides insight behind the movies that matter, edited by Glenn Kenny, a renowned American film critic who is the former editor of Premiere magazine and contributing writer to many publications. Content debuted on Dec. 8, andrecent stories include a two-part roundtable from a roster of top critics on the best films of 2010 and what to look forward to in 2011, an appreciation of Joan Fontaine’s greatest film, and an exploration of whether endless access to selective cinematic riches makes geeks of us all.

Wave Lines – All you need to know about surfing and the surf industry edited by Jon Cohen, a trusted surf blogger at ESPN.com. Content debuted on Dec. 3, andrecent stories include an inside story of coming this close to winning a major surf competition, a report on how surfers age, and an investigative report on the battle over a prime piece of surf real estate in Baja.

BodySmartWill be launched on January 26. It will offer, in easily accessible form, with great writing and illustration, the latest conclusions validated by science for maintaining your health and fitness. In particular, BodySmart will focus in on intelligent weight loss, an area where new science has a lot to say and where much of the conventional wisdom is wrong.

Readers can register at NomadEditions.com to receive unlimited access to all Nomad Editions for 30 days. After this initial trial period, readers can subscribe to one or more titles for $6 per three month period. Each Nomad Edition covers one niche subject and contains approximately 20 to 30 minutes worth of content for the average reader.

Our first Nomad Editions! [Dec 3]

Consider how many different elements of Nomad are new:

–our business model, which relies on sharing revenue with our creative contributors, including writers and editors

–the technology underlying our weeklies—Treesaver—which enables them to appear on any mobile device

–the editorial form of our issues, which is very different from that of a print magazine or a website

–our website and content management system (CMS), which are critical for delivery of issues to our readers

None of these things has been tested before, and naturally there have been a few bumps along the way here at Nomad HQ in New York

More Milestones at Nomad Editions [Dec 10]

For one thing, the debut issue of “Wide Screen,” our movie weekly, was published on Wednesday.

One of the pillars of Nomad is the idea that there are many talented people out there, versed in journalism and passionate about particular subjects, who are slowly being left high and dry by the shrinking of print publishing and the inability of web publishing to find itself a business model that works. Great people are finding it tougher than ever to make a living in the freelance world. Nomad is built on the premise that one solution for these creative people is to share in the revenues of the business they help create. And, although we’re still in the process of proving our business model, we’ve already shown that we can attract terrifically talented people and give them the opportunity to create their own digital publications


5 Comments

  1. I like your transitions and clarity. I have been writing for Ghost Writers for a while now, and they pay me well to write blog posts like this, or articles. I clear $100-$200 on a bad morning.
    Judging by your skill with the english language, you may enjoy doing the same.
    It wouldnt hurt to check them out.Here are the details

  2. I love your transitions and quality. I have been writing for Ghost Writers for a while now, and they pay me very well to write blog posts like this, or content articles. I clear $100-$200 on a awful evening.
    Judging by your skill with the english language, you may enjoy doing the same.
    It wouldnt hurt to check them out.Here are the details

  3. I like your transitions and quality. I have been producing for Ghost Writers for a while now, and they pay me well to write blog posts like this, or articles. I clear $100-$200 on a poor day.
    Judging by your ability with the written word, you may enjoy doing the same.
    It wouldnt hurt to check them out.Here are the details

    • nacsa says:

      This is one of the examples of “Experiencing the Cloud”. Looking into details I see that your kind suggestion is not a free of charge one but would require a $5 initial investment on my side.

      While I am not principally against those kind of things I would not be a supporter of that either. Most importantly my position with blog writing as of today is a different one as expressed in my latest response to another post.

  4. one of the brilliant posts i’ve read.

Leave a comment