views:

2101

answers:

13

Duplicate:

Recommended website resolution (width and height)?

I tend to think of 1024x768 as the minimum Screen Resolution that a modern web browser will run in, but I worry when using this resolution for a business website because I feel that I might be hurting the folks out there who are stuck with something smaller/older. So I ask, realistically, what is the minimum screen resolution I should expect my website to function perfectly in with the browser "maximized"?

A: 

I usually design websites 800 wide.

Height isn't a problem, as the user can scroll.

Charlie Somerville
+5  A: 

Look to the Netbooks for a new minimum. I'd say 1024x600 is reasonable.

Edit: You can always look to any number of sites that give you statistics on browser usage. Here's one that Google turned up for me:

http://www.w3schools.com/browsers/browsers_display.asp

Mark Ransom
Wow, that's a good link. So 96% of the userbase will be just fine with 1024x768, and according to this stat it looks like it's not quite the "minimum", more like the "norm". Very good to know.
Nicholas Flynt
Well, 96% of people who express their interest in web design by visiting w3schools might have screens that size, but that may or may not tell you anything useful about your target market. Be very careful about the origin (and hence relevance) of such stats.
Will Dean
Do not assume the browser window is maximised, while my screen is 1600x1200, my browser is significant smaller than that (full width makes most text too much like hard work to read).
Richard
+2  A: 

Depends on your audience. If it's mainly American consumers at home, then I think you're safe with 1024x768. For schools, corporate and global international audiences you'll want 800x600 because schools and businesses are less likely to have upgraded computers, and international audiences in various countries may not have larger screens available for whatever reason.

apphacker
+1  A: 

1024x768 is fine. Most people have that resolution setting and the ones who don't won't have a heavily compromised user experience. Also, to ensure your page fits nicely into the browser, taking into account scroll-bars and such, make the with of your pages 960px.

karim79
A: 

As Mark said, there are a number of netbooks around now. Most of them now have the 1024x600 size, but there are also some of the "older" netbooks that have lower resolution then that still. Mine for example has **wince** 800x480.

If you want to be really compatible, go for 800, but otherwise, I'd say your good with 1024, and as for the height, the user can always scroll.

DeadHead
A: 

Don't forget that scrollbars, toolbars, and sidebars can constrict the space a little. Even if you assume the resolution is at least 1024*768, don't make your page 1024 wide.

Artelius
+2  A: 

Consider using a fluid layout that adapts to the user's screen. Most sites with a fixed layout force the majority of users to view the site targeted to the least common denominator even though 90% of the visitors have a much higher resolution available. This results in layouts that are overly populated with navigational chrome and little content.

If you must use a fixed layout, consider taking a cue from MSN where you split the screen into 760 and 224 pixel columns. If the visitor has a resolution of 800 (which you can detect in JavaScript) then hide the 224 pixel column.

UPDATE from comments: As for determining a safe min though I'd set your screen to 800x600 then browse some of the popular general public sites - MSN, Yahoo, etc. and see what they do. It's a good bet they've invested a lot of research in this area and adopting what they've done is usually a safe bet

Paul Alexander
I actually tried a fluid layout, and I find myself with the site looking bad on my own monitor because pages with less text feel "empty" on only one or two lines. My real solution there was to work with both a min and a *max* resolution, and test the design out at both extremes. My max was fairly large (1600px wide) so any bigger than that and the fluid design would center like most fixed width designs do.But again, I'm looking for a min here. ^_^ Design considerations can always work up from there.
Nicholas Flynt
Yeah know what you mean. My max is 2500px and even the densest pages are still empty. One method I liked was called a "jelly" layout that was basically fluid up to a maximum width. I like that because even if I have 2500 pixels to work with reading text that spans the whole screen is cumbersome. With a max around 1200px or so it worked well.
Paul Alexander
As for determining a safe min though I'd set your screen to 800x600 then browse some of the popular general public sites - MSN, Yahoo, etc. and see what they do. It's a good bet they've invested a lot of research in this area and adopting what they've done is usually a safe bet.
Paul Alexander
+2  A: 

