New Perspectives On Web Design

CHAPTER 7 Designing Adaptive Interfaces

Each of these contexts con-

tains multiple instances of a teas-

er module. Universally, the teaser

module contains a headline,

byline and lede. But sometimes it

also contains a small thumbnail

to draw our eye or hint at what we

might find on the full article page.

As visually appealing as these

thumbnail images might be, they

are merely complementary to the

core purpose of the teaser: getting

us to click through and read the

full article. Furthermore, thumb-

nail images like these create

additional problems:

1. Externally referenced images require an additional download (and all of
   the networking-related overhead that involves), making the page take
   longer to render, while simultaneously costing consumers more money
   to view the content over a metered network.


2. Images embedded using data URIs are typically three times larger than
   their binary equivalents, leading to a larger HTML payload which may
   be faster to download, but actually costs metered network customers
   more to view than external images.


3. In narrower layouts, these images can actually make reading more
   difficult, defeating the whole purpose of the content to begin with.

Those are some pretty powerful arguments against having any teaser

thumbnails, right?

The “Latest News” section on Nooga.com