Screen space waste

Technology improvements led to the increase of monitor sizes and the screen space available to web designers. The desire to use this larger viewable area motivated the decision to use fluid layouts for maximum flexibility and adaptability. Other websites remained fixed-width, used bigger elements and extensive scrolling. Because fixed-width designs are better suited to small monitors, bigger elements often waste considerable screen space. This happens due to improper understanding of constraints on the web and the way the relationship between the monitor and the website is perceived.

Bigger screens don't necessary lead to a better use of screen space. Programmers often can't utilize the available resources of high-performance PCs. The more they can use, the more waste is introduced. Efficiency drops.

It helps to think about every pixel on a website as a dollar to spend. To find our "screen costs", we must multiple the width and height dimensions of every element on a page and finally add them together. Such thinking can force us to think about better ways to position and resize the content on our the monitor. Using smaller elements doesn't mean that text should be unreadable or images unclear. At best, we can gradually grow our elements to see the effects on their surroundings. After reaching a certain size, the advantage of further enlargement decreases. This is the "balanced size"—one that doesn't go in excessive directions, being too small or too large. Too small is unreadable or unnoticeable and too large is wasteful. To get a good sense of when "enough is enough", look at examples of user interface design. A good resource is the Yahoo Design Pattern Library. We can try to investigate why certain elements there aren't larger or smaller to gain some insights. This can prevent our natural tendency to make things larger and bolder in the future.

Different monitors have different screen sizes and aspect ratios. When we develop a website on a screen with a different aspect ratio than that of the user's screen, we may perceive our site differently. We can't be sure if our users see white space as sufficient or not. And white space is an important aspect of a good design, because it balances the subjective element weights on the page.

Not only big elements can waste screen space. But we can recover it if we remove insignificant or duplicate content. Big advertisements require special care, because they must be consistent with the existing layout and not negatively affect the way visitors perceive the rest of the content.

Here we can see a website, whose content is framed in a Samsung TV:


Our focus shifts from the content to the TV itself. Scrolling becomes harder as the scrollbar is no longer in its usual place, but located inside the TV. This example illustrates how easy it is to waste screen space and to decrease the importance of the content.