WordPress Designer for hire, with a love for blog design using WordPress.

Web Page Design Width?

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.

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”.

40 Responses to Web Page Design Width?

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.

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.

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.

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.

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!

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!

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.

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.

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.

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.

The tip about analytics is good, however i currently believe the bigger is better with web 2.0 designs surfacing more and more!

GB

Yes, 960 pixels wide should be the new standard!

Why? Because this fits the width for the native resolution for a large number of existing monitors (17″–19″ LCDs at 1024×768) AND it is exactly half the width of the current crop of large widescreen monitors which typically have a native resolution of 1920×1200 or 1920×1080 (1920 / 2 = 960).

As someone mentioned, just because one has a large monitor, doesn’t mean they maximize their browser window within that monitor.

Since Windows 7 makes docking windows to the left or right side of a display so easy, more and more people will start to do that. The ability to have two browser windows tiled side by side (without horizontal scrollbars) is awesome.

I think designing for a width greater than 960pixels is a big mistake.

I agree with Dave, it doesn’t matter if we use up all the space, whether negative or positive it can be adjusted later according to our suitability. But lets try to keep our options open up to the space really available.

Jarrid1937

I’m with dave too, although he still seems to not be including some factors. 900px is a waste of a lot of useful space you could otherwise have. You can take into consideration items like not having the window completely maximized, having a vertical scrollbar and still add 75 pixels to that number. I just redesigned a website for a client who’s previous designer thought it would be a great idea to have the width at 880px… Not only was that choice quite limiting for things like product listings (only allowed them to list 2 per row), but it still provided a horizontal scrollbar for 800×600 and was not even remotely making use of the extra space for users with 1024×768. My advice, start with the max reasonable width for the resolution 1024×768 (aka 1000px), then test the design is multiple browsers under multiple conditions. You’ll find you may need to scale it back another 30px or so, or perhaps not.

curious to know about where “the fold” should be estimated though. right now i’m designing for a small monitor – maybe a 13″ macbook, so i have 900px wide – but for my pretty splash/homepage i’m curious to know where to estimate the fold.

anyone know of stats on where mac users keep their dock & icon size? i always keep my dock on the left, but they come shipped w/ the dock at the bottom (and with huge icons)

pKeerma

I don’t know if this thread is dead, but the debate goes on. With the benefit of a full year passed since the first post, I think the argument now favours the “wider is better” camp. High resolution, wide screen monitors are now the rule, not the exception. 800 x 600 sites look dated, waste h-space and require lots of v-scrolling to fit content. I think designing small to accommodate multiple windows on the desktop is giving the user too little credit. If the site is of interest he/she will take the millisecond to expand the browser. 960px is a good compromise – large enough to accommodate content, small enough to fit in an 1024 window (minus chrome).

Been doing this for a very long time and 960/980 is todays standard. Most users in my stats do not maximise their browser window if they’re using a larger screen. I do not agree with the fact that there is lost space as most designs use the background design/image within this area as part of the design and it breaks the page from the desktop image/contents.

When it comes to designing a website, i generally, set the website to centre in the browser and have the with at 1000, seems to do the job, then let the website have any height with a few nice borders.

Stevan

If anything, people with small monitors will eventually force themselves to get a bigger monitor as the price for them is so low now. We need to cater for the future and the rest will soon follow

I have been designing websites to be 965 pixels in the width and this width has been working out great for me for years. I checked the website page on all browsers and this width is perfect. I do not know why so many of you mentioned 960 pixels. I know we are only 5 pixels off in difference, but I would like to know why because 965 works great! =) Thanks!

This is definitely a good article in pointing out what you should be considering when making a decision on website design.

N/A

hey there and thank you for your info – I have certainly picked
up something new from right here. I did however expertise some technical points using this website,
as I experienced to reload the site a lot of times previous to I could get
it to load properly. I had been wondering if your web host
is OK? Not that I am complaining, but sluggish loading instances times will very frequently affect
your placement in google and can damage your high-quality score if ads and marketing with Adwords.
Well I am adding this RSS to my e-mail and can look
out for much more of your respective fascinating content.