Rethinking webcomics as a unique medium


Book pages

We need to think beyond pages in webcomics.

Conventional thinking treats webcomics as if they were printed books. For example, they assign one image per URL, and each URL gets back/next buttons to “turn the page.” That’s good for helping people make the transition to reading in an unfamiliar medium like the web.

But today’s readers understand the web. They know about links, searching, and browser tabs. There’s no need to keep using the paper metaphor. Instead, we’ll borrow a web term. Let’s call them views.

A “view” is everything readers see when browsers load a URL. Views change with the readers’ viewports, a.k.a. browser sizes, and can hold varying amounts of media like images and text. Most importantly, views lead to modular thinking.

The web is not print, and it shows

Back to pages for a moment. Comic or not, printed pages are units of a book. They have distinct boundaries, measured in inches or centimeters. Even if a scene continues across several pages, paper’s edges imply “this is a break.” Having to turn a page is a subtle, yet mandatory, cliffhanger. Printed pages end on a beat that doesn’t always fit the story.

Scenes jump across pages

And there are other downsides.

  • Fixed-size views don’t account for varying screen sizes like smartphones, tablets, and resized browser windows.

  • No matter how much dialogue readers see, search engines and screen readers have no way to interpret a comic image beyond its lonely alt attribute.

  • Consistent update schedules require completing entire book-sized pages.

  • Fixed-size views keep artists fixed in old-school thinking when the web offers exciting new possibilities.

Websites are living entities that develop over time. They have properties unique to digital media — for example, you can add to and edit websites as you please.

But artists have good reason to publish a dead-tree version of their comic. Not only does it feel official — “anyone can publish a webcomic!” — but it can also lead to money. You can sell books. Websites behind paywalls don’t get many readers.

So just calling them views doesn’t solve the problem. But it does free us to discover a web-friendly unit.

Building with panels

What is a view made of? Panels, or discrete shots in a comic page — and they’re perfect for viewing on the web. They allow for flexible layouts, are relatively search-engine friendly, and provide the raw material to create printed pages. By uploading individual panels to the same view, artists can create a reading environment that adapts to readers’ needs.

Artists who adopt a panel mindset will need to change their creation process, but it’s not complicated. It might go like this:

  1. Draw individual panels in a printed page. If it helps, plan them for fixed-size book page format. But save them as separate image files.

  2. Upload individual panels to your website. Entire scenes can fit in one view, regardless of how many panels they have.

  3. Assemble the individual panels into pages for print.

  4. Publish your printed book; the website’s already live.

And what if we tried a web-first approach?

  1. Draw individual panels, sized for the web.

  2. Upload them to the appropriate views.

  3. Assemble the panels into book-sized pages for print publication.

Going web-first is more flexible because views can end on appropriate story beats. Plus, you can add to a view over time without having to produce a whole new page per update. And when done right, panels will adapt better to differently-sized browsers.

However, the web-first approach presents two challenges. First, some artists prefer to work their panels into the background, or vice versa, with images and textures. Second, differently-sized panels don’t always fit well in the same view, especially in [a responsive environment].

Ideally every panel in a webcomic URL would have the same dimensions. It makes them fluid across multiple devices. But how boring. Artists use space to denote time, to create wide shots, to allow for more (or fewer) characters in a shot, and to add visual interest.

I think there’s a better way.

A hybrid approach does both when appropriate

It starts by thinking web-first. Whenever possible, save individual panels for upload. But for exceptional situations — like angled divisions between panels, or extra-large panels — go ahead and save them as one image file.

Artists aren’t restricted to web- or print-first formats; the two work in tandem to produce the best reading experience in either environment. Here’s how it might work:

A hybrid approach to webcomic design

Here, every panel gets its own file — except for two, which fit inside the same image file because they flow without a gutter.

This approach bridges the gap between web and print. But it’s not not quite perfect.

The ultimate approach

In a perfect world, webcomics would go responsive while providing the raw material for printed pages. Panels themselves would adapt to their viewing environment. Each panel would have more than one image file, optimized for a different size viewport, and load the appropriately-sized graphic.

Responsive images aren’t a new concept, but they require more effort on the artist’s part because each panel needs a new piece of art per viewport. To that end we’ve added the ability to upload more than one image per page in the Grawlix CMS. It’s not required, but we believe the future of webcomics uses fully-webbish techniques.

Rethinking webcomic views

Does every comic page have to look exactly like its printed counterpart? No. In fact, when you’re thinking in a fluid medium like the web, it’s impractical to keep a rigid mindset. Panels at a given URL should reconfigure themselves to fit different reading environments, like smartphones, desktop screens, watches, and TVs.

When we think beyond pages on the web, we start to see that webcomics are in a unique medium: one that’s modular, accessible, and far more flexible than their printed cousins. It’s time to turn the page.

Anyone can read the blog, but patrons get inside info. Support our project!