Responsive illustrations: proposal for the development of

adaptive drawings for future computer-mediated media Pedro Amado1

Catarina Silva2

Abstract

This paper presents the main concepts, technologies and limitations

underlying the responsive design workflow, repurposing them into the

development of responsive illustrations. It aims to demonstrate how this

workflow can be applied not only to illustration, but also how to other fields of

visual production and knowledge such as branding, icon design, editorial

design, or information design, bridging the gap between the technology and

the contemporary artistic creation.

The responsive design approach, originally proposed by Allsopp

(2000), proposes that we use the fragmented and fluid digital media

landscape as a creative constraint. This can be achieved by developing an

adaptive framework, designed to produce flexible drawings that take

advantage of the progressive enhancement of the digital medium in an

‘augmented space’ provided by the technology. According to Marcotte (2014),

this is not an easy task, but has several benefits than include an enhanced

and more coherent user experience, and less maintenance. In an increasingly

complex and more demanding publishing world, this can improve the

workflow of the digital artists and editors alike by supplying all the drawing’s

variations into a single unified responsive solution that adapts into the media

it is being displayed.

By developing and presenting a proof of concept based on media

queries and styled SVG files, we have found that the current technologies

provide enough support to develop and implement this approach. Besides

current limitations identified on previous research (Nebeling & Norrie, 2013,

2014), we also propose a set of practices and standards in order to better use

this approach and to extend it to other areas that can tap into the potential of

a creative discourse between the author or user creation, the design, and the

technological aspects of the XXI century media.

Keywords: Illustration, Responsive Design, Editorial Design, SVG

1 Pedro Amado, PhD, Department of Communication and Art, University of Aveiro, pamado@ua.pt. 2 Catarina Silva, PhD, Polytechnic Institute of Cávado and Ave School of Design, acsilva@ipca.pt. 2 Catarina Silva, PhD, Polytechnic Institute of Cávado and Ave School of Design, acsilva@ipca.pt.

Paper presented at the #14.ART International Meeting of Art and Technology

(https://14art.medialab.ufg.br/). 14.º Encontro Internacional de Arte e Tecnologia: #14.ART: arte e

desenvolvimento humano / coord. Paulo Bernardino Bastos, Suzete Venturelli e Cleomar Rocha. –Aveiro:

UA Editora, 2015 – 492 p. ISBN 978-972-789-458-1

Introduction

Current media consumption on screen is increasing (Google, 2012), and its

landscape is more fragmented than ever. Adopting a Responsive Design approach

(Marcotte, 2014) within the context of illustration design has several benefits that

include an enhanced and more coherent user experience, and less maintenance

(Florins & Vanderdonckt, 2004; Jiang, Zhang, Zhou, Jiang, & Zhang, 2014).

Although it’s not devoid of problems (Nebeling & Norrie, 2013, 2014), the

responsive approach tends to reduce the iterations needed throughout the

development of products (such as illustrations). Also, as media devices become

more diversified it is important to prepare the illustrations to adapt to current an

yet to come scenarios and devices (McAnlis et al., 2014; Mohorovicic, 2013;

Nebeling & Norrie, 2014). The purpose of this paper is to present a framework on

which everyone should be able to conceptualize future-proof, device independent,

responsive and progressively enhanced illustrations.

Media convergence as Jenkins (Jenkins, 2004, 2006) defined is a reality

within the sphere of the “three Cs” — computing, communication, and content.

Nevertheless, our technological convergence, as digitally uniform it may be, has

never been more fragmented (Ludes, 2008; OpenSignal, 2013). Devices present a

wide range of screen sizes and resolutions where the same information and

communication can take place (Figure 1).

Figure 1 – Sample of present day devices (retrieved from Jehl, 2014)

And the canvas is fluid and not static anymore (Jehl, 2014, p. 3). So the

possibilities are wide-ranging (Figure 2).

Figure 2 – Screen, or canvas display size fragmentation landscape (retrieved from

Jehl, 2014)

This presents a problem for content creators such as illustrators. In order to

provide a sense of an unified digital experience (Goodwin, 2009, pp. 479–501), the

authors have to devise a way in which to serve different versions of the same

illustration, while maintaining the same basic concept, and providing a similar

experience. Scaling will not suffice (Marcotte, 2014, p. 53) and cropping or

reframing can create communication, ethical, or copyright issues. A simple way to

resolve this is to add meta-information about the image presentation, and

creating mechanisms to control it in different media conditions — developing

responsive illustrations.

To produce responsive illustrations, the author’s workflow should take the

object recognition flow (Ware, 2004, p. 215) and the sequence of cognition into

account (Wheeler, 2009, p. 52) This means that the author of these illustrations

has to consider not only the gradual and progressive detailing of the information

conveyed by the illustration (from a cognition point of view) but also the device

reproduction capabilities. Hence, the creation of the illustrations’ contours has to

take place in an efficient way in the early visual processing stages (Ware, 2004, pp.

198–199). This works in a similar way the progressive enhancement has been

defined to deliver an unified experience across devices (Parker, Toland, Jehl, &

Wachs, 2010, p. xxvi).

Therefore, one should begin by defining the fundamental shape to convey

with the illustration, possible to reproduce at a small scale. This will define 1) the

