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 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
