More of the same?


Wide browser windows

Filed under: Software — _ds_ @ 13:54

Is it just me, or do any of you lot hate wide browser windows too?

I’m putting up with horizontal scrolling (or zooming out, in some cases) here so that I can have the window width which I want – which allows me to open an X terminal alongside it, as it happens…

800 pixels is a reasonable minimum width, and anybody who thinks that 1024 pixels is a better choice or, worse, lets text be reformatted to the window width no matter how wide (without making some effort to constrain it to something reasonable) should be… I don’t know. Suggestions?

What has to be remembered here is that there are many devices out there with small displays:

  • Netbooks with 7″ panels
  • Smartphones

These typically have displays which are 800 pixels by 480 pixels (or possibly 480×800), and while the phones may be redirected to ‘mobile’ versions of the content, both they and netbooks may display the full site. It is true that many browsers, these days, have a zoom function, but it’s possible that the content may be rendered too small to read if the user has to use this to shrink it to fit the available screen space. (I can manage with quite small text, but that doesn’t mean that I necessarily want to.)

I mentioned, above, wide text. It’s particularly annoying to have to scroll back and forth horizontally just to be able to read the text (but again, zoom functionality); there are times when I’ve had to zoom out when reading a forum because of some large screenshot which the poster didn’t think to thumbnail. This is particularly fun when the screenshot is 1920×1080; consider that the largest monitors here are 1280×1024.


What to do?

Web designers: flexible width wins. Primary content which fits within a column at most 800 pixels wide wins, even if it loses in other ways. It may even be necessary to enforce a minimum width to prevent, for instance, a column of single-word lines… But, if you must allow it to be wider, constrain it to some suitable readable maximum. The CSS2 properties min-width and max-width help with these.

And, for un-thumbnailed images: one possible solution is max-width: 100%; which will, on most browsers, prevent it from widening its containing box; and another is overflow: auto; which may cause scroll bars.

It’s a minefield out there ☺


Blog at