CHAPTER 7 Designing Adaptive Interfaces
We could never hope to create (and test) unique experiences for each
combination of these capabilities any more than we could test our websites
in every browser on every device ever made. We’d never sleep and we’d
never launch anything. But we can think about experience as a continuum
and architect our interfaces to adapt to the capabilities of our users’ devices
in order to ensure a positive experience — even if it’s not an identical one.
As the mobile first movement has reminded us, we need to focus on
the core use case for a page or interface and build up the experience from
there. And, while we craft that experience, we need to make sure none of
our design or technical decisions undermine it. The layers of a typical Web
experience break down like this:- The Core
Text content and basic interactive elements that form a universally usable
foundation (links, forms, etc.). Our copywriting (even microcopy like labels
and error messages) must be both clear and appropriate. - Semantics
HTML markup that illuminates the content of the core experience and
conveys the meaning of the words. Each element we choose should en-
hance the semantic meaning of the content. We should never choose an
element that could obscure the meaning of our content or confuse a reader
(e.g. using a div, span, or even an anchor when it should be a button). We
should also employ ARIA landmark roles to more easily guide our users
who rely on assistive technology around the page. - Design
CSS that establishes a visual hierarchy, enhances the reading experience
(through the use of vertical rhythm, comfortable line lengths, etc.), and
reinforces the brand. Each design decision we make should enrich the
experience and should never subvert the core by reducing access to content
or obscuring it through the use of low-contrast text or visuals.