With so many different resolutions (800x600, 1024x768, etc.), browsers (Internet Explorer, Firefox, etc.), and platforms (Windows, Mac, Mobile ,etc.) in use, it is very difficult to design a page that looks good (or at least looks the same) in all configurations.
To design a page that looks good with most configurations, let's start by defining our main objective: we must never force a user to scroll horizontally. In other words, our page must always fit within the available screen width. This would suggest that we have to design our page for the lowest common denominator.
So let's look at the stats
| January 2010 | |
|---|---|
| Resolution | % of Total |
| 1280x1024 | 18.2 % |
| 1280x800 | 17.3 % |
| 1440x900 | 10.5 % |
| 1680x1050 | 10.0 % |
| 1920x1200 | 4.6 % |
| 1366x768 | 3.6 % |
| 1920x1080 | 2.3 % |
| 1152x864 | 2.1 % |
| 1600x1200 | 1.4 % |
| 1280x768 | 1.2 % |
| Other | 4.8 % |
Get the latest in stat at w3schools.com
Ready for our next decision
Should we design a fixed-width page, or should we specify the width of our page in percentage terms?
fixed-width: There are pros and cons for both. The main advantage of a fixed-width page is that the layout will always remain as you intended, even when viewed at higher resolutions. The main disadvantage is that users with larger screens, set at higher resolutions, will not be able to fully utilize them, and will instead see large, unused blocks of space around your page.
percentage terms: The advantage of establishing our page width in percentage terms, as 100%, is that the page will adjust itself to the resolution of the screen. This is called a "liquid page design". The main benefit of this method is that all the available screen real estate will be utilized. The disadvantage is that the layout of your page will change, and users may find it uncomfortable to read the extremely wide sentences that will result when higher resolutions are used.
If you decide optimize your page for 1024x768, and then decide to follow the fixed-width page method, you must take into account that not all the 1024 pixels will be available (some of them will be used by the browser to display the scrollbar and other "browser chrome"). To accommodate most browsers and platforms, specify your page width at a maximum of 960 pixels.
If you decide to specify your page at 100% width, you won't have that problem, since it will adjust automatically to the available width. Just make sure that your page looks best at 1024x768, and that the layout doesn't change much when you view your page at 1280x1024.
