Technology

Treesaver® is an in-browser reading experience that dynamically adapts to a user’s device and screen size. Using web-standard technologies present in HTML5, Treesaver enables innovative, visually appealing column-based page designs that don’t require any additional downloads: all you need is a modern web browser.

Advantages for Consumers

  • Beautiful design that adapts to any device, from mobile phones to tablets to desktop PCs
  • Mobile and offline access
  • User-friendly interface that is easy to read
  • No application download required

Advantages for Publishers

  • Leverage existing assets, servers, and staff
  • Take advantage of new platforms without increased development cost
  • Distribution and billing through multiple app stores
  • Automated design: Content is automatically adapted to each device, no human intervention required

Reading Experience

The first thing users notice about Treesaver is that content is displayed in a magazine-like fashion, using columns and pages instead of a single long scrolling column of text.

Treesaver on the iPad

Treesaver on the iPad

Treesaver’s formatting provides several usability advantages over traditional web design:

Better use of screen real estate

Most websites display the same design to all users, no matter what browser or device they are using. Because these designs don’t take into account the screen size, users on mobile devices must often resort to frequent zooming and scrolling in order to read content. Those with large monitors are left with large blocks of empty, unused space on their screen.

Treesaver and a typical website in Google Chrome

Side by side comparison of a typical news website and Treesaver, in the same size browser window.

Simple, quick interaction

Treesaver splits content up into discrete pages, leveraging a natural metaphor that everyone learns at a very young age. Users advance through pages by hitting the “next page” button, or alternatively pressing their keyboard’s arrow keys. Users with touchscreens can switch pages by simply dragging left or right, as they would in a photo slideshow or other native applications.

Treesaver also makes it easy for users to read more than one story at a time. When the user gets to the last page of a story, the first page of the next story is automatically loaded. This makes it incredibly fast and easy to page through multiple stories without annoying long load times.

Advantages of the HTML platform

Treesaver in Internet Explorer

Treesaver in Internet Explorer

Browser & Device Compatibility

Treesaver on the iPhone

The following desktop browsers have been fully tested, and are fully compatible with Treesaver:

Additionally, the following devices are fully compatible with Treesaver:

Because Treesaver is built upon HTML, it degrades nicely onto legacy devices. Users with older browsers or devices will still be able to read all Treesaver content, although they will not see the same paginated layout. Instead, their browsers will display a simpler, single-column, scrolling layout used by most websites.

Browser compatibility is determined via Feature Detection, not via Browser sniffing, which is fragile and prone to failure when new browsers are released.

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.

Code

Treesaver is an open source JavaScript framework. It uses web standards to dynamically lay out and paginate publications. To start using the code all you need is a basic knowledge of HTML and CSS to create dynamic layouts.

The basic Treesaver site includes the JavaScript, a CSS stylesheet, a resources.html file that contains layouts and a toc.html file that contains the article order. When loading an article the JavaScript fetches the layout that fits your device and contains the most content while the toc.html file lines up the next article for you.