The Storybook Comics Philosophy.

Let's look at what we mean by the term "web comic" and some concepts for a web comic site design.

There are a wealth of devices being used to view web content. The two things of import there are the device aspect ratio and the overall display size. By aspect ratio we mean portrait mode or landscape mode displays, like a rectangular sheet of ordinary typewriter held vertically or horizontally. When we try to fit a drawing or a page that has one aspect ratio, say landscape, to a display that has another aspect, like portrait, one can readily see that this presents issues in the proper display of the image. For one thing we don't want to stretch the image in one direction and not the other lest we end up with a distorted result. Similarly if we are looking at shrinking the image we want to keep the constraint of aspect ratio in mind.

This Display Data Points document is a collection of data points relative to sheet sizes, page sizes, and screen sizes along with approximate user share percentages and display aspect ratios. The two largest observations here are that displays are largely either tall and not very wide, or they are short and fairly wide. Who knew, right? But besides the obvious, the data can serve to allow us some generalizations. One of these observations is that smaller vertically oriented displays tend to have an aspect ratio between 0.46 and 0.56, which is to say the display is almost twice as tall as it is wide. (Most users are not excited about holding their cellphone horizontally I think.) Meanwhile, virtually all desktop screens have an aspect ratio of 1.78, not quite twice as wide as they are tall. We can shuffle and rearrange content to fit a display, and to a certain extent that is unavoidable. But the reality is that if you want to present images as content it is best that they have the same aspect as the display. So the key here is to answer one question: who is your audience?

This collection of sample images demonstrates how a display will appear with different sized images and different aspect ratios. You may notice the display at the top left showing the viewport dimensions, or display size, and the aspect ratio of the display. That is not ordinarily shown in the comics. Each comic book image is scaled using the aspect ratio of the display and of the image to optimize the image display without dimensional distortions. These information panels are also not ordinarily displayed in the comics. If you can change the size of your browser window you can see how the images respond and appear on different screen sizes.

Another area to consider is color palette choices, "themes" if you will. Now you have this comic, this image, and certainly the colors in that are your choice entirely. But users want to have choices on things like gutter colors, any dialog or text not part of an image, backgrounds, and so forth. If you look at the demo comic books, there is text content in addition to the graphics, the comic images. I used a kind of muted grey for the background and text boxes (one blue toned the other green toned). Users will get to choose their own scheme. And users will be able to choose a font as well. Many of the palette choices are from Material Design Bootstrap.

We want a clean straightforward UI/UE without extraneous clutter and distractions. If indeed it's a comic books site it should focus on comic books. So the intent is to avoid adware clickbait clutter.

A comic book differs from a graphic novel in terms of length. Within limits there are no plans to limit content length. In fact, at one extreme, you could even go so far as to have a one page comic. But even more, we want to support what I will call illustrated novels or stories. Content that has a good deal of text in addition to some illustrations/images. Along those lines the current plan is to allow Rich Text Format or RTF as input as well as plain text. I will also look at Word or Open Office as input text.

This is all going to be free, anyone can have all the code, and anyone will be able to use the app to make their own comics which they can share or host on the builder site AND download for use elsewhere or share on Facebook.

Display Data Points

A standard US comic book page size is 6.875 by 10.438 inches bleed,
6.625 by 10.187 inches trim, with a live image area of around 6 by 9.5 inches
This results in an aspect ratio of 0.63 (live area) to 0.65 (trim)

Heavy Metal magazine has a trim size of 8 X 10.875 inches,
which is an aspect of 0.74

Print Ninja says traditional "trade" or single issue comic book page size is
6.625 x 10.25 inches, which is an aspect ratio of 0.65
and modern "trade" recommended page size is 6.75 x 10.375 inches,
which is an aspect ratio of 0.65

Common paper sizes
----------------------
8.5x11 has an aspect ratio of 0.77
11x8.5 has a ratio 0f 1.29
9x12 has an aspect ratio of 0.75
12x9 has a ratio of 1.33
11x14 has an aspect ratio of 0.79
14x11 has a ratio of 1.27

Dimensions Share Aspect
--------------------------
all devices
360x640 10.15% 0.56
1366x768 9.4% 1.78
1920x1080 8.39% 1.78
375x667 4.05% 0.56
414x896 3.47% 0.46
1536x864 3.44% 1.78

mobile
360x640 17.63% 0.56
375x667 7.16% 0.56
414x896 6.14% 0.46
360x780 5.7% 0.46
360x760 5.14% 0.47
375x812 4.53% 0.46

desktop
1366x768 23.26% 1.78
1920x1080 20.41% 1.78
1536x864 8.53% 1.78
1440x900 6.98% 1.60
1280x720 4.82% 1.78
1600x900 4.14% 1.78

tablet
768x1024 50.74% 0.75
1280x800 7.42% 1.60
800x1280 5.41% 0.63
601x962 4.63% 0.63
962x601 3.43% 1.60
600x1024 2.9% 0.59

----------------------
Some other stats
1024x768 px 3% 1.333
1280x800 px 11% 1.60
1360x768 px 2% 1.77
1366x768 px 35% 1.78
1440x900 px 6% 1.60
1600x900 px 6% 1.78
1680x1050 px 3% 1.60
1920x1080 px 20% 1.78
2560x1440 px 1% 1.78

Stats from a developer site (Jan 2020)
---------------------
Other 37.5%
1920x1080 20.3% 1.78
1366x768 27.6% 1.78
1280x1024 2.4% 1.25
1280x800 1.8% 1.60
1024x768 1.4% 1.33
Lower 9.0%