Maximum Fixed Width for a Website

[imbckagn]

I'm looking for the maximum fixed width I can go on a websites and still be compatible across almost all resolutions/monitors. I usually stay around 900px but I was wondering how much further it can be pushed?

[claus]

If you make it fixed, stick to lowest common denominator. Otherwise, make it fluid.

As for lowest threshold I'd say 800 because of all the netbooks that have entered the market the past few years.

[phranque]

if mobile browsers are part of the mix make sure you plan for the implications of those screen resolutions.

[imbckagn]

Thanks for the feedback. I'm going to create a mobile version of the website as well.

[badbadmonkey]

The problem is that as screen resolutions are going up (you can really assume 1280 px widths these days without cutting too many viewers off, especially if you're willing to take the attitude "to hell with anyone who hasn't upgraded their 15 year old POS 15" CRT monitor"), what is happening is that mobiles are coming along and turning themselves into mini-PCs with "proper" browsers and they don't bother with the mobile versions of sites... they have adequate resolutions that, especially zoomed out to something like 50%, people are used to managing.

I think the best solution is to either concentrate on a fixed smallish (1024) site when graphical accuracy is important, or be more flexible with scaling divs and good CSS. In this case think about maximum widths too, nobody wants to see text expanded out to fill a 30" monitor (like Wikipedia does).

[tangor]

Also keep in mind that with the larger wide screen monitors users frequently only use half the screen for browsing and the other half for other applications, or even three windows open at the same time.

[StoutFiles]

770px width is the "best" width you can use for maximum compatibility. However, it really depends on the site and whether that small of a width works for you.

[pageoneresults]

I use a min-width and max-width to accommodate a wide variety of browser viewport sizes, not resolution but viewport size, that's the important metric.

I've been working more towards fully fluid sites but it has been a challenge compensating for the large viewport dimensions many are using these days.

Fluid is definitely the way to go. My main focus now is to make sure that the primary content area is fluid and then the navigation elements are usually fixed to a certain degree, they do allow for browser viewport resizing and content flows freely with the viewport size, that's what you want. Avoid the horizontal scrollbar for the majority of your audience, that's the short term goal.

I checked the top 5 screen resolutions over the past 30 days for 2 larger sites. This is what I have...

1. 1024x768 21.05%
2. 1280x800 16.13%
3. 1280x1024 14.84%
4. 1440x900 9.38%
5. 1680x1050 8.47%

1. 1024x768 22.44%
2. 1280x800 22.07%
3. 1440x900 9.41%
4. 1280x1024 8.90%
5. 1680x1050 4.39%

Trying to accommodate the 800x600 crowd at this point is a challenge. When you have left and right columns that occupy a minimum of 400 pixels total, that leaves you about 360 pixels to work with for primary content, that's based on the 755 pixel max-width.

Many designs today are not 800x600 friendly, nor are they fluid friendly in many instances. If I were to take an educated guess, most themes are targeting the 1024x768 crowd at this point and have been for quite some time.

I've seen a few sites that detect viewport sizes and serve a layout based on that. These are mostly fluid sites out of the box but they have some extra stuff going on that takes the browsing experience to a more targeted and refined level.

I've found out through my own personal experience that using max-width is important if you're not serving a 3 or 4 column layout that is conducive to larger viewport sizes.

[rocknbil]

The big problem is wide lines present a legibility problem akin to 9px type. I go with min-width 600px, max-width 1020px, design so it fluidly adjusts between those two gracefully, which of course leaves IE6 in the cold. It's tragic it has such a long and painful death.

[aristotle]

Does anyone know the pixel widths of the iPad and typical netbooks? I'm guessing about 800 px, but not sure how close that is?

[StoutFiles]

Does anyone know the pixel widths of the iPad and typical netbooks? I'm guessing about 800 px, but not sure how close that is?

I believe it's 1024x768.

To sum this up, suggested px guidelines:
770px max-width for 800x600 resolution.
960px max-width for 1024x768 resolution.

This is to account for the scrollbar as well as IE applying their own padding to the outside. If you really want to test it though, adjust the resolution on your monitor and see how your site functions on lower resolutions.

[aristotle]

I believe it's 1024x768.

Thanks for that info Stoutfiles. I don't have an iPad, but have seen pictures of it that show it used in both portrait and landscape orientations. So in portrait orientation, apparently the width is 768 px.

[Mark_A]

I used to make 760px wide fixed width sites which seem to be ok for 800x600 and 1024x768 but they are a touch narrow for the wider screens of today.

But then flexible sites that expand all the way on a wide screen look pretty silly also.

[Mark_A]

I think these guys usually call it about right on width [news.bbc.co.uk...]

[pageoneresults]

The BBC missed the mark on that one. They're targeting 1024 and didn't allow enough compensation for vertical scrollbar width, etc. I end up with a horizontal scrollbar when browsing at my normal viewport dimensions of 955x500.

OT, the BBC SHOULD look at removing this from their CSS. I understand these types of coordinates may be troublesome...

