Every website is a comic book
Friends!
Stardate: 2015. Month: September.
I was stood in line for coffee in Portland and if you looked closely enough then you’d notice my gentle swaying from side to side because I was struggling: the city was an open oven — I was wearing shorts (my sincerest apologies) — and my hangover was all-encompassing, overwhelming, intergalactic. I was also coming apart at the seams from anxiety and hoping that no-one in the crowd would spot me. Just let me be invisible, I thought to myself as I stood in line. I just want to quietly watch all these amazing talks at this conference from a safe distance and then crawl back to my hotel room where I can go back to making websites in the dark.
But up until this point I’d never hung out with folks who love websites and, well, that’s why everyone was here! They’d come from all over the country to talk about the web and art and how those things fit together. Surely the person standing behind me in line wasn’t going to hit me with an axe and was more than likely obnoxiously talented. So I turned on my heel and the guy behind me gave a warm and welcoming smile, with all that worry of mine evaporating in an instant.
Hello, I said, introducing myself and immediately forgetting this chap’s name because I am a goldfish in human form. But less than ten seconds later he is deep in the weeds of SVG comic books; excited about their nascent, misunderstood potential and mad about how no-one is experimenting with them. Comic books are the future, he told me, it’s where responsive design should steal from. Not just because the tech is flourishing but because there are so many ways-of-telling-stories that are worthy of us stealing. And all those rules and lessons of comic books are getting lost in the shuffle from print to web.
So why are we here standing here, wasting time? Why are we even in Portland, when we could be hands on keyboards, up to our ankles in an svg file, trying to make beautiful comic books work on the web?
This, I thought to myself as I leaned in and crossed my arms with my hangover now evaporating in the tropical heat of Portland, is my kind of guy.
Nine years later and I’m scouring the web, thinking of that conversation once again, and figuring out how to make a website feel like a comic book: that way of pacing a story, of processing information slowly, but with all the advantages of a website: responsively, accessibly, in a way that doesn’t feel like you’ve slammed a .pdf into a web browser.
I’m jumping back and forth between tools, exploring different layouts and writing styles and instead of cramming this story that I’m working on into tiny frames like most web comics that I see, I want to take advantage of the whole viewport. I want to incorporate illustrations and text, I want to make an argument in the language of comic books but there doesn’t seem to be any examples for me to steal ideas from.
Where did all the web comics go?
I’ve always been on the look out for a general theory of comic books and web browsers — how they should work together, what to steal and what to leave behind etc. etc. — and, over the last few years, my essays have been exploring those ideas: how should we layout a webpage and tell a story? Do we really need to stick to single column layouts? Can text do more on the web? Is there even such a thing as web-native literature? Oof, that word sucks. But you know what I mean.
(Side note: this is important because I have this theory that the only way to be a great web designer or developer is to study comic books. It’s the form that’s closest to a website. Why this is, I can’t quite say, but I feel it in my bones. I think Lynn Fisher’s website proves this and it’s why everyone’s so excited to see her yearly updates.)
During a rant about all this someone sent me a link, casually, as if it wasn’t going to fuck up my whole day but fuck up my whole day it did. Here, this was the link:
https://digitalcomics.co/index.html
The general theory, finally! This is what I was looking for all those years ago and it’s called Standards, Semantics, & Sequential Art by Pablo Defendini. Here, instead of simply moping about comic books and the web like I often do, Pablo gets his hands dirty and explores how to think about comic books as a front-end developer and designer:
To apply responsive design techniques to comics on the web, the first thing we need to do is to kill the blob: we need to break a comic page layout out of its monolithic image file. Separate out individual panels and discrete artwork elements within a composition, and then mark up and code the layout as you would any other modern web layout, using HTML.
There’s one part of this great essay/e-book that really helped me think about my own project, where Pablo makes an animation that tears apart the constituent parts of a comic book so that you can think of them as individual pieces to design and build.
I’m still not sure why this is so revelatory to me but it helps me think about telling a story across infinite screen sizes and viewports and input devices. Seeing these pieces as overlapping chunks instead of “the blob” as Pablo describes it so very helpful.
But, wait, Pablo? Huh...
Later that night I checked out Pablo’s website and — GADZOOKS — this is the same SVG chap that I met in Portland all those years ago! This is the same chap that was trying to explain his grand theory of comic books in line for coffee whilst I, half-soberly but still rather excitedly, asked him questions.
So my lesson here, this week, isn’t one about CSS at all. Perhaps not everyone standing behind you in line for coffee is an SVG comic book savant who will help you down the line in a decade, who will help you in that special way that only distant friend-non-friends with websites can, but you won’t find out if you don’t say hello.
Until next week,
Robin