Putting the "Web" in Webcomics
Image: A two-panel comic of a man taking off his top hat to reveal the HTML5 logo underneath. The man is a simple, black-and-white depiction, with only eyes drawn on his face. His attire suggests a tuxedo to complement his top hat. He is also wearing a black bow tie. He takes off his hat by just bending his elbow. Between the two panels, his eyes change from a smiling squint to a respectful downturn.
With apologies to Scott McCloud and the W3C.
Webcomics are published as great big
Image: A comic peels away to reveal its single image file source.
This is terrible and ought to change.
Allow me to demonstrate how webcomics can become...
- Progressively enhanced
Image: 3 configurations of Calvin and Hobbes’s “Sunday Strip Layout,” where panels were constructed so editors could cram them into various sizes and shapes of rectangle.
Source: Calvin & Hobbes; June 26th, 1988.
I've come across four ways for comics to adapt across devices.
- Panel wrapping
- Controlled progression
- Bespoke transformation
The simplest method. Slice panels into separate files, and then flow them like the inline elements they are.
<img class="panel panel-1">
<img class="panel panel-2">
<img class="panel panel-3">
<img class="panel panel-4">
For comics with simple, regular layouts, it might also be the best method.
Image: An xkcd comic in various configurations, demonstrating how well panel-wrapping works for basic comic strips.
Source: xkcd #270
But it goes awry with large or irregular panels...
Image: A comic with a very wide panel and many very small panels becomes ungainly and hard to read when placed in a narrow format.
And cannot guarantee visual relationships, making even slightly complex layouts treacherous.
This is the method patented by ComiXology under the name "Guided View."
Image: A video demonstrating comiXology's Guided View implementation on the iPad.
(But you can play with it for free at SmackJeeves.)
Image: A screenshot of SmackJeeves's web app for creating similar functionality to comiXology's Guided View.
It's a predetermined series of zooms on existing comic page scans.
Image: A video showing the operation of SmackJeeves's mobile comic viewer.
Easily implemented with SVG's named
<view id="part-1" viewBox="0 0 150 200"/>
<view id="part-2" viewBox="170 0 300 200"/>
<view id="part-3" viewBox="0 220 150 420"/>
Controlled progression is great for adapting existing material.
Image: A comic page showing a character's hallucinations weave through panel borders and gutters.
Image: A very complex comic page, showing a room in a museum. Each panel takes place at one of three times; a comic strolling through during the day, a woman being murdered at evening, and a detective investigating the scene at midnight.
And for truly exotic paneling, it's the only option.
Sources: Desolation Jones #4 and The Multiversity: Pax Americana #1
But it's not without its drawbacks.
Frustrated with these methods' drawbacks, I tried thinking content-out.
The atom of comics may be the panel, but like atoms, they're more useful in combination.
Image: Atoms are to molecules as panels are to comics.
The molecules of comics are sets of panels.
Not necessarily complex ones—you can get a lot done with just two.
Image: Scott McCloud's 6 types of panel transitions: moment-to-moment, action-to-action, subject-to-subject, scene-to-scene, aspect-to-aspect, and non-sequitir.
Source: Understanding Comics
I call these panel combinations "sashes," after the parts of windows that slide around.
Image: A window with its sash partially opened.
Image: A comic with six panels of the same size, which looks very similar to the window sash.
(Page, panelset, window, frame, and screen were all thoroughly taken.)
Sashes preserve the experience most consistently across devices, and open up new storytelling methods.
Image: An example of panelsets used narratively from Platinum Grit.
Image: An example of panelsets' uses from a deviantArt comic experiment.
Sources: Platinum Grit #20 and About Digital Comics.
The biggest drawback: they work best as wide aspect ratios, because you can rotate a phone, but not so much a desktop.
Image: A wide aspect-ratio image is large and easily seen on a landscape-rotated phone, but small and cramped in portrait aspect-ratio.
But some people hate rotating their phones.
Web devs have tried their hands at responsive comics, with interesting results.
Image: View the code behind Responsive Comic with Flexbox on Codepen.
Most are playing with code to see what's possible.
The sky's the limit here—the rejiggering can be anything, and thus has vast potential.
- Expanding background
- Show additional decoration
- Reconfigure panel internals
- Increase depth-of-field
- Full-on art direction
- Stretchy margins
- Separable panels
- Hide nonvital panels
- Accordion gutters
- Reorder with flexbox
- Crop/reveal artwork
- Proportional distances
- Snap to edges
- Fractal generation
The con is a classic tradeoff: best effect requires most effort. It also requires both artistic and coding knowledge.
We can combine these 4 techniques depending on the content and context.
And new CSS properties will bring more possibilities.
Responsive comics are just beginning, so we have to find our own answers!
Image: The superhero The Flash.
SVG is perfect for cartooning. Flat colors, clean lines...
Image: The PNG version of a comic strip is 65 kilobytes.
Image: The zipped SVG version of the comic strip is 17 kilobytes.
It also does cross-hatching and screen tones with ease.
Source: Robbie and Bobby, Tickets for Two.
But even for comics with bitmap artwork, SVG scaffolding slashes filesize like WebP can only dream of.
And hey—we can get WebP involved, too!
Image: The original version of the comic page, encoded as a JPEG, is 229 kilobytes.
Image: The converted version, with the individual panels saved as JPEG and positioned on the page using SVG, is 137 kilobytes.
Source: Unsounded Chapter 8, Page 20.
Separating the text, borders, and gutters from the artwork, and scaffolding the comic with SVG has many benefits:
- Smaller surface area to encode
srcset can be used without making text illegible
- More aggressive compression, which also means better behavior with transcoders
- Fewer timeouts on slow connections
- Isolated animations, instead of giant GIFs
- More atomic, robust caching with HTTP/2
Image: A two panel comic, with an eye opening. The eye has an X for its pupil.
Now that we're using vector text, and vector artwork/responsive images, zooming in is no problem.
Even better, the text can be real text! Whether through fonts, or transparent text over hand-lettering.
Image: A speech balloon that was drawn and lettered by hand.
The fanciest of FX can be used without ruining accessibility!
The SVG scaffold allows built-in image summary and description elements, and can imbue structure.
<title>A spaceship lurks over the Earth.</title>
<desc>The spaceship is a shiny purple flying saucer. It’s centered over the Amazon basin, 20,000 feet high.</desc>
<g role="list-item" aria-label="Panel 1"/>
ARIA can patch current holes in the accessibility story, and SVG+ARIA's future looks bright.
<image xlink:href="panel-1-artwork.svg" aria-labelledby="title1" aria-describedby="desc1">...</image>
<g aria-roledescription="panel" connector="url(#panel-1-to-2)"/>
Image: An evolutionary line of speech balloons, developing from a small, crudely-pixelated version, to a larger, smoothly-rendered version, to a largest, gradient-filled version.
- ...in Internet Explorer 6
- ...in Opera Mini
- ...in Android versions older than 3.0
Thanks for reading.
View source for detailed blow-by-blows, references, and explanations!