As part of the ongoing launch of Triple Canopy’s new publishing platform, today we are pleased to announce the first digital project produced with Alongslide, “Of the Dense and Rare,” by Ada Smailbegović and Sylvia Hardy. Alongslide is Triple Canopy’s third system for presenting and authoring digital projects (read about the first and second here and here), and it continues our effort to integrate new forms of reading, viewing, and listening online by situating these disparate modalities within a continuous visual content space. As an authoring platform, Alongslide provides a deceptively simple text-based environment in which editors can produce projects along with designers, writers, and artists; as a presentation platform, Alongslide provides a responsive framework that retains the integrity of visual layouts across a broad spectrum of Web browsing environments.
The principal question guiding each of Triple Canopy’s publishing platforms has been: How to invoke the visual dynamism and the formal structure of print layouts, and the interplay of elements they afford, on Web browsers, which are characterized by a narrow visual bandwidth and by erratic treatment of typography? In terms of information density and precision, a large computer screen does not compare to the pages of books in which artists publish projects; furthermore, the marketplace for browsers is shaped by disagreements about the basics of text display among vendors, standards committees, and end-users. The question becomes: How can the inherent dynamism of the medium be exploited so as to compensate for these limitations?
Alongslide responds by decoupling media objects from flowing text, enabling them to progress at different paces—such that one or more elements may linger on-screen, reinforcing the feeling and structure of the layout, while the text advances, unimpeded. Or, conversely, a paragraph may remain in place as images advance, or a video may play as a series of images scroll forward—any such combination is possible.
Alongslide further invokes the experience of the commodious page by filling the entire available window or screen space, creating a full-bleed effect for images and backgrounds. No matter the ultimate shape and size of the reader’s display, the proportions and grid of the layout remain the same; a scrolling mechanism ensures that no text or image is ever only partially in view. In addition to a set of customizable styling tools, this enables editors and designers to produce highly refined layouts on the Web with remarkable precision.
By integrating recorded and textual media, digital publishing conceives of the experience of reading in both temporal and spatial terms; whereas a book might contain paragraphs and a series of images, only digital forms can map the particular experience of one onto the other by regulating the way in which the reader progresses through a text. The syntax of Alongslide emphasizes—even extols—this development by enabling editors to define the “start” and “end” points of content elements within a layout, as though they were being arranged on a timeline. (In fact, Alongslide’s underlying scrolling mechanism is based on a fundamental technique borrowed from the domain of animation and motion design: the use of key frames, which articulate transition points in the linear flow of data.) As user interfaces are increasingly imbued with virtual tactility, thanks to animated interaction cues, digital reading platforms will continue to incorporate motion design and animation—and justly so, as they have defined the experience of screen-based forms since the medium originated 125 years ago.
Since its inception in 2008, Triple Canopy has employed horizontally scrolling, columnar layouts as a counterpoint to the vertiginous, undifferentiated pillars of text that populate the Web. So when we learned that Adobe had submitted a draft of a W3 specification for flowing columnar layouts in the browser—called Regions—we were quick to adapt what we hope is an emerging standard. Unfortunately, browser support for this feature is not widespread enough at the time of writing to be dependable, so we wrote our own polyfill (a piece of code that grants the functionality one expects the browser to supply natively) according to the specification. We’ve named it RegionFlow and we’ve just published it as an open-source project.
While propelling the reader along a horizontal trajectory, Alongslide allows certain regions to scroll vertically, including image galleries and verse—especially verse that hinges on unconventional typography and resists being broken into columns. By employing both the X and Y axes of the screen, Alongslide consolidates all of the navigable content space into one unified plane, and invites the reader to explore (without any visible navigational tools) by shifting conjoined panels; tapping or clicking are reserved for accessing supplementary materials such as footnotes and enlarged images, and for navigating away from the digital project.
In order to accommodate diverse media, Alongslide furnishes developers and designers with a modular system for creating new, experimental templates as required for distinct projects by artists and writers. In addition to the system of fixed panels, scrolling panes, and sidebars, a project may be further organized into visually distinct sections, which are used to provide an overarching structure or to present a series of vignettes. In some sections, a video may occupy the entirety of the screen, while in others the relationships between media may be more varied; customizable animations can be used to transition between sections.
In the authoring environment, editors can specify all of these elements of visual and motion design in a single text window, using Markdown, an ascendent, intuitive formatting syntax and text-to-HTML conversion tool. (Read a primer on Markdown.) We’ve developed lightweight extensions to Markdown that add support for templates and specify document structure at the macro level. For a look behind the curtain, please see the Alongslide demo page which offers in-depth technical information as well as examples of Alongslide syntax.
While conceptualizing this system, we contemplated a technique called parallax—a commonplace in 1990s-era video games (when it was known as 2.5D) which recently experienced a resurgence on the Web, especially among advertisers. Parallax is an optical effect in which on-screen visual elements scroll at different speeds, even drift, producing the impression of an enlarged browser space, an illusion of depth of field. We determined that, in Triple Canopy’s case, employing parallax would ultimately subordinate the work of artists and writers to the machinery of navigation. So we devised a way for regions to advance at varying timescales while ensuring that scrolling occurs in discrete steps, feels sturdy rather than ambling, and never results in content being truncated. In this way, Alongslide amplifies the concept of parallax, transforming it from a micro-level optical effect into a macro-level organizational principle.
We’re proud to present our latest contribution to the broader investigation—being undertaken by many intrepid magazines, technology companies, universities, and design studios—of the affordances of digital publishing. We look forward to expanding and evolving our own nascent platform in the coming months, as our understanding of it is shaped by the publication of new projects and issues of the magazine. In summer 2014, we will eagerly share the many hand-coded, interlocking software components that compose Alongslide with the development community as an open-source project. In the meantime, please enjoy, and don’t hesitate to get in touch with us if you have questions.