How to react to changing screen sizes
- Web design
Websites need to fit comfortably on the screens of the people viewing them, with as much content as possible being visible without the need to scroll.
Previously, one set screen size could be designed and built for. For many years, 800 x 600 pixels was the accepted standard, with the knowledge that a certain number of pixels needed to be set aside for toolbars, scrollbars, status bars and so on. A few years later, 1024 x 768 pixels became the common standard.
In 2011, things are not so simple.
Today screens are getting both larger and smaller. Many desktop users have screens larger than 20 inches, capable of high-definition resolutions such as 1920 x 1080 pixels. Some smaller netbooks have screens capable of only 800 x 480 pixels. The current version of the Apple iPad uses the old standard of 1024 x 768 pixels.
On the other side of the fence, the amount of space being taken up by browser toolbars, scrollbars, status bars and window frames is shrinking. The trend, which started with Google Chrome, is making its impact felt in the latest beta versions of Firefox 4 and Internet Explorer 9. The space taken up has been shrinking dramatically, resulting in a corresponding increase in the amount of space available for websites themselves.
The upshot of all of this is that we can no longer assume that there is a standard size for a web page design. So how should web-based developers work around this?
One simple way is to assume a lowest common denominator screen resolution, and let the website sit within empty space for people with larger screens. For these purposes, assuming a standard width of 1024 pixels (and therefore around 990 pixels of usable space) is still a safe approach.
Beyond that, more and more sites are beginning to use innovative designs to make the best use of screen real-estate irrespective of size.
With new devices, new monitors and new browsers coming out continually, there is no doubt that the only constant in this space will be change.