Notes towards a practice of responsive comics

Here's the very talented Pablo Defendini -- developer, designer, artist, digital guy -- describing how "responsive" comics can be made using HTML and CSS that intelligently format themselves for a variety of devices, and addressing the writing and illustration challenges this gives rise to. He's not talking about "motion comics" -- he's talking about comics where the layouts and writing take into account a range of screen-sizes and aspect ratios.

Responsive design works for websites, why not for digital comic books?

• [Daemonworks]

  Don’t really like it myself, would tend to restrict a lot of options that are available in full-page layouts, such as actually using the panels as a part of the design to contribute to the overall effect (ie. panel breaking, creative panels shapes, etc)

• [Egypt Urnash]

  Note: I have not looked at the talk yet.

  But my initial reaction to this is OH GOD NO I’M BEHIND SCHEDULE ENOUGH AS IS.

  I’m also not willing to make the compromises I feel it would involve – Spacetrawler, for instance, has a really nice panel-by-panel view for phones, but he can do this because he’s given himself a very restrictive maximum size to his panels. I’m too much of an addict to the occasional splash page.

  In fact, my current project simply doesn’t have this as an option. I’m playing with the weird properties of time in comics by running multiple stories in parallel. This would really just fall to pieces in a panel-by-panel view on a phone. (OTOH it’s designed first and foremost for the iPad; there’s a strong horizontal flow from one page to the next that really only comes out when swiping pages in a comics viewer.)

  (Not that future projects of mine might not be operating under a “can be broken up for phones” restriction – I always like to pick a few restrictions for each project, as I find they both help keep the scope manageable, and create a strong foundation upon which to go crazy in the unrestricted areas – but “works on phones” is a BIG one.)

• [Egypt Urnash]

  Hmm. I just looked at the talk and his examples. I still feel like my reaction is OH GOD NO I’M BEHIND SCHEDULE ENOUGH AS IS.

  I also feel like responsive-layout comics are almost a polar opposite of the McCloudian “Infinite canvas”. In IC, the artist is VERY much in command of the image and composition; it’s all about the idea of letting the viewer scroll around. Here, the composition is completely subordinate to the viewer’s screen size.

  I’m a big proponent of fluid layout in textual websites. I practice it myself. But I really feel like the best thing to do with images is to just throw them up on the screen with allowances made for presentation when the screen’s bigger than the image, and let the user scroll around. If their screen is too small to see the whole thing then they can either squint, or find a bigger screen.

  Maybe that makes me a dinosaur. I dunno. It certainly makes me not someone who’s going to be a pioneer in the bold new world of adaptive-layout comics.

• [binarymutant]

  as a fan of comic books, I’m not really interested in digital comics. They’re great for promotional use but like the video stated, the intended medium is a  physical page. The screen is also a place of distraction which keeps me from enjoying webcomics. (with the exception of 1-3 panes)

• [Tony_Moore]

  I haven’t taken in the video (yet) but the general idea is something that I’ve considered myself. I think once the kinks get worked out of ideas like this, and we get past clinging to the notions of comics’ intended medium being the printed page, as Mr Lunsford said above, I think we’ll finally get to the point of tailoring the content to the medium and taking advantage of its strengths and capabilities that aren’t really feasible in print, instead of trying to find ways to shoehorn the old content into the new form. Not talking about motion or sound like some kinda overdeveloped Clutch Cargo animatic, either. I mean elements like unnaturally long panoramas, multiple simultaneous changes on a static picture plane, true surprise on the flat page, and ways of toying with the flow of the story while still basically leaving the temporal aspects of taking in the story completely in the hands of the reader. At that point we can still have comics storytelling, unbastardized, it its true basic form, but the new digital medium will truly be its own.

• [pauljholden]

  I think this is interesting (and clever) stuff and I’m pretty sure people will be able to do some amazing things with it (I note one of the panels flips orientation depending on the screen size, which allows for clever storytelling)

  That said, I’ve a number of problems with it:

  He’s correctly identified that comics content is very deeply tied to its presentation – page turns give natural cliff hangers, double page splashes are brilliant ways to stop a reader dead in their tracks and look slack jawed at some cool story telling moment. This is completely abandoned in digital formats where panel by panel transitions become the norm (or common place).

  As a comic artist my solution here might be to start to use the panel by panel transitions to do some of the story telling or to start drawing comics smaller so that they are readable on a digital screen. (And, possibly, redraw/repurpose the art for two or three different ‘page’ sizes).

  I’m not sure making the panels reflow – unless accompanied by an amazing tool that let’s you set up panels – is really the optimal solution.

  Lettering is an issue that’s addressed as a CSS/layout problem, but lettering is a distinct artform on its own – lettering should be part of the art (though it’s nice that you can zoom in and the letters maintain a high resoultion)

  (A simple solution here is to keep all lettering on a transparent png file and overlay it on the actual finished art, you could then have multiple language formats available as different lettered png files)

  (Lettering done well is invisible to the reader)

  Still, clever solution, but not sure it’s the right one.

• [Bangorian]

  And if he’s not talking about any of that, he’s talking about the plague of gingivitis that is gripping our nation.  Plus he has a boot on his head.

• [Pablo Defendini]

  Pauljholden, thanks for the kind words. I don’t know that this is *the* right solution, but then, I don’t think there’s *just one* right solution—for example, while Scott McCloud’s Infinite Canvas, mentioned by Egypt Unrash above, is an interesting (and successful) approach, I’m personally not a huge fan—I think the paginated reading experience is important to the language of comics, and the IC gets rid of that, entirely.

  I actually agree with you—panel-by-panel reading eschews the unique conventions of the comics art form. Free-form reflowing is not the answer, since, as you point out, that throws out the entire conceit of a paginated reading experience—so crucial—IMHO—to the comics medium. What you’re describing as a solution is precisely what I’ve proposed, in fact: conceptualizing a handful of layouts for a handful of different screen (or more accurately, viewport) sizes, and using media queries to serve up the appropriate layouts for each viewport size. You can see it in action at defendini.com/bib

  The neat thing about this approach is that, as you noticed, each layout can have its own individual characteristics (the flipped panel, for instance) which enables slightly different storytelling for each layout.

  You’re also spot-on about lettering—typography on the web is still in its infancy, and there is still plenty to be done in order to replicate the expressiveness and minute control available to designers and typographers in print, on the web. That said, it’s a tradeoff: if all text is a PNG, you get that control, and that expressiveness, but you lose searchability, and more importantly, accessibility (alt-text notwithstanding). You also lose the ability to programatically serve up the story in multiple languages, as I briefly mention towards the end of my talk. That, I think , is an immensely empowering and democratizing feature, which can make up for the lack in typographic expressiveness, in some cases.

  Daemonworks, you bring up an interesting point, and one that I’m actually looking to address now, as I work on further iterations of this concept: using custom panel shapes and artwork breaking the panel borders to enhance the page design. These are things that are doable in the browser right now by using CSS image masks (only in Webkit for now, but hopefully there will be adoption by other browser makers eventually) and/or transparent images.