A New Approach to Digital Comics

A networked, screen-based world calls for a networked, screen-based comic, and that, in turn, calls for a new approach toward actually making comics—how we write, lay out, draw, and build our comics.

Fortunately, we can stand on the shoulders of giants. The web standards movement and the web design community has forged a path forward for us. All we need to do is apply the tools and techniques that already exist for wider web design and development to the comics-making process, and we're in business.

This approach to building digital comics relies on three web development techniques in particular as a foundation: responsive layouts, live text, and resolution-independent artwork.

Responsive layouts

Responsive web design techniques have become the de facto standard for practicing web design and front end development, and for good reason—building one website that can adapt and, well, respond to the unknowable combinations of devices, connectivity, and viewing conditions that exist across the internet is an elegant and effective way forward in a world where we don’t know exactly how a reader is looking at our comics. Responsive layouts adapt to their containing screens, changing to accommodate the size and dimensions of the screen the reader is using.

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. Panels become divs, and text in captions is included directly in the markup. For artwork elements, you generate the appropriate image files or image code (in case you want to use in-line SVG) from the source drawing or painting app.

This approach has the benefit of being highly semantic. Instead of a single, ill-defined, un-semantic blob, you assign meaning to each piece of the comic. For instance, text is no longer locked away in an image, invisible to search engines or to screen readers. By breaking your layout into individual components, your comic is suddenly a lot more searchable, findable, and parseable by non-human actors on the network, which is great for both SEO and, crucially, for accessibility.

Once you’ve broken out your comic into smaller components, you can lay out and style your page using CSS. Recent advances in browser support for newer CSS specs make creating complex responsive layouts much easier than it used to be. Thanks in large part to the advent of the flexbox spec (*), you can create comics layouts that respond to their viewing context, but retain the ability to execute complex page layouts.

Using HTML and CSS, you can code layouts from the very simple comicstrip-style three or four panel row:

...to multi-row webcomics-style layouts:

...to complicated layouts like the ones in floppy printed comic books:

Each of the icons below links to its corresponding example layout on a stand-alone page, so that you can resize the full browser window (or load the page on a mobile device) and get a sense of how each layout adapts to its viewport. Each layout is based on an existing layout used in print comics. At small sizes, the page reverts to a stacked panel layout, in order to maximize the space available. At larger viewport sizes, the panels are laid out according to the artists' original designs for print.

Since these demo pages use layouts that are adapted from layouts originally intended for static print comics, they are artificially constrained and will stop responding to the viewport size when they reach roughly the proportions of a six-by-nine inch printed comics page. But since they are fluid, they avoid the “lateral letterboxing” effect previously discussed and take much better advantage of the viewport when viewed on an iPad, and can properly fill in the space. The difference is subtle, but effective: the lack of a letterboxed zone helps immerse the reader in the comic.

Moving past the artificial constraints that are imposed when adapting pages from print to digital, you can start to think about what a page layout looks like at even larger viewport size—once you’ve sorted out how the layout collapses into a small-screen viewing context, how does a layout differ when it’s viewed on a large, desktop, landscape-oriented monitor? More importantly, what does that means for the story that you’re trying to tell?

Live text

Working with live text is fundamental online—the days of making pictures of text whenever we want to design type on websites is well in the past, thanks to advances in web typography.

Working with live text affords many basic benefits. Live text can be resized to suit many presentational contexts. It allows for search engines and other robots to parse content, making content easier to find, and more accessible to differently abled readers. Live text can also be translated into multiple languages, thereby making worldwide distribution of language-localized comics a lot more achievable for publishers.

Current approaches to digital comics treat text as pictures of words, rather than as searchable, semantic text. Captions and word balloons are simply a part of the same flat, raster image file that includes the comic’s artwork (usually a Jpeg or—at best—a PDF). Up to now, comics producers have mostly sidestepped the issue of changing their workflow to account for live text, and with good reason: the accuracy and pixel-perfection required for typesetting and placing text inside word balloons (and then placing those word balloons relative to the artwork, inside a panel) is difficult to achieve outside of graphics applications such as Adobe’s InDesign or Illustrator, which are primarily intended for print-based, static design.

But by using the right techniques and technology, you can achieve properly laid out and styled live text in comics, and to great effect. The solution comes in two parts: First, you can use CSS to style regular text. CSS allows you to typeset your text into a fluid container, such as a caption box. For word balloons, sound effects, and other live text that requires pixel-perfect graphic precision, letterers can export their Illustrator files as SVG, which mathematically renders their design to the pixel using vectors, while retaining resolution independence and accurate semantics.

As with the example above, the full page demo at the link below shows a page using a responsive comics layout, along with various styles of word balloons and captions. The text is selectable, searchable, and scalable—go ahead and try it out in your browser. These SVG files can be linked to and positioned just like any other image, but SVG is also just another XML document—its a close cousin of HTML. By including the SVG code that Illustrator generates inline, directly in the markup of the HTML of your comics page, you can set the stage for replacing word balloons and other textual artwork with localized versions in multiple languages.

Resolution-independent Artwork

A large part of making accessible, responsive websites is creating imagery that is as lightweight and versatile as possible. Working with resolution-independent, vector-based artwork is your best bet to achieve these goals.

The principal benefit of working with vector images is scalability, or the ability for a piece of artwork to change its size depending on its viewing context, and not lose its crispness and fidelity. If you've ever been bothered by fuzzy or crunchy-looking images on a high-resolution iPad or iPhone, you know how crucial it is to serve up resolution-independent imagery.

Additionally, resolution-independent artwork allows for much better performance, especially in bandwidth-constrained contexts. A piece of vector artwork will download much faster than its raster-based counterpart, improving load times for the reader and reducing bandwidth costs if you’re publishing online.

To create resolution-independent files for artwork, we can once more export from drawing apps like Adobe Illustrator directly into SVG graphics. While some artwork will always need to be raster based, you’d be surprised by how much of the ink-based digital comics art already being produced can be expressed as vector artwork. By making some changes to the artwork creation and production process, artists and production specialists can generate much more versatile, optimized assets for building comics.

The idea of altering the way in which artwork is produced can add to the learning curve when working with the approach to digital comics outlined in this article, since it directly infringes on a working artists' process and workflow, which affects not only the speed at which the artist can work, but also the actual aesthetics of their work, and the quality of the storytelling. But the end result—crisper artwork at all sizes, and lower bandwidth costs for reader and publisher—is absolutely worth the effort.