A question of graceful resizing of web pages has no perfect answer. As the amount of information we display per page increases we realize that the virtual space is almost as limited as any physical space. When users resize a browser window, or increase text size (actions we have no control of and often have similar negative effect on the original page layout) they still hope to see a usable page. If there is no white space on the page to absorb the shrinkage, overlaps and truncations often render the page unusable.
Picture #1 shows how resizing of the browser window can push navigation links on the right column “under” the left column. In this picture, the size of the left column has been set in %, not in absolute values. There is a white gap between the picture and the footer indicating that when the browser window is being resized, the left column is accommodating the shrinkage. But it’s only half of the solution. The image does not resize, and the content of the right column is diving under the image. To make the image resize together with the left column, a magic CSS statement is needed:
Picture #1 shows how resizing of the browser window can push navigation links on the right column “under” the left column. In this picture, the size of the left column has been set in %, not in absolute values. There is a white gap between the picture and the footer indicating that when the browser window is being resized, the left column is accommodating the shrinkage. But it’s only half of the solution. The image does not resize, and the content of the right column is diving under the image. To make the image resize together with the left column, a magic CSS statement is needed:
#leftcolumn img{width:100%}
Picture #2 shows a more user-friendly outcome.
There is still one problem. What if we have two equally important columns? Or three, or four? In the example above we can sacrifice the left column and the image to keep the main content on the right usable even if the browser window is shrunk by more than 30%. And this is not an unusual use case. If you want to keep both the library site and Amazon.com up(without minimizing them, while you copy/paste from one window to the other) 30% is not that unusual.
It is a luxury to decide that everything goes above the fold in the web page. The requirement of having no vertical scrolling is the first victim of reality. But it is still considered a design faupax to make users scroll horizontally. If we have no horizontal scrolling, and all columns are important and “stuffed” with information to the brim, the solution introduced above, though technically possible, is no better than leaving the screen at the mercy of the user.
1 comment:
I'm still unclear about the options for resizing (minimizing?) the web page. It seems like you're tying in accessibility issues with css, but I'm not sure of the connection. Just about any library site that I bring up minimizes the way our does, and many of those use cascading style sheets. This seems to be the rule rather than the exception on most sites.
Also, just to clarify, my point about creating more white space relates to the entire page. Decreasing type size and increasing the amount of white space between columns than is currently shown in Mock up 2.1 would accomplish this. So would decreasing type size and/or decreasing the amount of text within each column, and then increasing the leading between lines.
Regarding the issue of above/below the fold, we noticed in researching other web sites that the best ones scrolled vertically (not horizontally), and only by a relatively small amount. The content above the fold comprised about 2/3 to 3/4 of the entire page. The remaining 1/3 of the page was below the fold. The best pages gave you an indication (usually a heading of some sort) of the content that you would find below the fold. As I recall, we have not set an "above the fold" requirement.
Please feel free to clarify anything I have misunderstood.
Thanks!
Donna
Post a Comment