The panel layout is generally one of the first things to get drawn when starting a new comic book page. Like a cornerstone it determines where everything else is going to land on that page.

There many ways to approach the panel layout of a comic book page, from the most traditional, symetrical layouts to the mind-blowing creative layouts. We won’t get into that here because for one, the topic has been covered before in books and magazine articles, and that’s not what this blog post is about.

Things have changed with the web. It used to be that the panel layout was restricted to the size of the page, but what do you do when your readers experience your stories through a screen, and the size of that screen varies greatly in size, format and resolution from reader to reader?

These problems have been solved with responsive web design, but webcomics have yet to take adavantage of these tricks and techniques.

New developments on the web are allowing for creative new page layouts that weren’t possible before, where the artist delegates the panel structure to the reader’s device. In this way, the comic book page is always the right size for the screen and the panel layouts find the best fit.

Comics on the web

Since comics have migrated to the web, they have started to mutate, taking on the properties of its new medium. Some comics have become animated, others have even added a bit of interactivity, but the panel layout has generally been left unchanged. We don’t turn pages the way we used to, now with the availability the infinite scroll. But while it affects the way we read the comic, it doesn’t change the panel layout in any way. The end result is still a bunch of pages laid out vertically.

So, I need to learn to code?

No, err yes… Well, maybe! The beauty of this image format is that graphical programs can take care of creating the code while you focus on drawing the visuals. But knowing about the code is always useful if you want to push your creations to the next level.

You don’t need to, but you’ll probably want to, in order to take full advantage of what the medium has to offer. Most of the elements that make up SVG are quite simple, though a few of them are a bit complicated.

Your toolbox

Responsive web design has brought a few tools to the table. Recently grids have been enhanced or replaced, in some cases, by a new layout property in the browsers. That property is Flexbox. An automatic layout tool that know how to best display a series of blocks according to the device used to read the page.

Flexing raster images vs. flexing SVGs

I wanted to find out if it’s a good idea to split panels up into seperate SVG files and let flexbox order the panels.

How to Create SVG Panels that Overflow the way you want (them to)

overflow: visible on the SVG, yet overflow: hidden on the flex-item, so it can grow and reveal parts of the panel previously hidden. It won’t shrink past the viewbox.

How many panels can you flex?

Can it lead to unpredictable layouts?

Is it just a quirk or a viable way to serve webcomics?

What kind of Layouts are possible?

What’s the advantage of responsive panel layouts for webcomics. -Adapt exactly to the reader’s screen.

What about less traditional, more funky layouts?

Should I flex-grow vertically?

That’s up to you, but I’ve found a way to test out my panel layouts before creating the artwork.

Cheating the system, forcing panel placements.

<div class="panel">
    <svg class="art" viewBox="0 0 4000 3000">
        <rect class="overflow" x="-4000" y="0" width="12000" height="3000" fill="currentColor" stroke="none"/>
        <rect class="visible" x="0" y="0" width="4000" height="3000" fill="currentColor" stroke="none"/>
    </svg>
</div>

This is what it looks like on the page. The green area will always be visible, no matter what. The yellow area is the area of the image that is beyond the viewBox and will be visible when that particular panel is stretched out using the flex-grow property.

Unusual panel layouts made possible with responsive layout properties like Flexbox.

Can you overlap element from a panel that overflow the sourounding panels? Should you?

Ressources: