Responsive Comic

 

The Beginning

Several years ago, I developed a format to create comics designed to be viewed from a mobile device. As I started telling a friend about my findings with mobilecomic, he interrupted me and said

- What a great idea! responsive!.

-No, these are comics designed to be watched only from a mobile phone.

His face said it all. Somehow, I was working in an incomplete format. Was it possible to create a comic book publishing format that adapts to mobile and desktop?

The problem

Webcomics are born at first, to be viewed from a computer screen, that is, in landscape format. The irruption of the mobile phone and its vertical reading makes it very complex to adapt comics from one format to another.

A responsive comic should be read with similar narrative sensations horizontally and vertically. If the vignettes have different weights, it will be impossible for the author to play with the rhythm and look for resources that narrate in the same way in both formats. A vignette that occupies the entire screen on the computer may look small on the mobile phone and lose that desired impact.

A solution

That talk with my friend was the spark that made me start to look at the problem of finding a responsive format to create comics. Four and a half years later and after countless hours of headaches and learning the basics of HTML and CSS, what I present here is a solution. There are more solutions. Others will come. It's a solution where you hold on to some things and give up things. A responsive comic is a different format. The experience will never be like the one you have when reading a printed comic, but it is a format that, on the contrary, has other qualities.

 

Universality

This was always the key to the format for me. The reason that justified the hours devoted to that search.

The existence of a comic format that can be posted on a website and automatically viewed in any language and from anywhere, makes it the most accessible and universal format to watch comics. Surely not the best, but the most universal.

 

Quality Publications

The other challenge is to achieve quality publications, without formatting errors, that detract from the strength of the reading of the comic. Build a structure that allows for a satisfying reading experience.

 

The weights of the vignettes

If we want the reader to have a similar reading experience from a mobile phone or from a monitor, we must achieve similar visual impacts in both formats. A vignette that fills the entire screen of the mobile phone should also be able to fill the entire screen of a computer or tablet, so that the impact on the reader is the same.

It's possible?

 

Mobile first

To the question of whether it is possible, my answer is yes. Yes, but with limitations. We're not going to have everything. Along the way, we will lose some of the freedoms that a blank page of paper gives. That's the first thing you have to fit in and assume in order to continue.

To begin with, we have to choose one of the two options as dominant, here comes the famous phrase Mobile first! Why? Because it's a format with more limitations. Everything looks smaller.

The first step is to break down the weights of the vignettes on the mobile. That is, finding the different types of vignettes that can be read well from a mobile phone and prioritizing them by the screen space they occupy. From a full screen to a vignette with a minimum height and divided in two vertically.

These bullet points show us the formatting options we have.

 

Adaptation to horizontal.
The Great Resignations.

In the previous step, the only bullet options available to us have been defined. The responsive format forces us to give up possible vignettes that work very strongly horizontally because they cannot be adapted respecting the hierarchies of occupied screen space.

To fill the gaps in the horizontal version, the bullets must be grouped into groups with the same height.

 

Multilanguage

This is a finding from my experience in mobilecomic, which I incorporate into the responsive version. Having html texts makes comics translatable by browsers. This is the second quality that reinforces the universalizing character of the format.

Admittedly, there is a problem with translations. You have to struggle to find ways to create correct translations and implement them, because at the moment, machine translations present serious problems. From WordPress there are plugins that open up these possibilities.

 

Conclusion

A responsive comic starts from very large and strict limits, but it is an option to create a visual narrative. Not all styles of creation will be able to adapt to this type of comics, but there will be artistic choices that will allow it.

The big challenge is to work on comics designed for that format and get publications with a quality that has value for readers.

Is that possible?

On this page I post the stories that I create with this system.
 
And below is an outline of the different types of vignettes that I have been able to introduce.

Group A
Vignette height XL
Takes up the entire screen
horizontally and vertically

Group B.
Height M vignettes
Second degree of importance.

Group B.
1:1 Structure

Group C.
Height M vignettes.
One of the two splits.
1:2 structure.

Group C.

Group C.

Group D.
Height M vignettes.
4 blocks that are grouped two by two.
Structure 2:2.

Group D.

Group D.

Group D.

GroupE.
Height S vignettes.
1:1 structure.

GroupE

GroupF.
Height S vignettes.
Structure 2:2.

GroupF

GroupF.

GroupF.

GroupG.
Height S vignettes.
1:2 structure.

Group G

Group G