main (irreducible) concept and 2) smallest possible use, or its use in the most

technically constrained environment. Then the author should proceed to enhance

the image the additional information, and visual detail (Figure 3)

Figure 3 – Example of the Progressive Visual Stacking (PVS)

We are defining this specific part of the workflow as Progressive Visual Stacking

(PVS) — defining a set of layers within the image that can be semantically linked

and activated by detecting the media its being served in. In the example above we

are using a three-tier stack that correspond to the sequence of cognition — shape,

color and form. Nevertheless, the PVS can be as complex as the media

configurations the author intends to serve.

Responsive Methodology and Workflow

Its three technological pillars can characterize responsive Design: flexible images,

media queries and progressive enhancements (Friedman, 2015; Jehl, 2014;

Marcotte, 2014; McAnlis et al., 2014; Nebeling & Norrie, 2014; Weiss, 2015). We

have opted to use SVG as the flexible image format (Soueidan, 2015), combined

with HTML <object> element as its support and CSS for presentation and

progressive enhancement control through @media queries.

The advantages of the SVG are: 1) it can scale cleanly (Powers, 2010); and 2) it is

one of the few standard [vector] image formats that provide support for semantic

markup that can be read and controlled from external inputs such as CSS. Since

the nature of the SVG files is to be scalable, we are only manipulating two

parameters: image detail (to screen size or resolution); image color (to device

capabilities), although other features like interaction or animation can be

manipulated.

This approach has to take into account that, although the current main

browsers support SVG display (Can I Use, 2015), not all provide the same support

proposed by this method. One such example is the pixelated aspect when scaling

an SVG in IE, or Edge browsers. Therefore authors have to rely on fallbacks. The

most simple example is to provide an ALT attribute describing the image,

whenever a user cannot see it, or the browser, device, or connection do not allow

to present it. The SVG approach should also rely on one or more fallback methods.

Namely, to use a single, or a stack of replacement bitmap image files (Soueidan,

2015; Weiss, 2015).

When deciding on the markup, despite the current standards, one should

also rely only on currently standard markup. Elements like the are still being

discussed and are moving along the process of becoming W3C standards also

(W3C, 2015a). But history has showed us that technology evolves and changes at a

faster pace than expected. And elements being proposed, or even part of current

best practices might not become standards, or may become obsolete as the

standards evolve (W3C, 2015b; WHATWG, 2015).

We present a simple proof of concept to illustrate the proposal for the

RIDW. In the first place, the illustration author must conceptualize the core

concept of the image. This will provide the illustration smallest part to be

displayed at the smallest breakpoint (usually at 320 px). This is a very simple

approach, although debatable, but it is inline with the Mobile First approach

(Wroblewski, 2014). Then, depending on the number of devices or configurations

being supported by the illustration the author should define the rest of the

