-
Putting the "Web" in Webcomics
Tech demo
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 img
s.
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...
- Responsive
- Performant
- Accessible
- Progressively enhanced
-
Responsive
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
- Sashes
- Bespoke transformation
-
Panel wrapping
The simplest method. Slice panels into separate files, and then flow them like the inline elements they are.
.comic {
text-align: center;
}
<div class="comic">
<img class="panel panel-1">
<img class="panel panel-2">
<img class="panel panel-3">
<img class="panel panel-4">
</div>
-
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.
-
Controlled Progression
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>
s.
<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.
-
Sashes
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.
-
Bespoke Transformations
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.
scroll-snap-points-y: repeat(95vh);
overflow: paged-x;
display: grid;
flow-into: panel;
Responsive comics are just beginning, so we have to find our own answers!
-
Performant
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
<picture>
and 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
-
Accessible
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!
Source: Tanglefoot
-
The SVG scaffold allows built-in image summary and description elements, and can imbue structure.
<image xlink:href="panel-1-artwork.svg">
<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>
</image>
<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)"/>
-
Progressively enhanced
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.
-
Try me.
- ...in Internet Explorer 6
- ...in Opera Mini
- ...in Android versions older than 3.0
- ...with JavaScript disabled
Still works!
-
Thanks for reading.
View source for detailed blow-by-blows, references, and explanations!