Applying the fine art of web design to online comics

Make the meaning of your comics semantically rich and searchable.

This article is about making webcomics better, making the meaning of your comics semantically rich and searchable, and finding new readers for your comics by using semantic markup in stride with some imagination.

This article is about making webcomics better: finding new readers for your comics and increasing search engine exposure by using semantic markup in stride with some imagination.

A quick overview:

  1. The classic method of displaying comics online
  2. Markup you can use to make your comics more meaningful
  3. A live demo of the experiment

The most successful webcomics connect to readers based on specific details of experience and common interest. The biggest fans of webcomics aren’t usually comics fans— they are people who found a personal connection to the details of a character, setting, topic, or an author’s voice.

As a visual medium, webcomics depends almost totally on images to communicate these things. Insofar as webcomics use words, they are usually embedded in the image, inaccessible by search indices and other aggregators. What if it was possible to deploy your comic with all that meaningful detail formatted in a searchable way, without cluttering up your page with a full transcript?

The idea for this came to me over a year ago while reading Transcending CSS: the Fine Art of Web Design by Andy Clarke. In Transcending CSS, Clarke argues that almost anything can be translated into meaningful markup for the web.

The old discipline

HTML was originally conceived to format academic documents, and conventional thinking has relegated comics to the backwoods when it comes to giving them rich, meaningful markup.

The most basic way to deploy your comics online is to upload some images to a server and use the HTML image element somewhere in your document to display them. Then, link them together in sequence. Something like this:

<h2><a title="previous tile" href="previous.html">&lt;</a> Hit the ground <a href="next.html" title="next tile">&gt;</a></h2>
<a href="next.html"><img src="/images/soy/2005.02.21.png" alt="for the DIDDLUM DAY: hit the ground" /></a>

Apart from the alt attribute, and whatever text might be used in links pointing to your comic, search engines have nothing to tell them the content of the comic itself. In a time when microformats can create a richer user experience for contact information, events, blogs, and even human relationships, it doesn’t make sense for comics to get stuck in the cranky old img element by itself.

Unfortunately, XHTML doesn’t include elements for “frame”, “speech balloon”, or “sound effect”. Luckily, we can use XHTML compounds to do all of these things and more.

Ready?

Feel free to check out the demo page and follow along.

You’ll need these ingredients.

The main tool you’ll need is a text editor. Once you have the basic elements of the compound, you can use your content publishing tool to generate some of these things on the fly.

  • Pages: What is a page but a sequence of frames? Sequential information in XHTML uses the ordered list element, ol.
  • Panel: You can think of the list item, li, as the container for each frame in the sequence.
  • Speech: XHTML has two elements to describe what a person says: quote and blockquote. Since speech balloons are usually discrete blocks of text, we’ll use blockquote.
  • Characters: In XHTML, we use the cite element to refer to the person speaking.1
  • Direction: Stage directions and scene transitions don’t need special treatment— we’ll just use the p element, for paragraphs, when necessary.

Using those elements2, the basic XHTML compounds for a two-panel comic might look like this:

<ol> <!-- // Page // -->
	<li> <!-- // Panel 1 // -->
		<p>Andy Clarke walks into a crowded saloon, holding a pair of tongs.</p>
		<cite>Andy</cite>
		<blockquote><p>What am I doing <em>here</em>?</p></blockquote>
	</li>
	<li> <!-- // Panel 2 // -->
		<p>Scott McCloud, cleaning a mug behind the counter, turns to face Andy.</p>
		<cite>Scott</cite>
		<blockquote><p>Have a seat, Andy. This is a webcomic, and we need your help.</p></blockquote>
	</li>
</ol>

Webcomic? What about the juxtaposed pictoral images?

If you load that in your browser, you’ll think I’m crazy. So let’s demonstrate this with a real life comic. For this example, we’ll dust off a piece from my old webcomics site: Hit the Ground featuring Johnny Appleseed.

Let’s get started.