breakpoints. There is no fixed set of rules to define breakpoints (Gemert, 2013;

Robson, 2012). We recommend at least a couple of additional breakpoints (e.g.

768px for tablets and small laptops, and 1100 px for large laptop or desktop

displays). Our proof of concept (Figure 4) was only developed for screens with

three breakpoints (the code can be viewed by inspecting its source). Nevertheless,

defining additional breakpoints for any media query combination desired can

further enhance it: portrait or landscape modes; screen, print, speech or all modes

(Marcotte, 2014, pp. 80–81).

Figure 4 – Responsive illustration proof of concept (available online at:

http://bit.ly/1ipyPN3)

The following diagram (Figure 5) summarizes the proposed set of practices and

standards to be used in the Responsive Illustration Design Workflow (RIDW) used

to produce the proof of concept.

Figure 5 – Responsive Illustration Design Workflow (RIDW) diagram

The RIDW is divided into 4 phases: 1) Concept development; 2) Rationale Tier

division; 3) Progressive Visual Stacking (PVS); 4) Semantic Markup.

The first phase corresponds to the creative process and technical aspects

must not hinder it. If the desired illustration that outcomes of this phase is not

suitable to vector drawing (SVG implementation) then the RIDW should be

avoided.

The second phase corresponds to the division of the illustration

components into three tiers: the main concept — the minimum and smallest

reproducible elements that convey the illustration concept and correspond to the

most basic shapes that do not depend on color to be perceived; the details and

information — the additional forms, visual attributes that augment the core

information such as color, lines or textures; and finally the aesthetics enhancement

— all the visual flare and stylistic elements that add to the experience of

CONCEPTDEVELOPMENT:

IDEA / SKETCH

PHASE 1 PHASE 2 PHASE 3 PHASE 4 RESPONSIVE ILLUSTRATION

RATIONALE TIER DIVISION:

1: MAIN CONCEPT 2. DETAILS AND INFORMATION 3. AESTHETICS ENHANCEMENT

DRAWING

VECTOR BASED ILLUSTRATION?

Y

N

Y

N

TIER DIVISION(MIN. 2)?

BITMAP BASED ILLUSTRATIONAVOID RIDW (SCALING OR PERFORMANCE ISSUES) DOT NOT

USE RIDW

320 px 768 px 1100 px

PROGRESSIVE VISUAL STACKING:

VECTOR DRAWING / SVG LAYERS

SEMANTIC MARKUP AND FILE LINKING

HTML PICTURE ELEMENT CSS PRESENTATION RULES

<html><css><svg>

<svg>

!

MDS 100%4:20PM

Safari File Edit View History Bookmarks Window Help Fri 4:20 PM100%

MDS 4:20PM 100%

enjoyment of the illustration but that are not crucial to communicate the concept

or additional information such as specific image filters, color effects, animation,

interaction or maybe even textual information. If it is not possible to divide the

image elements into, at least, the first two tiers, then the RIDW must not be used.

The third phase is mostly a technical phase that consists in the production

of the illustration in vector drawing software (by designing or tracing the elements

into it). On this phase, authors should take into account that the drawing elements

should be organized into specific layers corresponding to the relative tiers. This

means, for example, that each tier may have more than one layer. It depends only

on the complexity of the drawing and the desired progressive enhancement. The

grouping of the vector elements and naming of the layers is crucial from a

technical standpoint because it will become semantic information included in the

SVG file, used in the next phase. The general recommendation is to use SVG 1.1

standard and the file might need some “cleaning” in the xml produced (Soueidan,

2015).

The fourth and final phase consists in integrating the SVG and the CSS

within an HTML document. Depending on the way the SVG is integrated within the

HTML document, the CSS instructions should be placed in a specific order. We’ve

opted to include the SVG as an <object> despite other available options. Therefore

the CSS instructions have to be edited inside the SVG file (Soueidan, 2015). This

reduces the number of requests to obtain this responsive illustration and

enhances performance. But, as a negative consequence, if the author (or editor)

