What screen size?

[Don Markstein]

I run a site that gets millions of visitors and have had it going for almost eight years now. Yet, I don't know a darned thing about what I'm doing. I've been having a professional management company operate it for the past couple of years, but am about to take back management myself. It would be nice if I had a better idea how to go about it.

When I had it before, I optimized it for a user whose browser was 800 pixels wide. But the management company ran it wider. I think that's a good thing, but am uncertain how wide I should make it.

The next screen width up is 1024 pixels. It would be nice to have that extra width, but 1200 would be even better. My question is -- which? I don't want to exceed my users' capabilities, but what do you suppose those capabilities are?

What do most people browse with? I doubt very many use 800-pixel screens anymore, but what? Should I optimize it for a 1200-pixel screen, or just 1024?

-- Don Markstein

[tangor]

I would go completely fluid since the advent of widescreen LCD screens is really kicking in. I run a screen resolution of 1680x1050... but usually use only half that width for the browser. Also, these higher resolutions means "smaller" font appearance... and folks routinely use the zoom page features in major browsers to make them readable. Beware the "fixed width" design for anything less than sidebar columns, or embedded text boxes. Tables still work, but CSS div layouts make more sense.

Take a look at your present coding. If it validates there's that old adage: "If it ain't broke don't fix it..." If there are significant errors then now might be the time to invest in a revamp.

[phranque]

i would check your analytics to see what screen sizes are used by your visitors and make your decision based on that.
in most cases i have seen there are still a significant number of visitors (30-50%) using screens (typically laptops) that are limited to 1024 pixel width.
if you subtract room for the vertical slider bar and browser chrome your available width is actually 1002 pixels or so since you can lose 15-20 pixels.
in this case, you also want to plan how much of your content is "above the fold" for a "laptop sized" screen.

[simonuk]

You've admitted that you don't know much about design which is a good thing :-)

You need a stats software first off (something like Google Anylytics which is free) so you can see exactly what your screen size percentages are. I would not do anything until I knew the stats.

You then have two problems based on your design experience:
Static site: You still need to cater for 1920 screen sizes as well as netbooks and mobile browsers

Fluid site: Doable but can be difficult to control for the extremes above.

Personally I have been designing at 960px width since last summer because the 800x600 users are finally below 1% on most of my sites. 960x still looks good in higher screen sizes and fits nicely in all netbooks.

[Don Markstein]

Thanks, guys! There's a lot to think about here. (But then, as I said, my standards for thinking are kind of low. I think and think and think, but the ideas I come up with are kind of lackluster.)

-- Don Markstein

[BeeDeeDubbleU]

Personally I would not go for a fluid design. Websites (yes, like this one) become very hard to read when the lines of text get too long. You could columnise it but even that can be a problem on large sites. When I am looking at columnised pages I am never sure whether I should be reading to the bottom of the column or moving to the adjacent column. Fluid designs also make image displays unpredictable to some extent.

I appreciate that people can reduce the browser window size but this is just making things difficult for them and we don't want to do that do we?

It seems to me that all of the newspapers are going tabular while much of the web is going broadsheet. Printed media is actually a good comparison. Do you ever see newspapers with a single column of text stretching across the page? The answer is no of course because this is difficult to read.

It has taken printed media centuries to evolve to where it is today. We can all still learn from it.

[swa66]

A gotcha with screen width is that there are people (myself being one of them) who *never* run a browser full-screen. So yes you might see my 1920x1200 screen but the browser is likely only about half that width (or even less).

As for fluid designs: go for it, but make sure not to go too wide nor too narrow, there's no point in having lines so long that it's hard to find beginning of the next line when reading it. Min-width and max-width help a lot beyond those visitors still stuck on IE6 (but they might not be using all that modern hardware either).

Personally I design for 800px wide. Also take care with an evolution towards more mobile devices that have rather small screen (iphone e.g.)

[topr8]

as swa66 points out, it is hard to know how much of the screen the client is using with their browser.

personally i was designing to 760px wide until recently and am now going for 960 as a minimum.

fluid or not fluid?
i agree that fluid is good, if the design takes this into account.
however it is bad if it just stretches to 100% no matter how wide the browser window is, so i use the css max-width property as well at around 12/1400px - of course this is not ideal but for me it is an acceptable compromise.

the hand-helds and small screen issue?
yes this is a big thing and about to get bigger, currently i don't feel my niche attracts the hand held market but one day it will as handhelds become more universal, i'm looking at an entirely different stylesheet creating a different design for the small screens - it is complex though and quite a big endevour.

[Yoshimi]

Everyone should be designing with netbooks in mind, even if they're not yet targeting hand helds. While I agree that there are a lot of niches where mobile phone compatibility isn't required, netbooks are such a growing market, and as a netbook user it is remarkably frustrating to not be able to view a site properly, and there has to be some really compelling content to make me stay.

[Wlauzon]

960 or fluid (or semi-fluid) seems to be the current "best of nothing is perfect" solution.

There are ways to keep lines from being too long if you use columns by limiting the width.

Unfortunately I don't have an 1800+ wide screen so I have no way to check out our sites. But it seems that once you get beyond 1200'ish most people don't go full screen.

[tangor]

I read this forum full screen AND ZOOMED TWICE because out of the box I CAN'T READ IT (too small) and would be too small even if I resized to half of my monitor real estate. Column constraints (max) make sense, but don't PREVENT the user from bumping it where THEY need to see it. Just a thought... hence the fluid comment above.

I don't waste time on 10px sites these days. That's what em's are for.

In the best of all webmaster worlds these widescreen monitors would be physically rotated vertical and the rendering image would translate landscape to portrait... thus giving a perfect view of an ordinary page... but that's not likely to be the case.

[jetteroheller]

I had since 2000 an layout system moving around DIV elements by javascript for VGA, SVGA, XVGA

Since the vistorts below XVGA are now less than 2%, I scratched this system autumn 2008.

XVGA 1024x768 is now my standard.

To design for 1200 would make about 1/3 of the visitors difficulties, so much see with less than 1200 width.

I use the space between 1024 and 768 with a greater logo for branding in the background graphic.

This is the only item, somebody misses with a smaller screen.

[pgp566]

Interesting thread... fluid may be OK for text but what about display images...? They can't 'fluid' :-) I have been using 900px as a general rule because of the compromises already mentioned .. chrome, favorites window, etc..
Philip
--