Can I also suggest you test a maximum resolution as well. Many sites are unusable (without zooming) at 1920x1200 due to people using fixed font sizes and the like.

SCdF
A: 

Definitely 1024 wide (as in 980px or so usable), but please don't design for a fixed height.

da5id
+3  A: 

Dear God, have we forgotten?

The WHOLE POINT of HTML - a LOGICAL page description language - is that you NEVER have to think or worry about the display device.

What happens if the display device is a text-reader for the blind?

Or a text-only browser on a console?

But that's not the main point; the main point is that HTML LOGICALLY describes the page. If you in your logical description of the page are making PURELY PHYSICAL descriptions then you GOT IT WRONG. You're writing web-pages like you're Word emitting HTML!

You need to write your web-site so it works LOGICALLY - which is to say, you leave the problem of rendering PURELY in the hands of the rendering agent. If you're not doing that, you've got it WRONG.

Blank Xavier
In theory, there's no difference between theory and practice. In practice, there is.
Mark Ransom
The concept of HTML as a logical display for content has long been forgotten. And it's not true. There's a lot more to _presenting_ data to the user than it's logical format. Only the most basic of layouts can be universally formatted for different devices. Accessibility and mobile devices are important factors when developing a site the shouldn't _dictate_ a limitation on the layout for 90% of the users. With a good Model-X-Presenter framework you can just present different views to different targets.
Paul Alexander
I think the poster is right, UNLESS you have to do "art" (graphics), then it gets to be a much more relevant question. I do hate it when CRUD / bulk-dump crap is treated as if it were "art", though. Just make it squeeze and scroll as needed, if possible.
Roboprog
IME, in most cases, people who resort to physical page descriptions are being lazy. It's easier not to think and just to physically lay out the page. It's just like regular programming. You can write good code or you can write bad code.
Blank Xavier
Its too hard to make websites perfectly resizable.
Unknown
@Unknown: the very fact you're thinking in terms of resizing means you've got it wrong. Resizing is not your concern. Get your logical page description right and you can depend on the rendering agent. Get it wrong - make a physical page description - and then you need to worry about resizing.
Blank Xavier
It's a nice idea, but it fails in practice, 1) because people who pay you want it to look a certain way and don't give a tinker's cuss about your hippy ideals and 2) because you can't always trust the browser to do it's supposed job. For example, if I return search results in a table format (each result is a row with a bunch of columns, e.g. SQL select) I have to conscious of how many columns I'm using so it displays correctly for people without horizontal scrolling.
SCdF
It's a wonderful ideal, but SCdF sums it up nicely, it fails in practice. I tend to think of HTML as content, which is very nice, but then I *need* to provide CSS and JavaScript to make it look excellent on a variety of displays, or my employer won't pay me because the site looks like... well, black text on a white background with blue links, you do the math.
Nicholas Flynt
+4  A: 

From an article in Jacob's Nielsen Alertbox called Screen Resolution and Page Layout:

Optimize Web pages for 1024x768, but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024.

eKek0
+1 for quoting Jakob Nielsen.
htw
A: 

I'd take a look at those statistics: http://www.w3schools.com/browsers/browsers_display.asp.

As of January 2009, only 4% of people visiting W3Schools are using 800x600 as resolution. The remaining, are using at least 1024x768.

Beware of how much of that 4% could be part of you users, though.

friol
And also how many people are using mobile phones now.
Unknown
A: 

1) My browser is not maximized. The size of my screen doesn't matter. The size of my browser window does.

2) The iPhone's screen resolution is 480x320. NewEgg currently lists at least one 1920x1080 monitor for under $200. Designing to either of those resolutions will make your site completely unusable on the other. Even if you split the difference and design to 1024x768, you'll get a stripe covering half the screen width on the $200 monitor (which, IMO, looks like crap) and it will still be completely unusable on the iPhone.

Screens aren't just getting bigger. They're also getting smaller. The trend is moving to fluid layout instead of fixed-width and it's for a damn good reason.

Dave Sherohman