Forget the App: Introducing Treesaver#11NTCsee3saver

Nasser AsifAllan BurstynSee3 Communications

Forget the AppIntroducing Treesaver

About See3

We are an interactive communications agency that works exclusively with nonprofits, foundations, associations, and social causes. We specialize in online strategies and campaigns, video production, and web design & development.

See3 uses new media to activate people and advance social causes.

About See3

See3 is constantly looking for new ways to help nonprofits take a next step forward in realistic ways (reasonable costs and bandwidth)

We have no relationship with Treesaver – we just think it’s pretty cool – and we know nonprofits will benefit from it.

See3 - Chicago

See3 – Cairo (more about Cairo later…we’ve got a story for you)

Storytelling is how you show what your org is doing in the world, who you are, and where you’ve been and where you’re going

A narrative ignites human truths and frames your work and the issues you work for

But, the fragmentation of delivery platforms creates obstacles to telling stories

Distribution is segmented and broken up by the diversity of emerging technology

Online Storytelling is Key

So why has it become more difficult for orgs to tell their stories?

Diffusion - devices and delivery platforms have changedEmergence - a whole new class of device – like tablets. This means that orgs’ stories are most often not optimized for these devicesUncharted territory - there is no clear consensus on best practices and no clear option for a “one stop solution”Bandwidth - Raise your hand if your org doesn’t have the budget or resources to create 3 different apps for an annual report (or published research, or periodic publications, or press materials, or journals, or Inertia - Raise your hand if in your heart of hearts you know you can do better than a PDF

Online Storytelling is Key

What Is ?

New platform for reading online that automatically looks great regardless of device

– Uses Standards-Based, HTML, CSS and Javascript– It’s the Web, Not an App

Reduces the cost and complexity of producing content for multiple devices

What Is ?

Content(HTML)

Treesaver Javascript

Engine

Display Output

Output Variables: ― Available space, online/offline, flash/non-flash, mobile device

Your Design Parameters: — Number of columns per article, relative positioning of elements

like pictures, small vs. non-small screen behavior

How Does Treesaver Work?

Traditional Print Fixed Design and Layout and specific distribution

Let’s Get Beyond Print Comparisons

Treesaver Relative Design and Layout

— Always looks great online— Optimized for online reading

Treesaver Is Smart

How are you going to effectively present content to your audience in an increasingly fragmented online media landscape?

There’s an App for that … and that … and that– Mobile Market is Fragmented (Smartphone Marketshare; Source:

comScore)– Android (31.2%), RIM (30.4%), iOS (24.7%), Microsoft (8.0%) and Palm

(3.2%)– Limited to specific devices

What about Flash?– Lack of support – SEO– Doesn’t adapt to different devices

Why Should I Care?

Open Source Project– Don’t need a specialized skillset– No Objective-C

Treesaver let’s you bypass the apps store and the distribution gatekeepers

—You’re the publisher—You’re in charge—You have the freedom

Why Is Treesaver Important?

Post it on a web page

PDFs

Online Document Readers: – Scribd, Slideshare, Issuu

Device-Specific Platforms: – Flipboard.com– Adobe Digital Publishing:

http://www.adobe.com/digitalpublishing/

What Are My Options Today?

Options PC/Laptop Tablet/iPad Mobile

Website Fair Fair Poor

PDF Fair Fair Very Poor

Online Document Reader

Good Not Supported(Flash Based)

Not Supported(Flash Based)

Device Specific/Apps

Not Supported Excellent, if supported

Excellent, if supported

Treesaver Excellent Excellent Excellent

Comparing Options

A See3 Story via Treesaver:Egypt, January 2011

http://egypt.see3.net

Treesaver– Automatic Scaling– Images– Column Behavior– Container Elements

CustomizationVariables

Comparing and Dissecting Treesaver

The content dictates the layout based on device factors within established parameters

Developed a Proof of Concept (POC)– Created a sample layout based on content and

design– Created a stylesheet– Designer and development team worked together

to resolve issues across different screen sizes

Our Process

Triggers for behavior on small, medium and large displays

Show or don’t show TOC or other navigational elements found in the container

Setting Up Articles– Create content HTML files– Create a generalized design based on the column

parameters you’ve established – Place text and images in relative positions– Produce images for target sizes

3-5 optimized images

– Test and retest to optimize display for target devices/screen sizes

The Container and Articles

People/orgs are producing content but they’re struggling to present it in a way that is in synch with how more and more of their audience is interacting with media – and there are cost and learning barriers

ComScore mobile metrix stats from the 2010 year in review

– 31.1% of mobile market is smartphones – Installed base of 63.2mm subscribers– Significant increase in daily mobile media usage

The State of Mobile

In 2010 “smartphones reached 1 in 4 mobile Americans” and 1/3 of Americans access mobile browsers or apps (ComScore Media Metrix 2010 Review)

Realization that mobile is a unique platform and not just an extension of PC based usage

60 million Tablet PCs in 2011, majority Apple(Source: DisplaySearch)

Short Term Apple dominance will become a more diverse market over the next few years.

PC, Laptop, Netbook sales are on the decline

RSS feed, AP News Demo

2011 Mobile Forecast

Next Release– Timing: Approximately Mid-April– Early support for lightboxes

• Video• Forms

– Better image scaling

Other Enhancements Under Development– Functionality for porting Treesaver to App Stores– CMS Integrations

• Drupal Module (http://drupal.org/project/treesaver)• Expression Engine• Wordpress

– Integrating with RSS

Treesaver Roadmap

Free Trials Through Nomad Editions (https://www.nomadeditions.com)

Read our story at egypt.see3.net

Download the code– http://treesaverjs.com/

Contact us to learn more– allan@see3.net– nasser@see3.net

Check Out Treesaver

We’re experts in online storytelling

We know and recognize Treesaver’s potential

We are fluent in the platform

We know that the orgs that are first to the treesaver party will garner the lions share of the “oohs and aahs” and save money/effort/time

Use Treesaver

THANK YOU!