
<h2 className="micro">The Context</h2>

Our web browsing experience hasn't changed much over the last three decades.

Here's Mosaic, the first browser that made the web popular outside niche academic circles. Built in 1993, its _"killer feature"_ was inline images.<Footnote idName={1}>As opposed to images you had to download and open in a separate window</Footnote>

<ImageFrame
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_900/v1642358019/stepham.com/patterns/moasic_fxat9i.png"
  alt="The Mosaic web browser interface in 1993"
/>

And here's Chrome, currently the most widely used browser, 29 years later:

<ImageFrame
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1100/v1642358018/stepham.com/patterns/chrome_wbjk5d.png"
  alt="The Chrome browser interface from 2019"
/>

On the surface, not much has changed. The layouts, icons, and button arrangement haven't moved. Address bar at the top. Arrow icons to move between pages. Access to the same basic controls; print, refresh, save, and search.

Modern Chrome certainly gained the veneer of minimalist modern design; we've reduced the interface to a low-contrast sea of whitespace. It's also vastly more powerful; 1993 Mosaic certainly couldn't load 20 tabs running WebGL animations.

But from a user's perspective, the core browsing experience isn't different. Enter URL, load the page, click on links, move forwards and backwards in browser history. We can only see one website at a time, or max two if we stack our browser windows in columns.

Chrome and Mosaic are not uniquely similar. All the major characters in this browser drama – Firefox, Safari, Opera, and Internet Explorer/Edge – feel like they're wearing the same outfit.

This historical consistency is impressive. Perhaps it means we nailed this interface pattern on the first try. Or perhaps it means building browsers is an enourmously complex challenge, and the only companies with enough engineering resources to dedicate towards it aren't interested in mucking about. They're too busy keeping up with W3C web standards and negotiating cross-compatability concerns, leaving little room for experimental interface patterns.

This isn't for lack of want though. There have been plenty of calls to _"reinvent"_ the browser. Places like [The Browser Company](https://thebrowser.company/) make a lot of noise about it (but we've yet to see a product demo). Foundations like Mozilla have funded extensive [experimental explorations](http://patrykadas.com/browser.html) of alternative browsers.

There's a steady stream of ideas and speculative sketches floating around Twitter that prompt us to reconsider our browsery assumptions and ask good design questions:

<TweetEmbed tweetId="1418749070336684034" />

<TweetEmbed tweetId="1450479522609090562" />

<TweetEmbed tweetId="1256317316452810755" />

The dreams in some of these speculative suggestions are starting to materialise.

<Spacer />

<h2 className="micro">The Pattern</h2>

There are some new apps appearing that offer alternative ways of browsing the web, but sidestep the problem of needing to build an entire browser.

Through the use of `<iframe>` embeds (or sometimes darker magic like live-updating screenshots in `<img>` tags), these apps are creating a form of web inception; allowing us to embed tiny browser windows inside a larger canvas. <Footnote idName={2}>This is a tricky as many websites deny access if they're embedded inside other webpages. This isn't out of malice; they're trying to protect themselves from cross-site scripting attacks</Footnote>

This canvas-based approach adds _spatial_ dimension to the web browsing experience; they allow us to arrange browser windows above, below, to the left, and right of other browser windows.

The same way we're able to put an open book next to a piece of paper and below a row of sticky notes in meatspace. Arranging objects in space to create groupings, indicate relationships, and build hierarchies is one of those classical human skills that never goes out of style.

#### Spatial Browsing Apps

1. [Kosmik](https://lithium.paris/) is a canvas-based note-taking app for iOS and Mac app that includes frames for web browsing. It's still in early development, but as a native app it doesn't seem to have the same cross-site blocking issues as web apps.

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642582738/stepham.com/patterns/kosmik_rm0rpy.jpg"
  alt="A Kosmik canvas with three open browsers arranged next to one another"
/>

2. [Nette](https://www.nette.io/) is a browsing app designed for researchers that allows you to open multiple browser windows, draw physical connections between frames, pull out key concepts, and write markdown notes directly into your canvas. <Footnote idName={3}>Still pre-release but looking promising</Footnote>

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642543667/stepham.com/patterns/nette_kjqsgj.jpg"
  alt="A Nette canvas with open browsers, diagrams, and notes arranged next to one another"
/>

3. [Sprout](https://sprout.place/) is designed with social interaction in mind – an open, multiplayer canvas where you can video/voice chat, write notes, and browse webpages together. It cleverly sidesteps the issue of cross-site blocking by using screenshots in `<img>` tags instead of true `<iframe>` elements.

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642543667/stepham.com/patterns/sprout_ffcyrn.jpg"
  alt="A Sprout canvas with two open browsers arranged next to one another"
/>

4. [Natto.dev](https://natto.dev/) isn't designed to be a browsing or knowledge management app, but inadvertently implements this pattern. It's a spatial canvas for programming that happens to allow HTML elements, such as `<iframe>`:

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642543667/stepham.com/patterns/natto_cfqkov.jpg"
  alt="A Natto canvas with three open browsers arranged next to one another"
/>

All of these examples allow you to add different blocks and elements to your canvas other than simply browsers. This turns the interface into a true research space. You can add notes, images, and links connected to these browsers – pulling out information in order to arrange it in ways that make sense to you.

At least... in theory. The above platforms are promising, but they're all at beta/alpha stage for the moment. They're worth playing with, but not stable enough to build up an extensive database of notes and browser trails in.

We're so close though. Here's to hoping we have widely useable spatial browsing tools within the next year or two.

#### Postscript

I should touch on the impulse to bring in even more dimensions here. When you search for "_spatial web browsing_,” you'll find there are whole engineering teams trying to stick web browsers on [walls within 3D AR/VR](https://venturebeat.com/2021/05/13/spatial-unveils-web-browser-collaboration-in-3d-workspace-and-nft-virtual-galleries/) environments. To me this feels like putting the cart before the poorly rendered, nausea-inducing horse, given we haven't built tools to properly browse the web in 2D space yet.

<References>
  <ReferencesLink
    title="Browser.html speculative research"
    href="http://patrykadas.com/browser.html"
    author="Patryk Adas"
  />
  <ReferencesLink
    title="Spatial Interfaces"
    href="https://darkblueheaven.com/spatialinterfaces/"
    author="John Palmer"
  />
  <ReferencesLink
    title="Spatial Software"
    href="https://darkblueheaven.com/spatialsoftware"
    author="John Palmer"
  />
</References>


Adding spatial affordances to the experience of browsing the web

Pattern Catalogue

A catalogue of design patterns gathered from my own observations and research.

Spatial Web Browsing