Sign in Subscribe

Adventures in HTML

This post features an interactive element. I highly recommend reading it in-browser on a computer, rather than on a phone or in an RSS feed.

The State of the OSR panel (recorded at Gary Con) has me thinking about the future of the OSR. Specifically, I've been thinking about how adventures are distributed and how that could be affected by tariffs. I commented some of my thoughts on the Cauldron forum, which I'll just quote:

As Matt [Finch] mentioned, one of the most conspicuous changes in recent years has been the increase in project budgets and production quality. High-quality books may soon become inaccessible for the US audience [...] I wonder if the folks who’ve made RPGs their livelihood will pivot to innovative digital products. PDFs have been around for a quite a while, and I could imagine new formats for digital RPG materials emerging.

Clayton responded that he expects "websites and to a lesser extent programs/apps [...] to rise in popularity." SamB wrote, "HTML is probably the most universal, accessible and feature rich way to distribute a game." As it happens, I started learning HTML (and CSS) a couple months ago, so I decided to create a mockup of what an adventure presented in HTML could look like.

Disclaimer: I'd only spent a little more than a dozen hours learning before beginning this project. The code is flawed, the mockup mostly contains placeholder text, and I've done little in service of aesthetics. That said, it's (mostly) functional:

Windows

The possibility to display multiple windows is one clear advantage of HTML. Adventure designers have long grappled with the fact that referees need to refer to both the map and its key concurrently. Including a mini-map on each page or spread is one solution, though it has its limits. Multiple windows allow the referee not only to view a map and key side-by-side, but also to swap between maps and key entries at their convenience.

Bookmarks and hyperlinks go a long way towards improving PDF navigability, but I often find myself wishing for a "back" button and similar features.

Interactive Maps

SVG maps open up all kinds of possibilities. As illustrated above, individual components of an SVG can bear links, providing convenient access to location keys. The referee can also swap between maps with ease—whether between dungeon levels or between location maps and overland maps.

Another advantage of SVGs is right there in the name—they're scalable. Unlike raster image maps, SVG maps aren't limited by resolution. An SVG map could conceivably depict an entire region or megadungeon floor in considerable detail with options for the referee to zoom in and out and pan.

Other Features

A few other features strike me as useful:

  • PDFs don't always fit well with monitor aspect ratios; responsive design addresses that.
  • Collapsible text allows the referee access to more information without clutter and without needing to scroll or navigate between pages.
  • Mouseover tooltips enable easy parentheticals or summaries that don't take up space on the page.
  • Unlike in a PDF, navigation menus on a website or in an app are accessible at all times.
  • And of course scripts open up all kinds of possibilities, enabling referees to generate results from random tables at the click of a button.

Aesthetics vs. Utility

While web pages and apps offer unrivaled utility, they lack, in my view, the soul and aesthetic appeal of a book—even one in digital form. I'd hate to see apps supplant books entirely. However, I can see apps serving as excellent tools for the referee at the table. In an ideal world, I'd like to see adventures presented in two formats: an app for maximum utility and navigability and a book or zine for absolute aesthetic, tone, and vibe. I recognize that's a lot to ask of creators, but hey, it's not as if we're in it for the money.