1. Introduction

In October 10th, 2019, it’s announced in various entertainment news websites the partnership between webcomics’ platform Webtoons and The Jim Henson Company to develop Rachel Smythe’s “Lore Olympus¹” (Figure 1) as an animated series aimed at young adults. This news could be considered commonplace, if not for two reasons: 1) This is a webcomics series exclusively digital, focused on the small screen devices reading; and 2) it has more than 15 million daily readers (BOUCHER, 2019).

 

Fig.1 — Lore Olympus

Source: BOUCHER, 2019

 

Lore Olympus, like the other webcomics series published on the Webtoons platform, are what has been called “Mobile Comics”: a type of comics that is made for an audience that reads their content on their smartphones (or other types of small portable devices). In countries such as Japan and South Korea, where comic book magazines production is massive, the transposition of printed comics into digital media, mainly mobile, is a lucrative market. The problem is that, unlike websites - which can be worked with responsive design in an automated way – comics, being originally created for reading in paper of much larger sizes than the small smartphone screens, are not as successful at resizing: the little texts inside the balloons, the reminders, the sound effects, and even details like the expressions on the faces of the characters can end up being lost in the reduction, forcing readers to enlarge and navigate on the pages.

For the purpose of delimitation, this article will consider as “small screen devices” the ones that present up to 7” sized screens, as it is shown on Figure 2. In this category, we can include smartphones, phablets², and some digital reading devices, and exclude tablets and notebooks.

 

Fig. 2 —Examples of small screen devices, with screen sizes up to 7”.

Source: From the authors.

 

Although the expression "mobile comics" is still associated with academic studies that seek classic comic’s pages fragmentation for reading in small screen devices, it is still possible to find this expression in sites focused on the profession of comic creation. So, this article’s objective is to answer the following research question: from the design perspective, what differs classic comics and webcomics from mobile comics, and in what form these characteristics contribute to the reading experience in small screen devices?

 

2. Webcomics Reading, Fragmentation and Adaptability

According to Pophal (2018), "People spend more time consuming digital media on mobile devices than on a desktop and this trend will definitely continue." Nowadays, any media that offers information or entertainment already has digital versions that predicts for this type of reading. Concern over content adaptability ranges from rearranging websites to making smartphone reading enjoyable, to, for example, descriptive captions on videos that will be watched in public places, and often with the audio options turned off. So, it is understandable to notice a movement of researchers perceiving how to make all the content of printed comics into digital, focusing on compatibility with small screens reading, to take advantage of this market gap.

As Schade (2017) states, "Mobile designs need to do more than shrink a desktop experience to a smaller screen". In the case of webcomics, a mere reduction of pages that were originally created to be read on sheets of average 17x26cm sized paper might not get the visual impact intended by the comic author. However, what is found so far in academic studies concerning comics for small screen devices with readability seeks the path of page fragmentation, as explained in Figure 3, where algorithms automatically identify isolated frames of the narrative and display them separately on the reader’s device (QIU; ZHANG; HUANG, 2004; CHAN; LEUNG; KOMURA, 2007; HAN et al, 2009; PONSARD; FRIES, 2009; ARAI; TOLLE, 2010; TOBITA, 2010; TOBITA, 2011).

 

Fig. 3 — Comics pages fragmentation for reading on small screen devices

Source: Adapted from ARAI; TOLLE, 2010, p. 2.

 

However, it is not uncommon to find different solutions for this same problem. One of them, for example, is presented by Google³: in the comics sold on the GooglePlay content store, the automatic magnification of the speech bubbles of the pages is offered for better reading on small screen devices (PRADO, 2016), as showed in Figure 4.

 

Fig. 4 — Speech bubbles magnification at GooglePlay Content Store

Source: PRADO, 2016.

 

This concern in converting printed comic pages on digital content for reading on mobile devices - including small screen ones - nevertheless presents weaknesses, as the proposal of Figure 3’s authors, Arai and Tolle (2010) suggest, when they state that their algorithm presents a 92% success rate of frame detection in performed tests, and admit that when there are contents extrapolating the frames, besides being more difficult to identify, they can be lost. At the same time, the algorithm is based on the speech bubbles detection to be able to identify the frames, and may not work when the comic does not use this graphic feature. Resembling conclusions occur in other studies with similar proposals, such as those mentioned above. On the other hand, the solution presented in Figure 4 makes it possible to read the texts of the balloons, but fails to display the page’s art richness of details, which virtually disappear in the reduction.

