New Perspectives On Web Design

CHAPTER 7 Designing Adaptive Interfaces

Obviously, without JavaScript the script won’t run and the paragraph

just sits there, invisible. Sure, it is a bit of extra markup to download,

but it beats a hidden image or

(worse yet) a hidden embedded

image.

If JavaScript is available,

the script is run and can test

for things like browser width^8 ,

currently employed media

query^9 , network speed^10 , and

even whether or not the user

is on a metered connection^11.

The usefulness and reliability

of network-related testing are

currently dubious at best, but I am hopeful they’ll get there in the future.

For simplicity’s sake, let’s say we know the thumbnail images are 200px

square and we want to load them if the browser window is at least twice as

wide (400px). The JavaScript for that would look something like this (com-

ments in the code are there to help you understand what’s going on):

// self-executing function

(function(){

var

// set the threshold

threshold = 400,

// collect the window width

browser_width = window.innerWidth ||

document.body.offsetWidth,

// prototype image for reuse

image = document.createElement('img'),

// get all paragraphs

8 http://smashed.by/win-width-height

9 http://adactio.com/journal/5429/

10 http://smashed.by/network

11 http://www.w3.org/TR/netinfo-api/#attributes-1

Load JS? No Image

Image

Ye s

No

Lazy Load Images UI Construction Flow

Adjust MarkupAdd custom CSS

Ye s

No

Verify browser

width condition