make-believe.org

Topographic page layout

I coded up a little tool for web designers. It's a bookmarklet/favelet that provides you with a "height map view" of the page you're looking at—that is, more deeply nested elements are given a lighter background.

It's a hassle to explain, but if you click the link below you'll see what I mean.

Link: Topographic view

Refresh the page to restore it.

If you want to use it with other pages, just drag the link to your browser's Links bar. Then click it while viewing a page to see it in all its skeletal splendour.

Notes:

• Here is an alternate bookmarklet which maintains background images (uglier; arguably more useful): Topo view with backgrounds
• Unlike border-based solutions, this preserves the layout of the page to the pixel.
• Beyond ten sixteen layers of nesting, every deeper element will be shaded pink. This is pretty rare for well-coded XHTML Strict pages, but is more common with table-based layouts.
• It is dark, but this gives you more layers to view.
• Tested in Firefox 0.8, Opera 7 and IE 6.0. (And Safari—thanks Chris!)
• If you make any improvements, I'd love to see 'em.

Update:

After a suggestion from Peter in the comments, I've updated the bookmarklets on this page to shade the first 16 layers of nesting. (It was 10 in the original.)

Further update, mid-May:

Jesse Ruderman wrote a faster version which supports the major browsers with the exception of Safari. You can find that at squarefree.com.

Joseph | 1 Apr 2004