Putting the “Web” in Webcomics Tech Demo 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.
Jump to transcript Images not working?

Transcript

  1. 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.
  2. Webcomics are published as great big imgs.

    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
  3. 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.

  4. I've come across four ways for comics to adapt across devices.

    • Panel wrapping
    • Controlled progression
    • Sashes
    • Bespoke transformation
  5. 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>
  6. 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

  7. 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.

  8. 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.

  9. 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"/>
  10. 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

  11. But it's not without its drawbacks.

  12. 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.

  13. 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

  14. 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.)

  15. 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.

  16. 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.

  17. 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.

  18. 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.

  19. 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!

  20. Performant

    Image: The superhero The Flash.

  21. 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.

  22. 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.

  23. 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
  24. Accessible

    Image: A two panel comic, with an eye opening. The eye has an X for its pupil.

  25. 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

  26. 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)"/>
  27. 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.

  28. Try me.

    • ...in Internet Explorer 6
    • ...in Opera Mini
    • ...in Android versions older than 3.0
    • ...with JavaScript disabled

    Still works!

  29. Thanks for reading.

    View source for detailed blow-by-blows, references, and explanations!

Webcomics are published as great big <img>s. 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 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. Source: xkcd #270
But it goes awry with large or irregular panels... 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.” A video demonstrating comiXology's Guided View implementation on the iPad. (But you can play with it for free at SmackJeeves.) 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. 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. 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. Takes agency away from the reader, which can get political. Should it zoom in on the author’s name? The copyright? The brand? Ultimately a retrofit, and not device-agnostic. “The Guided View™ for your comic is created in-house by the comiXology team who have pioneered this technology and are the best suited to create this experience for your comic or graphic novel.” Do you contain or cover the zoom-in? Something more complicated? An enormous amount of source-selection logic... sizes="(orientation: landscape) and (min-width: calc((7/8 * (100vh - 100px)) + 200px)) calc((100vh - 100px) * 8/7 * 0.7142), (orientation: landscape) calc((100vw - 200px) * 0.7142), (min-width: calc(7/8 * (100vh - 200px))) calc((100vh - 200px) * 8/7 * 0.7142), 71.42vw" ...Depending on zoom depth, resolution, viewport dimensions...
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.
The molecules of comics are sets of panels. Not necessarily complex ones—you can get a lot done with just two. Source: Understanding Comics
I call these panel combinations “sashes,” after the parts of windows that slide around. (Page, panelset, window, frame, and screen were all thoroughly taken.)
Sashes preserve the experience most consistently across devices, and open up new storytelling methods. New window New window 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. But some people hate rotating their phones.
Bespoke Transformations Web devs have tried their hands at responsive comics, with interesting results. 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! scroll-snap-points-y: repeat(95vh); overflow: paged-x; display: grid; flow-into: panel-1;
Performant
SVG is perfect for cartooning. Flat colors, clean lines… PNG-65kB SVGZ-17kB 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! JPEG – 229kB SVG – 137kB 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
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. Like this! → Hey, I’m tryna make a wish here. Source: Tanglefoot The fanciest of FX can be used without ruining accessibility! POW!
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
Try me. Internet Explorer 6 Opera Mini Android versions older than 3.0 JavaScript turned off Still works!
Thanks for reading. View source for detailed blow-by-blows, references, and explanations!