Web Page Design Width?
April 17th, 2009, Author: Anthony, Category: Web Usability
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.
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.
Screen Resolutions
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 Example
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”.
Matt Clarke
I try to use a web page of 960 X 600 at the moment but have noticed some people going larger than that already. I think the answer to this and life, the universe and everything is 42! Who know what is right and wrong. Mostly depends on the expected end user and the machines they run. Thanks for all the good work, Matt.
Claire Web
It is a pain that not all screens are the same size and resolution. I Generally design most my websites at 1000×800. This includes a good 200 pixels of background. Also the Dell XPS laptops have a stupid resolution of 2048 x something, and even the larger of the website i design look tiny! A lot of people at the moment don’t have super resolutions like this, but one day they will, and we will need to design much bigger than we currently are.
Screen Resolutions « V I V A N T
[...] 27 04 2009 Interesting artlcle about the latest, most-commonly used Screen resolutions of web users, posted this month (so rather [...]
Evan Skuthorpe
I tend to design for a screen width of 1024. However, it’s still considered good practice to design for 800×600 as a chunk of web users still have smaller screens.
It really depends on your userbase and sometimes your client’s wishes.
Dave Ellis
I never understand people designing sites to a width of 900px and there are a lot out there. It’s right in between an 800×600 monitor and a 1024×768 – seems an odd choice – choose one or the other, don’t go in between there’s nothing to gain.
Goldberg
Im one of the SEO guys @ Blueprint design Studio in chicago and I think its still vastly way to spread out. I mean at home I have a 15″ screen and at work I have a 20″ screen and certain stuff I surf on at work looks weird at home. but the majority I’v seen with people browse the web in 1024 x 768. Just my thoughts.
I use to be hooked into my tv with my laptop and desktop. but it got really annoying when I sat down and could not read the text on the screen.
Ann Arbor Michigan Website Promotion
It is difficult to lay out a standard web page width. There are so many factors to consider. Quite a few of which you have illustrated beautifully.
Elliott
I usually opt for 900 width only because historically the analytics of most of my websites barely show 1% of the audience using 800×600 res, I wonder what the resolution would be on the new $10000 coffee table pc!
James
I think the majority of desigers are currently designing to somewhere between 900-1000px width. It is so apparent when I look at a few of my clients websites that were designed for 800×600 as they look dated because of it!
Neil J
I roll with sites designed at 1024pix width..
Recently I checked out Alexa’s top 500 websites of the world and almost all are doing the same…
1024 is the new 800!
Evan Skuthorpe
Dave Ellis, I think you’re missing the point. When someone designs for 1024 width, it doesn’t mean they’re designing the site literally at a width of 1024. It means they’re designing for a screen width of 1024, hence 900px being a more than reasonable choice of width.
RONY
thank you very much for providing me such wonderful post.
Matt - Web Design Northampton
Great article, we’ve just re-designed our website and being a web designer this is actually quite a big issue. I was working on a 15″ macbook pro and was relatively happy with it until i looked on a 24″ imac.
Jay
It’s good you mentioned in the article that it’s not just about the resolution, but about browser habits. On a PC I find I maximise my windows a lot, but on my Mac’s the OS encourages you to have multiple windows floating around, and even tho it’s a native 16×9 screen I tend to have my web browser at more of a ’square’. I’m also loving Safari 4b’s brilliant use of tabbing within the header of the software for even more real estate.
My current site is using a 100% width for header and footer, and static width of 960px for content. Surprised not to see 960 being thrown around here a lot, it’s a very common size (heck even the 960 grid css is built around it)and it’s fun to be working on my site, flick around a few tabs and see other sites match its borders exactly.
Dave Ellis
Evan Skuthorpe – I just don’t see the point in dropping 90-100 pixels off your available space. If you make a decision to design for a 1024, use what’s available, whether you use it as negative space or not is up to you – it just seems an easy choice to design at a width of 900 pixels and float your design in the middle to take up the rest of the space, and again I don’t see what there is to gain from using less space.
Karlo
c’mon Dave (ellis)… I think Anthony (author) mentioned about browser chromes, right? To make it a bit clear… Imagine a viewer’s screen is 1024 in width and you designed your page for 1024, and say the browser’s v-scroll appeared… you’ll notice that you’ll also have a h-scroll since the v-scroll bar takes some space in your 1024 screen. If that scroll bar has to be displayed, your site that has a width of 1024 will not fit anymore; thus, the need for h-scroll. and we don’t want that.
To avoid that, we need some allowance… so designers make 900 or 960 widths for a 1024 screen.
singapore
most of the sites we developed uses 900px width as well.
Nice post on resolution survey
myadds
i was using 900 but out our boss got new monitor has 2048 px. and he is telling everyday adjust our website width, so we are confused bcoz we can not make witdh to 1800-2000
Phatman
Just because you have a 2000 dpi + monitor doesn’t mean you have to use the whole width! many people have large resolution monitors to open lots of panes for applications like Flash or multiple applications open. But I think 960 is pretty much standard at the moment, god knows how people cope on those tiny Internet cafe laptops lol.
Roger Fong
The optimal width also depends on the content. A site that uses sidebars and side boxes would require and accommodate greater width. A simple site would look better with a compact width. The branch library in my neighborhood has computer screens with maximum widths of only 800 dpi. You can’t imagine how frustrating it is to have to scroll left-right.
Umang
The tip about analytics is good, however i currently believe the bigger is better with web 2.0 designs surfacing more and more!