advanced

slide eight

The pedagogical and vocational suggestions that preceded are primarily for novice designers beginning to work with digital technology and visual imagery. We don't mean to suggest that the considerations put forth in this section cannot also be considered by novices and important for all design. However, the techniques and knowledge needed for making these sorts of web texts is "advanced." Accessibility and usability, for instance, are not "advanced" considerations; they are important considerations regardless of knowledge. We consider this section "advanced" because it deals with knowledge of web design and program knowledge beyond novice. We don't offer assignment examples in this section but describe issues designers incorporating visual imagery should consider in their designs.

Designers, especially those in advanced web or media design/technical communication courses, should be instructed in usability issues regarding the use of static and dynamic visual imagery. For example, advanced students should consider how their designs function differently on different devices (e.g. desktop computers, pads, smart phones, and printers) as well as different connection speeds. After all, "Users [web audiences] also vary widely in their technical circumstances: in screen size, network speed, browser versions, and specialized software such as screen readers for those with visual disabilities. Each of us inhabits multiple points on the spectrum, points that are constantly shifting as our needs and contexts change" (Lynch & Horton, 2009). In other words, while digital technologies have certainly afforded new ways to present information, there are a number of constraints on how different devices present information. Understanding how to negotiate the affordances and constraints of different devices and audience usability needs or the ways an audience is anchored to a device is vital for authors to successfully display digital texts.

In order to accommodate multiple needs and multiple contexts it becomes especially important for designers to understand the importance of alternative text and media queries in their designs. While these considerations are by no means exhaustive with regards to making web pages usable and accessible and would extend beyond the scope of this essay, we do address a couple important concerns designers should consider when working with digital imagery. The following describes the importance of alternative text and media queries and provides links to places for "vocational" help and further understanding these design considerations.

Alternative text affords textual descriptions for a number of non-textual forms of web content including visual imagery in digital environments. According to Web Accessibility in Mind (WebAIM) "a non-profit organization within the Center for Persons with Disabilities at Utah State University" (WebAIM, 2011a), alternative text has three primary functions or affordances:

Generating appropriate alternative text is, thus, an important aspect of web accessibility. WebAIM offers a number of suggestions for using alternative text including descriptions of where it is appropriate and where the surrounding verbal context will suffice for an image's description. WebAIM also describes the importance and use of the long description attribute of visual imagery. Where alternative text is intended to be short, long descriptions are intended to provide more explanation for "images too complex to describe" (WebAIM, 2011c). WebAIM describes when and how to use long descriptions for non-textual forms of web content like visual imagery.

Another important affordance to consider when designing with visual imagery is the media query. Though they get a bit technical for CSS and HTML novices, Goldstein, Lazaris, and Weyl (2011) explain the function of media queries succinctly:

With CSS3's media queries you can, according to the W3C spec, 'extend the functionality of media types by allowing more precise labeling of style sheets.' This is done using a combination of media types and expressions that check for the presence of particular media features. So media queries let you change the presentation (the CSS) of your content for a wide variety of devices without changing the content itself (the HTML). (p. 220-221)

In other words, media queries allow designers to style web content differently depending on the device upon which the content is being displayed (e.g. printers, desktop computers, or smart phones). The importance of media queries with regards to imagery is explained well by Lynch and Horton (2009):

In some contexts, graphics are unnecessary and potentially costly. Graphics on mobile devices do not display well when scaled to fit the small screen, and are time-consuming for users to download. In these contexts, the best approach is to use media style sheets to hide unnecessary graphics, and replace necessary graphics, such as navigation links, with text. Cascading Style Sheets make it easy to show and hide elements in different contexts, but you will need to anticipate what is needed in the document source to adapt to different contexts and make sure everything you need is in the page code.

For advanced designers, using a number of stylesheets for different media helps make web content more usable for a greater variety of devices and audiences utilizing that content.  Though certainly Lynch and Horton are correct with regards to the time it takes to download visual imagery, this imagery can also take away from the bytes one is able to download on some smartphone plans. Depending on the context or situation, however, it may still be important to display some graphics. In these situations, designers should consider adjusting the "weight" of their visual imagery so that download time and number of bytes is reduced. Additionally, designers should begin to understand and practice responsive web design or how "design and development should respond to the user's behavior and environment based on screen size, platform, and orientation" (Knight, 2011). For more information on media queries and responsive web design see Kayla Knight's (2011) article, which describes a number of ways to use media queries effectively and practice responsive web design.

Recommendations