Contrary to this reasoning, webcomics created with a focus on reading for small screen devices are found on the internet, avoiding the need for the reader to enlarge or navigate the pages for readability. They are very popular on social media sites, like Facebook, Twitter, Instagram, Pinterest and Tumblr, reaching impressive engaging numbers, like the example on Figure 5.

 

Fig. 5 — Sarah Andersen's popular autobiographic comics, on twitter

Source: https://twitter.com/SarahCAndersen/status/1127219479954509826, accessed on 14/October/2019.

 

Those numbers showed on Figure 5 are very positive for creators but publishing in social media sites can be a difficult experience. Some of the difficulties are:

— Most social media sites tend to aggressively make use of image compress algorithms to reduce file size, which can lower quality so much that it can be difficult to read small texts or identify small details;

— As such, most of them also use arbitrary crop of the images for preview, which in comics can ruin the reading experience by spoiling the narrative;

— Depending on which social media site the comic is published, there could be a limitation to how many images can be uploaded, or its size. In case of the comic needing more images to tell the story, the author may need to fragment it on sequenced posts, increasing the chance of compromising reading experience.

— Social media sites are platforms that aim for social interactions and photos/images sharing, so using hypermedia elements, or even infinite screen, aiming for a narrative that makes a better use of digital environments, can be unattainable – except, maybe for the use of animated gifs.

— Because of a social media sites’ striking characteristic, images can be redistributed from different user accounts, loosing track of the original creators. To avoid missing authorship, artists have to identify their images by virtually signing it with a name, e-mail or username, so people who receive their creations from indirect sources can identify its authors, as can be seen on Figure 5.

Even with all of those negative points, social media sites are still considered as great ally for digital comic artists, exactly by its organic content distribution nature.

Although, if the comic author is looking for a more professional way of distributing their creations, with more display quality and clear ways of monetizing, social media sites may be a good way to publicize their work, but the webcomics platforms are the best place to actually publish it.

 

3. Webcomics platforms

In order to better understand both webcomics publishing platforms, as webcomics itself, this article will analyze the major platforms of this style found on the internet so far.

The items to be looked for in these platforms are: 1) The availability, or lack thereof, of applications for reading on mobile devices; 2) The comic formats it provides; and 3) The possibility and use of hypermedia elements.

The comic formats mentioned in the second item, to be searched on the platforms, will be identified by their visual composition characteristics, and will be defined by means of the following nomenclatures (Figure 6):

— Classic Strips (CS): when presenting comic strips that follow the same classic model of printed comic strips, with the horizontal frame’s layout;

— Vertical Strips (VS): when there are short narratives, similar to classic comic strips, but arranged vertically, providing better visualization on mobile devices screens;

— Paged (PG): When the digital comics follow the same pattern of classic printed comics, with pages separation, without using the possibility of the infinite screen;

— Infinite Screen (IS): when the comics make use of the infinite screen possibility;

— Digitized (DI): When comics are originally made for print media, scanned/digitalized and made available online.

— Small Screen (SS): When the comics are presented with composition and design concerns that allows reading on small screen devices without the use of features such as zooming, enlarging or fragmenting frames.

 

Fig. 6 — Webcomics formats 

Source: The Authors

 

In Table 1, only webcomics platforms that legally distribute their content are included. The several platforms that distribute digitized comics without permission of the authors or publishers are not considered for this research.
 

Table 1 — Comparison of webcomics platforms

Source: From the authors, according to information collected in April of 2019.

 

Table 1 shows that 8 of the 14 digital comic distribution platforms offer applications for the major mobile devices, indicating a concern with this potential audience. However, of these 8 platforms, only 4 feature comics that were developed for comfortable reading on small screen devices; the others offer comics that visually work better in larger formats, whether on large screens or printed.

As can be seen in Figure 7, the most frequent webcomic formats found on the platforms are Paged (PG) and Digitized (DI), that is, presenting the classic way of reading and developing printed comics, followed by other styles, all with equivalent amounts. Of the 14 platforms, 7 present comics can be read in small screen devices, which is half of the platforms researched.

 

Fig. 7 — Quantities of Comic formats found on platforms

Source: From the authors
 

Finally, regarding hypermedia elements, five platforms that present their use were found, most with animations, made possible by the use of Animated Gifs, and some with the possibility of soundtrack insertion.

 

4. Main Characteristics of Mobile Comics

With the analysis of the webcomics offered in the previous section selected platforms, this study identified ten design features that facilitate small screen reading, which characterize the Mobile Comics and differ them from other types of webcomics, as presented in two main formats, as follows.

