With so many different resolutions (800×600, 1024×768, 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
| Resolution | January 2011 |
|---|---|
| 1280×1024 | 14.8 % |
| 1280×800 | 14.4 % |
| 1366×768 | 10.1 % |
| 1440×900 | 9.9 % |
| 1680×1050 | 9.2 % |
| 1920×1080 | 6.2 % |
| 1920×1200 | 4.5 % |
| 1600×900 | 2.5 % |
| 1152×864 | 1.5 % |
| 1360×768 | 1.3 % |
| Other high resolutions | 10.7 % |
| Sum | 85.1 % |
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?
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.
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 1024×768, 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 1024×768, and that the layout doesn’t change much when you view your page at 1280×1024.
thanks for a great article, very helpful… i have been using 900 width mostly so this confirms it, thank you
Derek
I am struggling with this now. there is a debate over whether to set the width at 870px or to let it flow with a 90% design. We are also looking at whether there should be padding around the design. For instance, this website on my monitor resolution, takes up about 80% of the center part of the page with about 10% grey on either side.
Funny thing about monitors these days, they are all over the place when it comes to dimensions. So what looks good on your end might not look so good for others. Padding really depends on the design of the site too, I prefer to add some padding if the design looks better that way. In the sites I design I generally go with 960px or 90% give or take a bit.
I may have built my pages a little too wide at 1300… I would appreciate a visit to the site and any feedback. Thanks.
http://www.printwiz.biz
You’re right, it’s a bit too wide, I’d reduce it if you can because everything on the right side gets cut off on smaller display resolutions. And if you want to give your site a professional look, I’d work on those navigation buttons, but that’s just my opinion. Best of luck with your new site!
Pretty good website! Looks fine on my comp, but my screen is 1440×900 (quite large, I know). I agree that you may want to work on your nav bar a bit, spruce it up, but other than that, you’ve got a nice, clean layout.
Resolution is common issue, but as the survey suggest, 950-975 pixels wide is the sweet spot.
Regading your website, visit http://www.w3schools.com for a comprehensive lessons on CSS, with examples, on button and other types of visual improvements.
Nice site, I would buy a t-shirt; unfortunately I live in the other side of the world.
Live Long, and Prosper
I find very helpful some plugins that are around for firefox and chrome that let you resize the screen and check the website in many different widths/resolutions (especially for fluid widths).. Web developer tools, Pendule, Resolution test etc , all have the ability to show you the site in different resolutions.
Sorry I dont understand the logic of this articles suggestion to set the with at 960.
Look at your own stats above. They show that 85% of users are using a width wider than 1024 now.
The SMALLEST width among that 85% is 1280.
So wouldn’t it stand to reason that the standard fixed width should be for those on 1280? Given that everyone else is higher rez (wider screens).
You always go with the Majority and the lowest common denominator. The Majority is well above 1024 resolution now. Far, far above it.
So the lowest common denominator is now 1280. And it is also the majority.
It’s true, higher resolutions are more common today, what becomes a bigger issue is how usable is all that real-estate? Please note too that this article was written a year or two ago, back when the stats were different (I updated the stats listing this year) I still don’t build sites wider that 960px.
The problem with going any higher than a 960px width at this time is that you take the chance at alienating a section of you audience that are viewing at lower resolutions or smaller screens. It’s really better to play it save and go with a reasonable width. Consider netbooks and other mobile devices with smaller screens, these are in heavy use and the number are rising, these may not be a part of the WC3 stats listed here, but need to be considered.
The biggest issue to consider with widths higher that 1000px is readability. Text becomes more and more difficult to read as it gets wider and wider. I run two monitors at fairly high resolutions but I never view web pages at the full width, it’s just too hard to read and use webpages that are too wide.
Interesting article.
I’m a designer more than a developer, so I get the software to code for me. But I based my latest website at 1024px width and it looks fine on both my 27″ iMac and my 15″ Macbook.
http://www.screentargets.com/
Any ideas on how to improve it?
I’m currently working on the SEO and META data.
Thanks for the article. I guess there really is no set standard and the best option is to set page width at 960px. At the end of the day, the best thing is to test your site with as many different resolutions as possible. Testing on your mobile device is also important.