Way back when, if you wanted to write something important down, you generally had two choices: cave drawings or stone tablets. Permanent, yes, but also impractical. Eventually, scrolls were invented, providing the first continuous, editable medium. Ancient egyptians used scrolls for record-keeping, while Judeans were the first to adapt the format to literature with their all-time best seller, the Torah. It wasn’t until the first century AD that the bound book came about, and it would be almost two thousand more years before the genesis of the modern medium, the digital screen.
The most interesting aspect of this evolution is how the medium continues to shape the message, and vice versa. Caves and tablets were conducive to artistic depictions and decorative narratives with limited written copy. Scrolls were just the opposite: well-suited to long, linear narratives, but with limited decoration. Bound books physically segmented scrolls’ continuous medium into individual pages, which in turn spawned content structures such as parts, sections, and chapters.
If anything, the digital screen has brought the segmentation and structuring content a step further. By providing logical and organized navigation schemes, users have the freedom to explore websites according to their individual needs. Interactive has liberated the reader from the constraints of the linear narrative.
And yet, even as the digital screen has embraced alternative content formats and multimedia, it continues to rely on concepts rooted in the physical world. With individual content presentations called “pages,” the web has literally taken a page from books. Non-dynamic sites with evergreen content are commonly referred to as “brochureware.” And one of the most popular trends in digital design— skeuomorphism— is based on adapting the form and function of physical devices to digital applications, much the way Apple has done with the address book and calendar in iOS.
So it should be no surprise that scrolling pages are all the rage again. It’s understandable; deep, immersive pages provide healthy respite from the attention-deficit glut of tweets and other bite-sized content. By relying on the linear narrative rather than a navigation scheme, they provide a more directed reader experience that strengthens understanding. And in the right context, deeper site pages also help create a more intuitive experience, especially on mobile devices, that keeps audiences engaged helps the medium get out of the message’s way.
WIth this in mind, here are a few examples of sites that successfully marry design and content to enhance the user experience with deep, scrolling pages:
Linear Narrative
NYT Turmoil in the Sahara
A fantastic job connecting events across time and space to their impact. With a persistent timeline header at the top of the page, this design tethers together a series of articles on Turmoil in the Sahara, offering top-line synopsis of each event alongside a link the article. In doing so, the NYT reinforces a synthetic understanding of a sequence of events, while allowing audiences to investigate individual events at their discretion.
Linear Process
World Cocoa Foundation Value Chain
Ok, a small plug for us. Developed at Constructive for World Cocoa Foundation, this page offers a detailed look into every step of the chocolate production process, from farmer to consumer. A simple, step-by-step progression on the left provides context for the greater whole, while the content invites the reader to investigate each step of the process, from growing to refining and production.
Interactive Process
The Dangers of Fracking
Conceptually, the content—illustrating the perils of drilling for natural gas—is perfectly suited to the scrolling format. This site uses a technique referred to as “Parralax,” which shifts the position of different onscreen elements at different speeds to create the illusion of user-controlled animation. The result is a site that takes us on a visual journey of the fracking process, layering on animation and interesting information as we go.
Interactive Online Report
Mailchimp 2012
This micro-site takes scrolling to the next level by integrating parallax scrolling techniques into its online report. This quant-heavy narrative is built from a variety of illustrated stats collected throughout the year; by grouping these by category, the report paints an unconventional but surprisingly meaningful picture of how the company, its customers, and the market have evolved over the past year.
One Page Website
Cambridge Healthcare
In contrast to other pages which simply present a linear narrative, this site does something different—it repurposes what might otherwise be a normal, segmented brochureware site into one contiguous narrative. For all the redundant content that we normally see in such sites, this one is remarkably efficient and immersive in its presentation.