Fig. 8 — Screen captures of the Vertical Strips “Blue Chair” and "Sarah's Scribbles", and Infinite Screen Narratives "Something About us" and "Roommate Assassin”.

Source: Assembled from the authors, from platforms Webtoon and Lezhin.

As illustrated in Figure 8, the two main webcomic formats identified that allow reading on small screen devices without the use of features such as magnification and fragmentation, are the Vertical Strips and Infinite Screen Narratives.

Vertical Strips are short narratives, which usually fit entirely on a small screen or require little scrolling. They work in the same way as the classic comic strips published in printed newspapers, but with a layout free of publication size restrictions and with vertically stacked frames, to enable reading on devices in vertical position, which is how they are usually held by users.

For this format, the present study identified four striking design features:

— Simplicity: fewer colors and simpler strokes are used, which avoid a great loss of quality in the image files, in case the comic is redistributed on social networking sites that use more severe compression algorithms.

— Breath Areas: Generous blanks spaces are used, which makes the design cleaner and the reading easier, taking advantage of the layout freedom of a media that is not physically limited as one that is printed.

— Larger lettering: Despite following the well-known norms of using typefaces that imitate manual handwriting, the lettering is applied in proportionally larger sizes, seeking a comfortable readability in small screens, without the need of enlarging the frames. It is also quite common to find genuinely handwritten lettering, made possible by short narratives that require little text.

— Identification: The comics usually earn a signature of the author, with the address of their main site, email, or username of some social media site, so readers can trace it back to its author in case the image is redistributed without the link of the original publication.

Thus, Infinite Screen Narratives, which are longer narratives, and requires the readers to scroll to continue the story, present other five identified characteristics:

— Silence Areas: the use of large empty spaces in the gutters, between one frame and another, that aim to isolate certain scenes to modify the reading pacing, as well as to isolate scenes of greater impact in the narrative.

— Dramatic Units in Frames or Clusters: As stated by Kneece (2015), each comic page must be considered a narrative development dramatic unit, with cause and effect, that will be part of a whole. In the case of mobile comics, the use of the Silence Areas mentioned above contributes to the drama of the narrative, bringing this function of dramatic unity to the frames, alone or clustered in small groups.

— Screen Width Usage: Horizontally aligned frames appear infrequently, and only when less important situations are being narrated. In order to make the most of the small space, the frames make use of the whole width of the screen to give more space to the relevant details and expressions of the characters. 

— Vertical Route Reading: Complementarily, the zig-zag reading route, proposed by Eisner (1999) in Figure 9 is usually replaced by a vertical reading, aided by scrolling the infinite screen.
 

Fig. 9 —Common Reading route for printed comics

Source: EISNER, 1999, p. 41

 

— Hypermedia: animations, when used, are small and looping, to emphasize some event of the narrative and, generally, to increase the comic factor. Soundtracks, which can be activated in certain chapters or scenes according to the dramatic construction of the narrative, also seek to immerse the reader in the story.

— Varying Length Narratives: Although not a significant feature, it’s noticeable that Infinite Screen Narratives, freed from imposed limitations by printed pages count, usually present serial chapters with variations of length.

From these ten listed characteristics, Table 2 presents an organized comparison with main points of divergence between classic and mobile comics.
 

Table 2 — Summary of classic and mobile comics characteristics compared

Source: From the authors.

 

5. Conclusions

In order to understand what differs digital classic from mobile comics, and in what way these characteristics contribute to the reading experience in small screen devices from the design perspective, the present article carried out an analysis of publications in several online platforms of Comics content distribution, in relation to its main design features.

The analysis gave rise to a list of ten design features that distinguish them into two distinct formats - Vertical Strips and Infinite Screen Narratives -, both in their development and for reading, which are: simplicity, breath areas, larger lettering, identification, silence areas, dramatic units in frames or clusters, screen width usage, vertical route reading, hypermedia, and varying length narratives.

Comic books are, by nature, guided by the creativity and daring of their authors, who are always looking for new ways to surprise readers through this medium (PRESSER; BRAVIANO; FIALHO, 2017). Thus, identifying significant changes in visual language and design imply a phase of great relevance in the development of this form of visual expression, so popular and widespread among diverse cultures around the world. The maturation of this recent way of making comics may be considered, perhaps, a new subgenre, such as comic strips, cartoons and mangas, within the hyper genre Comics, as stated by Ramos (2012); or, on the other hand, be considered as an entirely new media, unrelated to its origin. A more precise understanding of its nomenclature, however, is not the purpose of this article, and can be addressed in future studies.