would like to tweak the breakpoints to serve the illustration to different media, he

would have to edit the illustration file itself. Nevertheless, the process is simplified

by abstracting the layer tiers into 3 different IDs — shape, color and form.

Limitations

From a creative point of view, what this illustration workflow proposes is that

authors and designers conceptualize and structure their images in a semantic

tiered approach. Despite Allsopp’s (2000) proposal, or Lawson’s creative

constraints creativity model (2005) this can become somewhat limiting to the

creative process for some authors. In a sense that it constrains the free thinking

approach and might impair the promotion of the sense of flow that some authors

mention achieving (Csikszentmihalyi, 1991).

From a technical standpoint, this approach should be applied to a specific

type of illustrations. Although fallbacks can be applied, photorealistic, detailed, or

texture-rich illustrations are inappropriate for this kind of approach. Nevertheless,

the effort one has to invest in developing the different resolutions might prove to

be inadequate. One final technical consideration is that it is only worthwhile

employing this approach if the size (in Kb) of the SVG files is comparable to the

sum of the file sizes of the bitmap images fallback (Soueidan, 2015; Weiss, 2015).

Although responsive illustration has been emerging since early 2013 (Kus, 2013),

this approach has yet to be adopted by authors and illustrators in a large scale. We

need additional research such as conducting content surveys and author

questionnaires to understand why this is still a shy practice among illustrators.

Conclusion

This approach implies that authors have additional work when creating

illustrations. Nevertheless, the additional semantic identification work can improve

the accessibility and media consumption experience of the illustrations on the

fluid-canvas digital media devices. The enhanced control on the illustration’s

presentation provides authors with an extra level of communication control. This

can improve the workflow of the digital artists and editors alike by: (a) supplying all

the drawing’s variations into a single unified responsive solution; and (b) help to

communicate the most important aspects to illustrate in different levels. This not

only helps the illustrator, but also helps to improve the illustration commissioning

and editorial process. This will also help promote a more responsible and effective

communication in the media the illustrations is being displayed.

We hope this paper contributes to improve the degree of information

defined and contained illustrations, but also that it can applicable to a multitude

disciplinary areas that include branding, icon design, editorial design for digital and

mobile media, or information design. But, especially in an educational context, we

expect that this approach can also better educate future authors by helping them

to understand the complex media landscape in which their creations will have to

be presented — to help them become better professionals by helping them to

develop a more communication effective workflow bridging the gap between the

technology and the contemporary artistic creation.

References

Allsopp, J. (2000). A Dao of Web Design. Retrieved September 10, 2015, from

http://alistapart.com/article/dao

Can I Use. (2015). SVG (basic support). Retrieved September 10, 2015, from

http://caniuse.com/#feat=svg

Florins, M., & Vanderdonckt, J. (2004). Graceful Degradation of User Interfaces As

a Design Method for Multiplatform Systems. In Proceedings of the 9th

International Conference on Intelligent User Interfaces (pp. 140–147). New

York, NY, USA: ACM. http://doi.org/10.1145/964442.964469

Friedman, V. (Ed.). (2015). Real-Life Responsive Web Design (1st ed.). Freiburg:

Smashing Magazine GmbH.

Gemert, V. van. (2013). Logical Breakpoints For Your Responsive Design. Retrieved

September 10, 2015, from

http://www.smashingmagazine.com/2013/03/logical-breakpoints-

responsive-design/

Goodwin, K. (2009). Designing for the Digital Age. Indianapolis: John Wiley &

Sons.

Google. (2012). The New Multi-Screen World Study. Retrieved September 10, 2015,

from https://www.thinkwithgoogle.com/research-studies/the-new-

multi-screen-world-study.html

Jehl, S. (2014). Responsible Responsive Design. New York: A Book Apart.

Jenkins, H. (2004). The Cultural Logic of Media Convergence. International Journal

of Cultural Studies, 7(1), 33–43.

http://doi.org/10.1177/1367877904040603

Jenkins, H. (2006). Convergence Culture. New York: New York University Press.

