CHAPTER 7 Designing Adaptive Interfaces
it into a more engaging experience, we can test to see if that enhanced
experience makes sense given the constraints of the browser and device
used to access the content. If the conditions are right, JavaScript can inject
additional markup, rearrange elements on the page, hide visually redun-
dant content (in an accessible way), and insert a new set of style rules to
govern the look and feel of that upgraded interface.
When thinking about different ways to experience content, I like to
sketch out a UI construction flow. You can think of a UI construction flow as
a roadmap for the build process of a
page. It outlines the different potential
experiences along the continuum and
helps us better visualize how they all
fit together. It also gives us an oppor-
tunity to explore the constraints we
need to consider for that interface. To
the right, you’ll find a sample diagram
for the timeline:
The constraint of offering a text-only experience is a crucial first step
toward ensuring everyone can use our websites, but it is only the first of
three constraints I use to guide my work. The second constraint I embrace
is the network.SiP, Don’T gulP
Bandwidth. Latency. Simultaneous connection limits. Each of these facets
of the network has an effect on the experience of loading and interacting
with a site. These affect every connection, but on mobile networks they
have an even more profound effect (more on that in a moment).
For years, Web performance luminaries have been telling us to concat-
enate our files, build sprite maps, compress our images, and minify every-
thing. Reducing the number of requests to the server makes a huge differ-
ence in the speed of delivering content to a browser. And, of course, smaller
files will download more quickly.Load JS? ListTimelineYe sNoSimple Timeline UI Construction FlowAdjust MarkupAdd custom CSS