What Makes Fable Possible?

Sara Olson, Marketing Analyst
#Fable | Posted

In the last decade the web has come a long way as a platform for presenting ideas. We’ve moved from plugins and applets to a rich set of tools built on HTML5 and CSS3, all with excellent support from the major browsers (for the most part). Browser makers have also made a huge investment in high-performance javascript runtimes that can handle large volumes of code. Amazing capabilities have been built on these tools: from interactive and animation elements, to streaming video, to full-featured GIS/mapping, to data visualizations. These enabling technologies give us the potential for content that isn’t just a wall-of-text or a pretty layout, but truly engaging on a level never before possible.

Bringing Content to Life with Custom-Built Pages

Bringing content to life always requires a good deal of skill, knowledge, and experience; often one must be an accomplished HTML, CSS, and Javascript developer in order to truly take advantage of this powerful medium. That is exactly what we set out to fix as we started working on Fable. Phase2 has been building websites for 13 years, and we’ve always stood on the shoulders of giants to accomplish great things. Over the years we’ve come to rely on a variety of tools to craft excellent client-side experiences. Tools such as jQuery, Bootstrap, Leaflet, AngularJS, and many others have given developers ways to convey information and enliven content on the web.But we’ve often felt that for some pieces of content, the special ones that need depth and context, the tools weren’t easily accessible, limiting their use to “special occasion” hand-crafted pages only. These custom-built pages are beautiful, can leverage the tools above to build deep and interactive experiences, and can be customized to tell the story exactly as you wanted to tell it. But they have limitations:

  • They require an experienced front-end developer to create
  • They are hard to modify mid-stream, and so often force the authors and editors into a lot of up-front design work in other tools
  • They require a good deal of on-going budget to maintain (in the form of dedicated developers), and so often end up as one-offs
  • They have limited reuse except through copy-and-paste

From our years of building content management systems, creating content like this felt like a step back. We didn’t want to lose the advantages we’d seen develop over the years which allowed users to directly edit and publish content. There is however one great advantage to these pages: many of them are purely static on the server, giving the great benefit of being almost “traffic proof.” That is, you didn’t need many servers to scale them to millions of views since most of the content can be stored in a cache or CDN.

Fable to the Rescue

This was an interesting situation for us at Phase2; we wanted to keep all of the advantages of custom pages, but also make this power accessible to everyone in any organization - not just custom dev teams. With this in mind, we started building Fable with some very specific high-level goals:

  • Allow authors to work directly with content, similar to a design tool or word processor
  • Make the pages as flexible as possible - we didn’t want authors to be limited to “templates,” but instead let them be creative in how they structured things
  • Pages should be publishable anywhere - no server-side software requirement for the finished product, making hosting the content as easy and scalable as possible
  • Provide access to a wide variety of elements - from beautiful text and images, to parallax style views, fullscreen splashes, and advanced tools like slideshows, timelines, maps, and more

placeit (2)

Fable Components

I’m proud to say that we were able to achieve all of these goals with Fable. At the heart of Fable is our component system. A component packages up the settings, dependencies, interactions, and rendering of a piece of content (e.g. text, image, etc). This is similar to systems like webcomponents or to some of the other design tools out there - but with Fable there is some secret sauce.First, components are not only a way to package up content, but they can also provide containers for other content. In addition to creating simple design tools like customizable layout panels, this enables you to mix and match them to create different content structures. Want to put a fully interactive “slippy map” on a slide in your timeline? No problem. Want to then have a video element appear as a popup for a marker on that map? Go ahead! This capability allows authors to mix-and-match components to create very deep content. Users can spend hours with a single page, digging into the whole story.Second, these components have the built-in smarts to be lazy-loaded and responsive. Each component knows how to behave when it’s put into a tight space, be it on the small screen of a phone or inside a pop-up on a map. Mobile interactions are packaged alongside their desktop cousins, making sure that users can get to content no matter if they touch or click. And the lazy loading means that no matter how much content you’ve got (we’ve had authors create single pages up with to 200MB of total content!), they will only load when the user needs them. Keeping page loads as quick as possible further alleviates the load on both the server sending the content and the device viewing it.placeit (32)Lastly, our components know how to be created, placed, and configured by our authoring environment. With it, authors can directly interact with their content by creating and laying out components in a drag-and-drop interface. The environment is designed to either be stand-alone, or to work as an editor alongside our Drupal module or Wordpress plugin to augment an existing content management system. The environment uses a consistent set of interactions to expose the power of our components to the author. When you are ready to share your creation (which we call an interactive) you simply publish it.Publishing your interactive generates static HTML, Javascript, CSS, images, and other assets that can be hosted in another content management system, on any web server, directly from Amazon S3, or paired up with a CDN -  basically anywhere you have an HTTP server capable of serving static content. This should add to your peace of mind because you don’t have to be scared of your content becoming popular. Millions of viewers can be served easily with a single server or, better yet, a CDN that doesn’t charge for bandwidth (like Cloudflare).

Our Tools, Libraries, and Components

To build all this, we’ve leveraged a lot of different libraries and components. The heart of our authoring environment is built in AngularJS, with add-ons like CKEditor, DropzoneJS, and more to add capabilities for editing text, colors, images, etc. Our components bring the interactive to life using Bootstrap, jQuery (with assorted extensions including UI), TopoJSON, Leaflet (with extensions), Timeline (a library we built and open sourced as part of this effort), RespondJS, MediaElement, HammerJS, and many others. Our list of technologies and tools will continue to grow as we expand Fable’s capabilities, and our customers will have access to leverage all of it through our authoring environment and components.Even though all of this is going on under the hood, to our users, Fable consists of just a few moving parts:

  1. A set of components that package up all of our flexible layouts, nesting, interactivity, responsiveness, etc
  2. A hosted (SaaS) authoring environment that allows authors to build interactives out of those components
  3. A pure CSS based theming system that provides strong default styles and controls for the elements
  4. A publishing system that generates static HTML and assets and integrates with various targets for hosting (CMS, File system, CDN, etc)

This approach puts a lot of power in the hands of authors. Components can be extended or built to handle new technologies, integrations with external systems, and even to allow the easy embedding of content from other systems (such as Ads or mash-ups from data-vis tool like Tableau). The endless flexibility of this system provides a flexible environment for people of any level of web development skill to create immersive, engaging content quickly and publish it easily.Screen Shot 2015-10-12 at 3.04.14 PM

 

My favorite part of working on Fable has been my surprise at the new things our customers have used it to create and share with their readers. It’s been a pleasure seeing them build structures and use components in ways we never considered. I can’t wait to be surprised by your creation.
Interested in learning more? Explore the evolution of long-form content in Phase2’s new whitepaper, Immersive Digital Storytelling: Connecting with Audiences Through Long-Form Content. Visit the Fable website, follow Fable on Twitter, and sign up for the Fable newsletter.

Sara Olson

Marketing Analyst