Wandering Thoughts archives

2010-04-04

The problem with header and footer overlays on web pages

There seems to be a new annoying trend in web page design of making persistent headers or footers (or both) that don't scroll out of view when you scroll the web page but instead stay permanently visible at the top or bottom of your browser window, overlaying the conventional content. Sadly, this design element is a big fat failure (at least for me).

(I'm sure someone has also implemented a sidebar overlay too; I just haven't seen a website with one yet.)

The problem with these overlays is that they screw up normal page-based scrolling. Because these headers and footers are implemented in CSS as overlays, the browser runs the main content text all the way from the top to the bottom of the browser window; it's just that you can't see some of it. Then when I hit spacebar to scroll a page the browser scrolls the whole page as if the overlays weren't there, which means that it scrolls too much for what is actually visible.

(Browser page scrolling is designed to have a bit of overlap, which helps you reorient and be sure that you haven't missed anything. With a short overlay you might wind up with no overlap at all but be able to see all of the text; with a taller overlay, you will wind up missing some text. For example, if the browser window is currently showing lines 1-25 of the main content and you use spacebar to scroll a full page, it should wind up showing lines 25-49 or so. With an overlay, what typically happens is that the browser thinks it's showing lines 1-30, with lines 26-30 hidden under the overlay, so it scrolls to show you lines 29-53; you have no overlap and you've missed lines 26-28 entirely.)

In theory a browser could be smart enough to work out the real size of the scrollable area that you can see. In practice, I don't think that any browser is.

Sadly, the popularity of these header or footer overlays suggests that people pretty much don't do full-page scrolling these days and instead scroll incrementally with their mouse's scroll wheel (some local anecdotal evidence supports this). I notice this sort of thing because I don't have a scroll wheel mouse.

web/OverlaysProblem written at 02:18:55; Add Comment


Page tools: See As Normal.
Search:
Login: Password:
Atom Syndication: Recent Pages, Recent Comments.

This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.