« | Home | »

Web user interfaces should scale

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)

Topics: Web, Internet, Computing | 6 Comments »

6 Responses to “Web user interfaces should scale”

  1. whateva Says:
    January 26th, 2010 at 1:21 PM

    I think your sidebar should become a footer when the screen becomes too narrow. Set a minimum size in ems for your main content column. Let the sidebar div be pushed down and expand when screen is narrowed.

  2. Noah Says:
    January 26th, 2010 at 1:53 PM

    Thank you, “whateva”, that seems like an excellent idea, at least insofar as it will leave more space for the main content. On the downside, I’m trying to visualize what the sidebar would look like floating at the bottom, and I suspect it would be sort of ugly and confusing. If I have a chance one of these days I’ll give it a try.

    What I really think I’d like is a way to have the whole sidebar adapt and reformat more gracefully as the space narrows and font sizes change, perhaps automatically changing to a very thin pullout on the right below a certain minimum width. I don’t think CSS provides a way to do such things declaratively, and I very much want to steer clear of using Javascript to dynamically munge these things.

    I should say to you and any other readers: maintaining this particular WordPress theme is very much a background activity for me. In fact, it was one of the first significant efforts I made to learn CSS, so even the function that’s there isn’t built quite as well as I would like. So, while anyone is welcome to look at or adapt the CSS, etc., I’m not maintaining it for use by others, and as I said in my original post, I’m not advertising it as some ideal. I do think it gives some hints as to what’s possible.

    Thank you very much for the min-width suggestion; I will try it sometime and let you know how the experiment goes.

  3. Noah Says:
    January 28th, 2010 at 6:48 PM

    “Whateva”: I did a quick experiment with min-width, and it turns out the <div> structure isn’t right for using that trick. I suspect that with some major reworking of the theme, it could be gotten to work, but I don’t see an easy way to do it just at the moment.

    (Roughly: there’s no separate <div> for the main white box, only a fudged margin that causes it to stay clear of the sidebar. As I said, it was my first serious CSS, there are probably lots better ways to do it, and it’s been a year since I was fresh up on the code anyway. For now, it’s more than a one line fix.)

    I’m also still suspicious that the sidebar would look good floating at the bottom. So, I think I’m going to let it go for now. An interesting experiment in any case. Thanks for suggesting it.

  4. Teresa Says:
    February 2nd, 2010 at 6:19 PM

    After reading this, I brought your blog up on my ipod touch. The design interface of the touch is such that blogs scale very well. For instance with your blog, I can double tap the main column and that column then fills the screen, the font size increases, and the word wrap adjusts accordingly. If I then want to look at the sidebar, I just have to scroll to the right.

    Apparently someone took this into account when setting up the interface for the touch – it works very well with all the blogs I read. I seldom want too read people’s sidebars since that information is mostly static (blog rolls and other links). This leaves the information available if I want it, but gets it out of my way for the bulk of my blog reading when I’m on the small device.

  5. Noah Says:
    February 3rd, 2010 at 3:02 PM

    Teresa wrote:

    > For instance with your blog, I can double tap the
    > main column and that column then fills the
    > screen, the font size increases,

    Yes, doubletap on the iPhone and iPod touch is very handy or getting a column to fill the screen

    > and the word wrap adjusts accordingly.

    Really? I’m very surprised. One of the things that I don’t like about my iPhone (which should be the same as the iPod touch) is that it’s >not< scaling the fonts in a way that would cause wrapping. To see this, after you've done the doubletap, try to stretch further. I think you'll see that the text is not re-wrapping to accommodate the yet larger font size. What's going on here is a bit subtle. There's what we might call setting a new font size within the page, which is what I was talking about in my post, and there's what we might call zoom, which sort of gives you a magnifying glass on the whole page, but does not change the layout. CTRL+ on most desktop browsers does the former; doubletap and/or stretching on the iPhone does the latter. Both are useful, and I wish that iPhone would give you both. I appreciate the compliment on my blog layout working well with the iPod touch, but it so happens that in terms of doubletap, most blog layouts will. We all have one column size or another, and when you doubletap it fills the screen. What I'd like is an option to do the equivalent of CTRL+, which would grow the fonts themselves. In any case, you're right. Independent of the scalability of the underlying design, having a gesture that fills the screen with one column is very useful on small devices. The credit this time goes to Apple and Safari, not to my blog theme though. Noah

  6. Teresa Says:
    February 4th, 2010 at 11:31 PM

    Ah – I see what you’re talking about – the beloved CTRL+ is something I can’t live without any more on my desktop. My eyes are too old.

    I was just happy to find that my ipod increased the fonts enough with the double tap so I can read mostly without eyestrain. Although you are right, if you increase the font size further, it doesn’t wrap. I seldom do that so I forgot.

Submit a comment:

Please press the submit comment button below to submit your comment for posting. All comments are moderated, so your comment will not appear until it has been reviewed. The blog owner reserves the right to decline to post any comment for any reason. Also, by pressing the submit comment button, you confirm your acceptance of the legal agreement below. Please read it before submitting your comment.

Legal agreement: by pressing the submit comment button you grant to Noah Mendelsohn a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare derivative works of, publicly display, publicly perform, sublicense, and distribute your comment contribution and derivative works thereof. Noah Mendelsohn reserves the right to republish such material in any form, though reasonable efforts will be made to retain the attribution to you. You also confirm that you have not knowingly violated copyright or other applicable laws pertaining to material that you have quoted or reproduced in your comment. (Note: if this agreement is not acceptable, an alternative is for you to post your comment on your own blog or other public Web site, and to post a link to that here. That way, you may retain more complete control of your own material.)