I often get asked what page width should I design to and my common answer is “it depends”. The goal is to design a page that looks good across most screen resolutions and most configurations allowing accessibility to the widest possible audience, but there’s alot to consider.
Post updated : please read Web Page Design Width 2013
Web Browser Chrome
Web browser chrome is any extra toolbar or gadget that takes up space on the screen, deducing web page space from the users view. Browser chrome can be Toolbars like Google or Yahoo’s popular toolbars, Bookmarks or favorites or your history toolbars. Some user’s surf with the bookmarks toolbar page open, I have also come across fellow web designers who surf with the browser window minimized, probably because they have such large screens.
Also you must take into account that the web browser itself has scrollbars that affect the horizontal width and also most modern web browsers have tabbed web browsing and a status bar, then there’s your operating system with the windows start and windows taskbar at the bottom of your screen, all affecting the vertical height of your actual viewport.
There’s a whole myriad of different resolutions that people are viewing your web page through and the old standard was to build for 800 x 600 but I have found for most websites and this includes my clients and my own websites that the average screen resolution is now 1024 x 786, of course this varies greatly depending on the audience of the website.
Designbit has a audience with a high technical ability and this is backed up by the cool flat screen TFT’s and LCD’s users are using to view the site, Laptops have had a massive impact on this factor too. On Designbit the average screen resolution is 1280 x 800, followed closely by 1024 x 768 and just behind is 1280 x 1024, but then theres more:
- 17.96% – 1280 x 800
- 16.55% – 1024 x 768
- 16.37% – 1280 x 1024
- 13.68% – 1680 x 1050
- 13.07% – 1440 x 900
If I was to build my page width to the largest user group then Designbit would be built for 1280 x 800 users, but then I’d also have to allow space for browser chrome, so lets say I decided to build at 1000px wide page width, the 16.55 % of users viewing on 1024 x 768 may strugle to get the full page contents if they have any horizontal browser chrome.
Handling Browser Chrome
As a rule of thumb I allow 1/6 of the horizontal screen space to browser chrome, this is usually plenty of space and also allows some extra room for white space around the design, which I believe helps readability.
The ideal page width for Designbit without annoying my audience would want to be about 1/6 of 1024 x 768, were roughly talking about 900px page width, its currently set at 890px.
Analytics is the Answer
So from the Designbit example you’ve probably determined my answer to the page width design question, my common answer is “it depends”, quickly followed by “look at your analytics”.