Jiang, W., Zhang, M., Zhou, B., Jiang, Y., & Zhang, Y. (2014). Responsive web design

mode and application. In 2014 IEEE Workshop on Advanced Research

and Technology in Industry Applications (WARTIA) (pp. 1303–1306). IEEE.

http://doi.org/10.1109/WARTIA.2014.6976522

Kus, M. (2013). Responsive Illustration. Retrieved September 10, 2015, from

http://previous.mikekus.com/archive/responsive-illustration/

Lawson, B. (2005). How Designers Think. Routledge.

Ludes, P. (2008). Convergence and fragmentation: Media technology and the

information society (Vol. 5). Bristol: Intellect.

Marcotte, E. (2014). Responsive Web Design (2nd ed.). New York: A Book Apart.

McAnlis, C., Lubbers, P., Jones, B., Tebbs, D., Manzur, A., Bennett, S., … Pagella, A.

(2014). The State of Responsive Design. In HTML5 Game Development

Insights SE - 13 (pp. 211–220). Apress. http://doi.org/10.1007/978-1-

4302-6698-3_13

Csikszentmihalyi, M. (1991). Flow: The psychology of optimal experience. Harper

and Row, 41, 6.

Mohorovicic, S. (2013). Implementing responsive web design for enhanced web

presence.

Nebeling, M., & Norrie, M. (2013). Responsive Design and Development: Methods,

Technologies and Current Issues. In F. Daniel, P. Dolog, & Q. Li (Eds.), Web

Engineering SE - 47 (Vol. 7977, pp. 510–513). Springer Berlin Heidelberg.

http://doi.org/10.1007/978-3-642-39200-9_47

Nebeling, M., & Norrie, M. (2014). Beyond Responsive Design: Adaptation to Touch

and Multitouch. In S. Casteleyn, G. Rossi, & M. Winckler (Eds.), Web

Engineering SE - 23 (Vol. 8541, pp. 380–389). Springer International

Publishing. http://doi.org/10.1007/978-3-319-08245-5_23

OpenSignal. (2013). Android Fragmentation Report. Retrieved September 10, 2015,

from http://opensignal.com/reports/fragmentation-2013/

Parker, T., Toland, P., Jehl, S., & Wachs, M. C. (2010). Designing with progressive

enhancement. Berkeley: New Riders.

Powers, S. (2010). Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I ·

An A List Apart Article. Retrieved September 10, 2015, from

http://alistapart.com/article/using-svg-for-flexible-scalable-and-fun-

backgrounds-part-i

Robson, S. (2012). A common set of breakpoints to start. Retrieved September 10,

2015, from http://alwaystwisted.com/post.php?s=2012-04-28-a-

common-set-of-breakpoints-to-start

Soueidan, S. (2015). Mastering SVG for Responsive Web Design. In V. Friedman

(Ed.), Smashing Book 5: Real-Life Responsive Web Design. Freiburg:

Smashing Magazine GmbH.

W3C. (2015a). HTML 5.1 Nightly. Section 4: The elements of HTML (picture

element). Retrieved from

http://www.w3.org/html/wg/drafts/html/master/semantics.html#the

-picture-element

W3C. (2015b). Proposed HTML elements and attributes. Retrieved September 10,

2015, from http://www.w3.org/html/wg/next/markup/

Ware, C. (2004). Information Visualization. Perception for Design. San Francisco:

Morgan Kaufmann.

Weiss, Y. (2015). Responsive Images. In V. Friedman (Ed.), Smashing Book 5: Real-

Life Responsive Web Design. Freiburg: Smashing Magazine GmbH.

WHATWG. (2015). HTML Standard. Retrieved September 10, 2015, from

https://html.spec.whatwg.org/#obsolete

Wheeler, A. (2009). Designing Brand Identity: An Essential Guide for the Whole

Branding Team. New Jersey: John Wiley & Sons.

Wroblewski, L. (2014). Mobile First. (J. Zeldman, Ed.) (2nd ed.). New York: A Book

Apart.