New Perspectives On Web Design

CHAPTER 7 Designing Adaptive Interfaces

(If you have no idea what I’m talking about, hit “View Document Out-

line” in the Web Developer Toolbar^15 to see the outline of any Web page.)

The great thing about a document outline is that it implies sections.

Knowing that, we can write a simple JavaScript to parse that content,

dynamically build the additional markup for the tabbed interface, trigger

the inclusion of some basic CSS rules to lay it out, and add in some accessi-

bility enhancements via ARIA when JavaScript is available.

I won’t exhaust you with the code to do this, but you can check out the

script I’ve been evolving for this purpose over on Github^16 if you’re interested.

So now we have an interface that adapts beautifully based on JavaScript

availability; but tabbed interfaces don’t always work nicely on narrow

screens, especially when the tabs don’t fit. To truly call this tabbed interface

adaptive we need to consider the experience in different form factors.

Taking a lesson from the lazy-loaded image example we just discussed,

we could adjust the JavaScript code to include a test to see whether the

15 http://chrispederick.com/work/web-developer/

16 https://github.com/easy-designs/tabinterface.js

Load JS? Linear

Tabbed

No

Tabbed Interface UI Construction Flow

Collect implicit sections

Split into explicit sections

Build tabs based on headingsAssign events

Add ARIA roles & states

Add a class to the container to turn on styles

Ye s

Diagraming the process of building a tabbed interface

using a UI construction flow.