Panel up.

This is a six-panel comic, so we need one ordered list with six list items.

The first two frames don’t demand anything fancy, just a little stage direction:

<h2>for the DIDDLUM DAY: Hit the Ground</h2>
<ol>
	<li>A giant machine churns out smoke behind a chain-link fence as Johnny Appleseed glances around forlornly on the other side.</li>
	<li>Johnny turns his gaze blankly.</li>
	[...]

The heading element refers to the title in the first panel, but since the title pertains to the whole comic, I’ve placed it above the ol to reflect the information hierarchy.

Here, the stage direction is kind of bland, but since we’re not writing a script, we can punch up the prose all we want to tell the story better. I’ll opt for first-person narrative.

Suddenly, there is action.

Talking heads

Now, we just use the ingredients above to distill meaning into markup for the dialogue that follows:

<li>
	<p>Then I turned to see a man in a blue uniform behind me, pointing a gun right at my head!</p>
	<ol>
		<li>
			<cite>Security Officer</cite>
			<blockquote><p><strong>Hit the ground, dirt-bag! You're under arrest!</strong></p></blockquote>
		</li>
		<li>
			<cite>Appleseed</cite>
			<blockquote><p>oh diggity darn</p></blockquote>
		</li>
	</ol>
</li>

What? Another ordered list? Sometimes, everything in a frame happens at once, but that’s not the case here— the dialogue is sequential.

Juxtaposing those pictures

So far, we’ve talked about building the comic in markup that adds meaning to your images, but what about the pictures? Given the advances in browser support for CSS, we have several options:

  1. The img element, same as the old discipline.
  2. Target the root ol with CSS image replacement, and display a single image file of the page in its place.
  3. Target each panel with image replacement to display an image file for each li. This has the advantage of allowing you to slice your images, giving you more granular control over file-size and image quality. By using alpha-transparent PNG, you could even layer several images in spectacular ways.
  4. Finally, you could use your art for each panel as in option 3 above, leaving out the speech balloons. Since we’ve anchored the speech in blockquotes, we can assign style to those elements in CSS to display them as balloons. This is the most accessible option for readers with vision impairments, by allowing them to resize text with ease, but you sacrifice some control over using text as an image.

I’ve seen very few comics that blend stylesheets into their presentation and storytelling, but I can imagine great work evolving from such experiments. The third and fourth options above suggest only some of the potential. The markup method I’ve presented in this article provides several hooks on which to hang your graphics, layout, and and other style using CSS.

The method you use to integrate the XHTML compound into your design depends on which option you choose to display your art.

Since this is my first article on the subject, lets go with the easiest option: keep the classic image element to display the entire page as a single image, and hide the additional markup with CSS.

Unless you want to hide every ordered list in the entire document, you’ll want to assign an id element to select your ol compound directly. I’ve called mine “page”. Your CSS might look like this:

ol#page {
display: none;
}

In the demo page for this article, I went one step further so that you can click “More” under the comic and see the XHTML compound rendered by your browser with minimal styling.

That’s all.

I hope this is interesting, and I’d love to hear your ideas on other creative ways to share meaning from your comics on the web!

Discuss this article at The Comics Journal forum.

UPDATE: Several people have found this article searching for “css comic balloons”— if that’s you, check out David DeSandro’s intro to CSS Speech Bubbles. Hope this helps! 2009-02-24

1 Using cite and blockquote in this way was mentioned by Clarke in Transcending CSS pp84-85, and before that, it was outlined by Tantek Çelik.

2 Other ways of adding meaningful information to visual media on the web include meta tags for description and keywords, and the longdesc attribute. Meta elements are important, but using them to present meaningful content and SEO is untenable without real content in the page— search engines sometimes use a page’s meta description in results pages, but meta-content doesn’t weigh heavily in the indexing of content. The method described here is an alternative to using the longdesc attribute, which requires you to create a separate document for each image.

Commenting is closed for this article.

powered by TinyLetter