A Coming Change in Traditional Websites

Over the horizon, there is a significant change coming to your web browsing experience. A change that is not as visually striking as the change from desktop to responsiveness, but one that, once it’s pervasive, will seem necessary, and one that will make websites that lack it seem subtly incomplete. A change that… maybe doesn’t quite have a name yet.

You’ve probably heard the term Single Page App (SPA), which describes a site that serves a single page that works like multiple traditional pages. That is, a single page loads, and when the content changes because, say, the visitor clicks on a link, the whole page doesn’t reload — only the parts of the page that are changing reload. This is in contrast to a traditional site where every content change means the entire page reloads — and since even the fastest site takes time to load and appear in the fastest browser, this can never be as fast or as seamless as the SPA approach.

The seamlessness comes from the static elements on the page remaining static. When the whole page refreshes, bits of content may take a moment to appear even if they haven’t changed from the previous page, or content may shift around as it is rendered, as calculations are made and new elements are loaded. The technology around page loading has improved tremendously, and in many cases a traditional multipage site can indeed render almost as close to instantly as a SPA site, but the browser has complete control over exactly what the change looks like, and any seamlessness is typically destroyed when layout decisions must be made after the page fully reloads.

But what a single-page site allows for goes beyond speed and seamlessness, and this is the part of a change we don’t believe has a proper name yet: in addition to allowing unchanging elements to persist, it allows changing elements to transition — to animate from whatever original state they were in to their new state.

These types of transitions are as old as graphical user interfaces (GUIs); Apple’s original “Finder” for example would transition a window opening from an icon with a simple dotted rectangle. When a user double-clicked on an icon to open it, a simple dotted rectangle the size of the icon would quickly grow to the size of a window, moving from the icon to where the window would be. Finally, the window would appear.

In 1983, that was pretty neat, but it wasn’t just ornamentation. It was an orienting, context-providing, informative transition: here is what you clicked and here are its contents.

Even more fundamentally, instant transitions are unnatural. In normal, pre-electric human experience, perhaps only lightning flashes appear and disappear instantly. In the words of Jason, our creative director, instant changes are not experiential — they interrupt your engagement and remove you from the context of the experience. When old content just vanishes and new content appears out of nowhere, the eye loses its anchor point, and it takes effort to take in the new content and find your new point of interest.

If this idea is as old as graphical computing, why are we making a big deal about it now? After all, making content more mobile-app-like has been a design goal since the original iPhone — this is what we will address in Part 2.