Webcomics

Last Updated
16 Apr 2024
Published
18 Nov 2022
Epistemic Status
I'm theorizing here—whether or not this holds up in practice is what I'm trying to figure out.

April 2024

I’ve sort of tried this out with my version noir homepage. To quote my blog post writeup about it:

A side-by-side comparison of the 'don't go' panel. The desktop version is landscape; the mobile version is portrait.
desktop vs mobile example. I move the text around to fit the empty space.

The principle: there’s a lot of negative space in the shadowed area around the figure, and the ‘don’t leave’ text floats in it. To maintain this on a narrow viewport, I stack it above the drawing, making use of the available vertical space.

— making version noir (april 6, 2024)

take scott mccloud’s definition of comics:

Juxtaposed pictorial and other images in deliberate sequence, intended to convey information and/or to produce an aesthetic response in the viewer

— from his book understanding comics

key word: juxtaposed. the relationship of panels/images to each other is essential to the medium.

to maintain the same rhythm / pacing when moving from a wide to a narrow viewport, the rhythm must adopt a more vertical flow. horizontal whitespace becomes vertical whitespace; directional cues move vertically instead of horizontally.

3-panel comic, depicted as simple boxes, on desktop and mobile. On desktop, panel 1 is a large landscape panel, and panels 2 and 3 fill the next row in two columns, each about a quarter the size of the first panel. On mobile, all three panels are stacked in a single-column, and while they maintain the same proportions as on desktop, they are all the same size.
if you simply stack your panels on smaller screens without readjusting proportions, you lose the rhythm across the panels. here, the first panel is much larger than the next two, but on a phone they're all sized down to be equal.
The same desktop comic layout as before. Now there are three mobile layouts, showing how the first large panel is transform to be a tall portrait panel. The next two panels have several versions, from being smaller landscape panels, staggered squares, or short narrow columns.
some ways proportions could be adjusted for smaller screens

to be clear, this is purely theoretical—the composition is entirely dependent on the artwork. to easily shift your artwork around to fit a differently proportioned panel, to fundamentally change the composition, you would need to storyboard the art to support that. which is the actual hard part here.

at the end of my version noir post, I wrote that I wanted to draw something with a more complex composition to allow for more complex responsiveness. this is what I mean by that.

this is all building on Standards, Semantics, & Sequential Art by Pablo Defendini:

The fundamental unit of storytelling in comics is the full-page layout, not the individual panel. The magic of comics happens in the gestalt of the visual juxtaposition of multiple panels.

— Undermining page-level storytelling

and an example of double-page spreads:

But on the iPad, for example, double-page spreads become a nuisance, rather than an enhancement: the reader has to flip their tablet into landscape mode to see the spread at a legible size, and even then, it’s still smaller than the previous page, since the proportions of the artwork designed for the printed page are different from the proportions of the reader’s screen. […] the double-page spread feels smaller and more cramped, rather than bigger and more expansive.

— Relying on print-centric conventions

August 2022

Earlier this summer, I started playing around with the idea of ‘responsive comics.’ My output was going to be a homepage redesign on here, but my goal was to experiment with how comics can adapt to the medium of the web in the context of responsive design. How can comic panels rearrange themselves depending on screen size?

Early example

Here’s an old sketch I sliced up to test. One of my goals is to play around with how to rearrange compositions based on screen size.

2 comic panels, of the same content but composed differently. The contents are a hand holding a long needle, pointing at the side of a man's neck, and accompanied by text. The first panel is landscape, and the text reads 'this is a horizontal view (3 columns wide'). The needle points from left to right towards the man. The second panel is portrait, and the needle is points downward towards the man. The text reads 'this is a vertical scrolly view.'
This is a sketch based on a frame from the movie Dune.

The horizontal panel is the original composition. To convert this to a vertical layout for phones, I want to maintain:

  • The needle pointing towards the person
  • The distance between the needle and the person
  • The text separating these two elements

So to rotate this vertically, the hand, the text, and the person all need to be separate elements. Like a typical responsive design, they stack on a narrow screen. The one change is that the hand holding the needle rotates so that it points downward towards the person.

This is a crude example that doesn’t really make sense in terms of artwork composition (why would a hand be floating above a head) but introduces the new question of: what is the vertical equivalent of pointing a needle at someone’s neck?

I don’t know, which is probably why I would not draw a comic panel to look like this, because I wouldn’t be able to rearrange it. I would compose it differently keeping this in mind.

Which is the thing I want to explore here: how to compose panels that work both horizontally and vertically.

Reading

I did a cursory search for stuff about responsive comics. Full list of readings: