Examples of inflexible layout
As an adjunct to my flexible design page, here are a few examples of how not to lay out a web page.
Examples of sites which give problems in small windows are myriad.
![[Example: text overrunning right edge]](img/nestle.jpg)
Out of many candidates for the hall of shame, I chose this one from Nestlé. This is because not only does the text run off the right-hand side of the window, but the scroll-bars have been disabled, so you can't scroll to see the text even if you want to. I guess we'll never know what it is about some web-developers that makes them put extra effort in just to make their page less user-friendly.
Oh, and in passing I'll mention that of the 76 images (!) on the page, just 4 had ALT attributes.
On the other hand, if the reader's screen is larger than the web-author designed for, the result is an ugly waste of space. A well-known example of the text area being unnecessarily small for many screens is the BBC site below.
![[narrow column on screen]](img/bbcscreen.jpg)
(This is shrunk considerably of course, so you can still see the effect if you have a smallish screen yourself). It has three inconveniently narrow columns, while more than half the screen is unused. The result is a frustrating waste of space.
An even worse, but by no means unusual, example is the one below, where the text is unnecessarily constrained in two dimensions, and surrounded by fixed decoration.
![[tiny information area on huge screen]](img/randr.jpg)
The result is that just 13% of the screen-area is used for providing information, and one needs two scroll-bars. Needless to say the text size was also fixed, so that if you found the black-on-green text rather hard to read and wanted to enlarge it, well you were out of luck (except in browsers with a zoom option).
Back to the flexible design page