This analysis in mobile comics and its platforms was finalized in April 2019. Some of the characteristics pointed out were identified only recently in digital publications, which reinforces the idea of ​​a changing media. In this sense, the possibility is also opened for more in-depth studies on the characteristics identified, pointed out and interpreted in this article, as well as quantitative or qualitative research with professionals and comic readers on their perceptions in this regard.

 

Notes

[1] Available at https://www.webtoons.com/en/romance/lore-olympus/list?title_no=1320, access in 11/oct/2019.

[2] The name comes from the junction of “phone” and “tablets”, used for devices that presents an in-between size of those two types: a little bigger than a smartphone, a little smaller than a classic tablet.

[3] Available at https://play.google.com/store, accessed in 31/10/2017.

 

Acknowledgments

PDSE-CAPES Scholarship (Ed. nº47/2017 - Seleção 2018)

A preliminary version of this paper was published in DDC’19 Conference in: Duarte, E. (Ed.) (2019). Design Doctoral Conference’19: TRANSformation. Proceedings of the DDC 6th Conference. Lisbon: IADE, Universidade Europeia / EDIÇÕES IADE. ISBN: 978-989-8473-27-1 

 

References

Boucher, G. (2019, October 10). ‘Lore Olympus’: Webtoon And The Jim Henson Company Will Partner For YA Animated Series. Deadline. Retrieved from https://deadline.com/2019/10/lore-olympus-webtoon-and-the-jim-henson-company-will-partner-for-ya-animated-series-1202757078/

Chan, C. H., Leung, H., & Komura, T. (2007). Automatic Panel Extraction of Color Comic Images. Advances in Multimedia Information Processing – PCM 2007,4810, 775-784. doi:https://doi.org/10.1007/978-3-540-77255-2_93

Eisner, W. (1999). Quadrinhos e arte seqüencial: A compreensão e a prática da forma de arte mais po-pular do mundo(4th ed.). São Paulo, SP: Martins Fontes.

Han, E., Wong, C., Jung, K., Lee, K., & Kim, E. (2009). Efficient page layout analysis on small devices. Journal of Zhejiang University-SCIENCE A,10(6), 800-804. doi:https://doi.org/10.1631/jzus.A0820842 

KNEECE, M. (2015). The Art of Comic Book Writing: The definitive guide to outlining, scripting, and pitching your sequential art stories. New York: Watson-guptill Publications.

PONSARD, C., & FRIES, V. (2009). Enhancing the accessibility for all of digital comic books. International Journal on Human-Computer Interaction (eMinds),1(5), 127-144. Retrieved May 20, 2019, from https://pdfs.semanticscholar.org/2bd8/1b7615e22fa3e20af676d1aa25d536baa10c.pdf.

Prado, J. (2016, July 21). Ficou bem mais fácil ler quadrinhos no smartphone. Retrieved May 20, 2019, from https://tecnoblog.net/198761/ler-quadrinhos-hq-smartphone-google/

Presser, A., Braviano, G., & Fialho, F. (2017). O uso criativo dos elementos na nova fase das Histórias em Quadrinhos no Brasil. Revista Triades,6(1), 1-18. Retrieved May 20, 2019, from https://triades.emnuvens.com.br/triades/article/view/73.

Qiu, M. K., Zhang, K., & Huang, M. L. (2004). An Empirical Study of Web Interface Design on Small Display Devices. 2004 IEEE/WIC/ACM International Conference on Web Intelligence (WI 2004),20-24. doi:https://doi.org/10.1109/WI.2004.10041

Ramos, P. (2012). A leitura dos quadrinhos(2nd ed.). São Paulo: Contexto.

Schade, A. (2017, October 15). We Can Do Better on Mobile: Designing for the Medium. Retrieved May 20, 2019, from https://www.nngroup.com/articles/better-mobile/

Tobita, H. (2010). Comic engine: Interactive system for creating and browsing comic books with Attention Cuing. Conference: Proceedings of the International Conference on Advanced Visual Interfaces. http://dx.doi.org/10.1145/1842993.1843042

Tobita, H. (2011). Comic computing: Creation and communication with comic. SIGDOC '11 Proceedings of the 29th ACM International Conference on Design of Communication,91-98. doi:https://doi.org/10.1145/2038476.2038494

Tolle, H., & Arai, K. (2010). Automatic E-Comic Content Adaptation. International Journal of Ubiquitous Computing (IJUC),1(1), 1-11. Retrieved May 20, 2019, from http://www.cscjournals.org/library/manuscriptinfo.php?mc=IJUC-1#MCAI