Back To Interactive Design Menu

Interactive Responsive Design

[Author: Bill Fischer]

Overview

An Example of low-bandwidth design

An equal quality of experience for sight, hearing, physically, and cognitively impaired persons is the goal of responsive media. At the baseline of the progression is text. Then, multi-sensory enhancements are added for those persons that have the physical abilities to engage with them. The value added by the multi-sensory input has been proven to increase the attentiveness to and recall of information.

Sensory Progression

Start with text, then add enhancements for those that have the sensory capability to utilize them. All of the enhancements, that are utilized, must work together in harmony.

Text is the baseline information that most people can engage with. It can be read by a deaf person and can be heard by a blind person using a screen reader.
Images can reinforce the text for those that can see them. They can be described by a creen read using alt tags for those that can't see them.
Sound can make embedded video information accessible to the sight-impaired when audio description is used.
Motion can be used to attract attention to page/screen elements in a way that can affect the overall visual hierarchy. But, only for those that can see it.
The effect of emotion (as delivered through the use of story, color, sound, motion, and composition) should not be underestimated as many studies have shown that the human brain learns, retains information, and solves problems more efficiently when it engages the hindbrain, medulla, and limbic systems where emotion is processed.

The Semantic Web

A Website Screen Reader View

The Semantic web refers to the unformatted text-version that a screen reader "sees". This is the "semantic" version of The Epic Project website. It's what a screen reader, used by a sight impaired person, 'sees' with their screen reader. Except, the screen reader only sees the text and not the image.

The menu from a website shown in plain-text

A section form a web page shown in plain-text

The Epic Project website as it renders in a web browser

Compare how the elements appear above, in the semantic version versus the rendered version. Take note of the enhancements that add to the semantic text version., which include:

Images
Color
Layout
Motion (the word "Hope" animates in the live site)
Video

A screen capture of the Epic Project website

Google Sites

Report abuse