Users can change the width available for your web pages in several ways - including some you can't always detect. We show you how to minimise the risk of usability problems which arise from making pages which appear too wide when users do these things.
Written by Philip Chalmers who is based in the Medway area of Kent, England, United Kingdom.
|
|
|
|
| What's the problem? |
|
|
|
|
You can't assume you can use the full width of the screen - users can change the available width in several ways, mainly reducing it.
Unfortunately there are virtually no statistics available on the web which tell you how much space is actually available. The only ones I could find which even attempted to answer the question are at evolt, but I did not find them very informative.
This is the obvious way for the user to change the available width.
Try resizing this page to 75% of your screen's width and height. I hope it still works OK!
Keep your browser at 75% and try another of our pages - the picture-matching quiz. I bet that didn't work so well if you're using 800x600 screen resolution - maybe I should change the programming to resize the screen to at least the minimum workable size.
Some browsers including the most popular, Internet Explorer, allow the user to open such facilities as History or Favourites (bookmarks) in a separate pane, i.e. in a column which takes up space on one side of the browser window (usually the left).
By default these panes take about 25% of the total screen width. If the user reduces the window size, all of the reduction comes out of the space available to your page - the History / Favourites pane is not re-sized.
There's nothing you can do to prevent this and nothing you can do to control the amount of space used in this way.
Since I could find no useful statistics about this, I asked my wife to do a little survey of her colleagues - 8 people who are experienced users but not IT specialists:
Some browsers let users create their own style sheets to specify which fonts, sizes and colours to use for various types of screen element. This facility is most commonly used by people with poor vision, and they generally increase the font size - which reduces the amount of content which will fit on a page.
Ideally, know your users!
Failing that, check how your pages look at 800x600 with the browser window resized to 75%.
If you want to be reasonably safe, make tables and images a maximum of 542 pixels wide - that's 75% of 723.
That's reasonably safe - there's no such thing as absolutely safe.