.offscreen{
position:absolute;
top:-500000px;
left:-500000px;

[Mark_A]

The BBC missed the mark on that one. They're targeting 1024 and didn't allow enough compensation for vertical scrollbar width, etc. I end up with a horizontal scrollbar when browsing at my normal viewport dimensions of 955x500.

Oh, I thought they had it about right. I have a big screen at work but at home I still have 1024 x 768 and I often view it in a smaller window knowing that what is at far right I don't need, but sometimes I max the window and I don't get a horisontal scroll bar.

Mind you, that machine of mine is old, perhaps I am not seeing the same BBC site as you are.

[pageoneresults]

Oh, I thought they had it about right. I have a big screen at work but at home I still have 1024 x 768 and I often view it in a smaller window knowing that what is at far right I don't need, but sometimes I max the window and I don't get a horisontal scroll bar.

I use the Web Developer Toolbar and have easy access to resize windows and enter specific dimensions. I viewed the BBC CSS and they are forcing a 974px width on the inner container, that may be just about 14px too many, I'm not 100% sure. Also, this is pushing the viewport envelope if you ask me. The 1024x768 audience is one of the top 2 display resolutions. Forcing anything wider than 955 may be asking for that horizontal scrollbar to appear as it does when I resize down to what has been shown to be a safe min-width dimension for 1024 - 955px.

Maybe the BBC designers know a little more about this than I do, I hope so since they are forcing that 974px width. That only leaves 50px of breathing room. Plus, that is assuming everyone has their browser maximized.

I think forcing anything above a 760px width is asking for trouble at this point in time. There are still quite a few folks browsing at less than 1024x768 if you consider actual viewport sizes and not the display resolutions. There should be more flexibility allowed in the layout to compensate for those varying viewport dimensions. That's where the min-width and max-width come into play and it's usually the primary content and right nav that are fluid so that horizontal scrollbar doesn't get invoked to frequently. Just make sure whatever you have that scrolls to the right of the viewport is not of major importance.

[pageoneresults]

I should have done a little more verification first before dissing the BBC although forcing that 974px width I think may present some challenges.

I just took exact measurements from Firefox. At 1024 window width, there is exactly 1008px of white space inside the viewport. The only thing encroaching on that horizontal space is the vertical scrollbar at right which measures 16px in both FF and IE. That means you could PROBABLY max out at 1000px and still have 8px of breathing room.

I still think there SHOULD be fluidness when minimizing the browser and not a forced width that exceeds the average viewport dimension when targeting 1024x768 or less.

[robdwoods]

I have to go with pageoneresults. Target 1024 px (with an actual usable with of 1000 px).

The width profile of your users is going to vary based on their level of technical sophistication (more advanced = wider screens).

Our mix looks like


1024x768 21.40%
1280x800 19.73%
1440x900 9.84%
1280x1024 9.53%
1680x1050 6.77%
1366x768 5.62%
1920x1200 3.29%
1920x1080 2.32%
1152x864 2.05%
1280x768 1.87%
1600x900 1.84%
800x600 1.48%

We have abandoned 800px wide designs. Basically, we are willing to have 1.48% of users horizontally scroll in order to better serve the vast majority that have 1024 or larger. With 20%+ we are not going to expand beyond 1024 for the foreseeable future.

[JAB Creations]

Here's a genius idea: completely fluid width without the static width hassles and simple resize the browser to test various resolutions. For Firefox there is the web developer toolbar with a resize menu.

- John

[jkovar]

From the polls I've seen on iPad themed sites, most people who use their iPad to browse the web do so in landscape orientation, meaning that iPad users are typically 1024x768 users. From what I understand the iPad always reports its' resolution as 768x1024 (portrait orientation) though.

I don't remember them off the top of my head, but there are CSS media type extensions that make it possible to load different stylesheets depending on whether the iPad is in portrait or landscape orientation.

[Mark_A]

So, when 800 x 600 was popular I used to make 760 width pages and that seemed to be fine. So I left about 40px spare for vertical scroll bars and the like.

But now with 1024 being the norm people are suggesting "an actual usable with of 1000 px", is 24px enough for vert scroll bars and the like?

I wish there was a way of having a flexible site but limiting its max width, limiting its min width is easy, but limiting max width could be cool.

[yaix2]

I use 960px width with a sidebar that is at least 160px, so that the actual content fits well onto a 800px display.

Even on my 1600+ px screen I usually use browser windows with 1024px, just to not forget about smaller devices, when I code a layout.

I wish there was a way of having a flexible site but limiting its max width,

CSS2 max-width:

[johnnie]

I use 960. It works very well for me. I'm sorry, but 800x600 has had its time.

[optik]

1024x768 - and above basically

[eWhisper]

Why not let your analytics system tell you what you should design for?

I have one site where 85%+ of the people (and 95% of the conversions) are on 1920 x 1200, 1920 x 1200 or 1600 x 900.

I have another one where 1280 width is 85+ % of the users.

And yet a third one where 800 x 600 and 960 x 600 is about half the traffic.

Those three sites should not try and use the same width in their design; the users have told me exactly what they are using to access the site.

[Mark_A]

1. 1024x768 24.83%
2. 1280x800 15.59%
3. 1280x1024 15.19%
4. 1440x900 7.37%
5. 1366x768 5.91%
6. 1280x768 5.51%
7. 1680x1050 5.18%
8. 1920x1200 2.41%
9. 1152x864 2.04%
10. 1600x900 1.79%

It seems for our main site that 800x600 is not even in the top 10 but a full quarter are using 1024 x 768

But #*$!x visits used 96 screen resolutions - That is a lot of variety!

[graeme_p]

@rocknbil, why address the readability problem with a max-width in pixels, when a max-width in em would be mosre consistent across different browser settings.

[albo]

I've been surviving with an elastic layout - percentage cols within a wrapper (some of my sites have 77%, some 85%), with max-widths in ems.

I found per a suggestion (I forget where...) a call-out for separate iPhone styling, a la:

@media only screen and (max-device-width:480px) {

I use it for separating nav into screen-width bars, with on/off content between bars, a la Yahoo!

[rocknbil]

why address the readability problem with a max-width in pixels, when a max-width in em would be mosre consistent across different browser settings.

Are you talking about max-width on the text itself? I was referring to the container. I'd never use em or percentages on a container min/max because fixed width elements inside the container, like images or other thingies demanding a fixed width, cause too much trouble with fluid width elements, like text or fluid width internal boxes.