What's the standard “minimum” resolution I should support with a website? [duplicate]

StackOverflow https://stackoverflow.com/questions/842638

  •  20-08-2019
  •  | 
  •  

Question

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"?

Was it helpful?

Solution

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

OTHER TIPS

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.

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.

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.

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.

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

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.

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.

I usually design websites 800 wide.

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

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.

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.

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top