By Noah | January 25, 2010
Over the years Web user interfaces have become more flexible, more refined, and more dynamic, but one thing that annoys me is: too many of them do a bad job of adjusting to different window sizes and font sizes. I think that’s something to which we should all pay more attention.
To see some examples that bug me, go to the New York Times Web site, or CNN or The Weather Channel , or your favorite blog (not this one) formatted with the default WordPress theme. Now, resize the window to make it narrower. Does the content adapt in a useful way? If you have a very wide screen, make the window wider or full screen. Is the space being used well, or do you just get bigger white spaces as you grow the window?
If you’re in a reasonably modern browser, press CTRL + (the control key and the + key) a few times to make the default fonts larger. Does the screen rearrange itself well? Do things get clipped when the fonts get big? Now use CTRL – (with the minus sign) to make the fonts unusually small; is the space well used, or does the content just get narrower?
To see an alternative that I think is somewhat better, try different font and window sizes while reading this blog entry. I’m not pushing this particular WordPress theme (which is, by the way, adapted from one that was originally designed by Micah Fries), but I think it does a more useful job of adapting than many sites do.
Why does this matter? Well, for a start, many people need larger fonts to read comfortably as they get older, or if they have bad vision for other reasons. Conversely, some people with good eyesight like to set small font sizes so that more information fits on the screen, or in smaller windows. Furthermore, if content doesn’t adapt well to window sizes, then users waste time fiddling when they open new sites, or else screen space is wasted when windows are maximized. There are also times when your content is embedded in some larger container, e.g. when you read this blog entry in a feed reader or aggregator. Finally, getting normal Web content to look good on very small devices such as the iPhone can be a battle in any case, but starting with an interface that scales can be a good first step, especially if you’re not willing to do a completely separate layout for the phone.
So a plea: make your Web sites do reasonable things when users choose larger or smaller base font sizes, and make good use of a wide range of window sizes and shapes. A full tutorial on how to do this is beyond what I can discuss here, but as a start, consider doing your CSS sizings as percentages of the window size, in units of “em“s (I believe that “em” historically referred to the size of a capital M in a particular font), or as a percentage of the base font size (font-size:120%). Indeed, the W3C’s Web Content Accessibility guidelines recommend some of these techniques.
P.S. After doing these experiments, you can press CTRL-0 (zero) to get back your standard font size (except in Internet Explorer 8, where it seems you’ll need to do View/Zoom/100% , and I suspect that in older versions of IE you’ll need to do View/Text size/Medium)