Wandering Thoughts archives

Forcing your webpage content to scroll is generally a bad idea

Every so often, website designers do things that make me clutch my head like a stunned monkey, so today I have an open letter for them.

Dear website designers: please understand that stuffing your page contents into a restricted space and forcing it to scroll when it doesn't fit is not a good idea, at least not if you want people to actually read it. No one likes reading content through a little viewport when they have their full browser window available, and reading content that requires horizontal scrolling is generally catastrophically bad (try it someday and see how long you're willing to pan the scrollbars back and forth for every line).

If you're using the CSS overflow property to force scrolling and it is triggering more than once in a blue moon, you are doing horrible things to the readability of the result. As in, it isn't. This goes double if you artificially restrict the size of your viewport space with things like max-width and max-height, despite the size of the user's browser.

(I have seen article and site layouts where the code snippets embedded in text always had horizontal scrollbars, even with my browser window maximized and huge amounts of space remaining on the left and right of their 3-column layout. Apparently these people didn't actually want me to read those code snippets, which makes me wonder why they put them in the article in the first place.)

This very issue, combined with CSS limitations that prevent you from doing better, is why I use a table-based layout here.

The problem with blog footnotes

Here is something that has just occurred to me (courtesy of seeing an example of it): footnotes are hard to do well in blogs, and may need actual software support if you want them to be completely correct.

The conventional way of doing footnotes in HTML is to use fragment URLs and anchors, with the footnote text at the bottom of the entry and your choice of footnote markers in the main text. But, like anything involving anchors, this means that you need to come up with unique anchor names.

On one level this is no problem; you can just use 'fn:1', 'fn:2', and so on. But on another level this is a problem for blogs, because blog entries are repeatedly aggregated together with each other on web pages. When you put multiple footnote-using entries on the same HTML page, you need all of their anchors to be unique; you are not likely to get this if you use 'fn:1' style anchors. (This is especially pernicious once you start considering syndication feeds and 'planets', that put content from multiple blogs on the same HTML page.)

You can just punt on the issue and say 'well, it's up to the author to come up with unique anchor text (ideally globally unique text)', but in practice people won't always do this and this is equivalent to having non-functional footnote links under some circumstances.

Admittedly, I suspect that most people won't really care about all of this, and will be perfectly happy using 'fn:1' style links and having them not work. Regardless of whether the actual links work, your intent is likely to be pretty easy for users to follow.

(And who knows, maybe the proper implementation of footnotes in blog entries is pop-up alt text, like xkcd famously does on the comics images. Alternately, footnotes are a printed thing that are not appropriate in HTML.)