New Perspectives On Web Design

CHAPTER 7 Designing Adaptive Interfaces

Comparing potential JavaScript and JavaScript-less experiences of a news teaser.

<p data-image-src="/path/to/my.jpg" data-image-loaded>

<img src="/path/to/my.jpg" alt=""/>

</p>

The paragraph itself is shown by keying into the dynamically assigned

data-image-loaded attribute:

[data-image-src][data-image-loaded] {

display: block;

}

Of course, mobile devices can be held in either landscape or portrait orien-

tation and users often switch to suit the task they are trying to complete.

To provide the best possible reading experience, again demonstrating em-

pathy, we should really take the interface a step further and let it adapt. We

can do that by listening for changes in the window size using a function.

Here’s the one I’m currently using:

window.watchResize = function(callback)

{

// used to track the timer

var resizing;

// this runs when resizing has stopped

function done()

{

// stop the timeout