views:

32814

answers:

20

Hi,

Is there any standard on common website resolution?

We are targeting newer monitors, perhaps at least 1280px wide, but the height may varies, and each browser may have different toolbar heights too.

Is there any sort of standard to this?

Thanks in advance!

+15  A: 

Bad idea, I believe. The whole point in separating content from layout was to enable your web page to be displayed on any sort of browser.

Putting in artificial limitations such as a minimum screen size will limit your market.

Having said that, I believe every desktop should be able to display 1024x768. But what about the browsers running on iPhones or other screen-challenged devices?

In answer to your specific question, no, I don't believe there is any standard for a minimum or common display area in browsers.

paxdiablo
Wait, 1024x768 may be the whole screen size, but this is often reduced by system bars, window decoration, menu bars, tool bars, tab bars, and potentially scroll bars and a navigation tab.
Svante
I agree. I like to have a quick launch bar that runs down the left hand side of my screen. Usually 2 big icons wide (128 pixels??), so that I can launch just about every application I ever use, in a single click, without ever using the start button.
Kibbee
I said the "desktop" should be able to do 1024x768, obviously available space will be smaller than that. Besides, my answer is "don't do it", not "1024x768".
paxdiablo
Bad advice. Who said that HTML is not for layout?Liquid layouts are so 90's, where the difference in resolution were relatively small. Try reading some texts at 10pt font on 2560x1600 screen without any imposed width limit. You'll start hating those liquid layouts very soon.
Wouter van Nifterick
@Wouter, how does your iPhone handle images meant for a 2560x1600 screen? By all means, set a minimum standard if you wish, just be aware that you're limiting the potential viewers.
paxdiablo
@Pax: My point was that it is very difficult to come up with a liquid layout that works good on both very low and very high resolutions. I've never come across a website that works nicely on my PDA and on a high-resolution monitor, with the same html. The best ones are targeted specifically.
Wouter van Nifterick
@Wouter, I've seen sites that have www.example.com and www.example.com/pda (for low-res devices) homepages which is one way around it, I guess. But it required developer to maintain two sites with identical content.
paxdiablo
@Wouter (cont): I suppose you could serve the same content with different CSS layout, but I'm not au fait enough with CSS to comment intelligently.
paxdiablo
My company builds most site as 1000px wide this allows for 1024 - scroll-bar if someone configures the task bar on the side then they have to live with the consiquences, as to the iPhone and other device, they usualy look fine, I can browse on my cell phone (not an iPhone or BlackBerry) just fine.
Unkwntech
agreed, liquid layouts work better for everyone. Large screens being too large is a non-issue as these users can size their browser to whatever dimensions suits them.
nailitdown
In addition, Firefox (at least) has the wonderful CTRL+ and CTRL- to make the pages bigger and smaller respectively. I only found out about them once when SO was restricted to the middle inch of my screen due to my 2yo getting access to my computer when I was making a snack :-).
paxdiablo
With all these pledges for liquid layouts it must be amazing to you guys that hardly any major website uses a liquid layout. At least take a second to think why that would be.
Wouter van Nifterick
For liquid layouts, you can always set max-width to put an upper limit for those who run a maximised browser on a large display.
Richard
As well as worrying about differing devices (phones, etc.) there is the issue of usability. Might some of your users have vision difficulties? I know people who have the screen resolution way up just so they can read it. Most are used to having to do a lot of scrolling but if the site is designed to minimize this it can be a god-send.The largest determiner is the target audience. A lot of my users stil use older equipment so smaller mmonitors are a fact of life.
monkeypushbutton
+1  A: 

It's best not to target any specific resolution, but to adapt easily to many different resolutions.

Nate879
+2  A: 

I would say that you should only expect users to have a monitor with 800x600 resolution. The Canadian government has standards that list this as one of the requirements. Although that may seem low to somebody with a fancy widescreen monitor, remember that not everybody has a nice monitor. I still know a lot of people running at 1024x768. And it's not at all uncommon to run into someone who's running in 800x600, especially in cheap web cafes while travelling. Also, it's nice to have to make your browser window full screen if you don't want to. You can make the site wider on wider monitors, but don't make the user scroll horizontally. Ever. Another advantage of supporting lower resolutions is that your site will work on mobile phones and Nintendo Wii's a lot easier.

A note on your at least 1280 wide, I would have to say that's way overboard. Most 17 and even my 19 inch non widescreen monitors only support a maximum resolution of 1280x1024. And the 14 inch widescreen laptop I'm typing on right now is only 1280 pixels across. I would say that the largest minimum resolution you should strive for is 1024x768, but 800x600 would be ideal.

Kibbee
+1  A: 

The guidelines we use, which seem to be fairly widely used and are backed up by the figures that we get from Google Analytics, are to design the site so that it will work on a screen that is 1024 pixels wide and 768 pixels high (1024x768 and 1280x800 are the most common resolutions we see, accounting for at least 70% of all traffic).

This is why you see many sites (this one included) which use a central column approx 1000 pixels wide and with the most important content in the top 500-600 pixels so it's above the fold when being viewed in screens this size.

Using a 1000 pixel wide layout works fairly well on screen sizes of up to about 1680 pixels in width (typically as high as you'll see on laptops, except the large 17" ones) but do start to look a bit silly on 1920 pixel wide ones (high end computers, typically workstations), however these very high resolutions don't account for a large percentage of traffic on the general internet - 2% or less (on the other hand, if you have a specialist audience like this site, the figure with high resolutions may be somewhat higher).

Greg Beech
If you're down-voting then please add a comment as to why.
Greg Beech
A: 

Try to target 1024 as the minimum width. Try how it looks at 800, but don't bother too much making that work. At 800x600 almost none of the major websites are going to work, so people working at that resolution are going to have problems all the time anyway.

If you're going to go for a liquid layout, make sure that text doesn't get too wide, because when lines are too long, they become hard to read. That's the main reason why most websites have a fixed width.

Wouter van Nifterick
I totally agree with both points. I go for about 960 wide (so for a 1024x768 screen). Web designers must also make sure that the line length doesn't get too long, otherwise it's really difficult to read.
Philip Morton
+4  A: 

Here are statistics of browser display in 2008: http://www.w3schools.com/browsers/browsers_display.asp

About 50% users are still using 1024x768. If you want your site to look nice in high resolutions use flexible layout.

Adam Dziendziel
Best to remember that w3schools statistics are for people visiting their site. This would be mostly people developing web pages, which isn't a proper cross section of the population. Looking at their browser stats, firefox is 44% while IE is 46%. Probably not a good sample to gauge the general web.
Kibbee
@Kibbee, Very good point.
Simucal
+1  A: 

Although the best width may by 1024 you'll have to adjust height for account for various browser settings (navigation toolbar, bookmark toolbar, status toolbar, etc) and account for taskbar settings. It'll quickly drop the 768 down to around 550.

Black Cat
+5  A: 

Forcing your user to scroll horizontally is a serious UI transgression. Unless you are specifically building a web site for a population with a known screen size, you are safest ensuring that your design works with screens as small as 800 pixels wide (about 8% of the web surfing population if memory serves me right). It is wise to make it adapt well to larger screens but not at the cost of the folks still surfing at 800x600.

Here's another thing to consider as well: not everyone runs their browser at full screen (I don't). So the idea that if is Ok to design for a specific (and large) "screen size" really doesn't work for a number of reasons.

Mark Brittingham
I would extend the statement to maybe say forcing multi-directional scroll is a possible transgression. Hori-scroll can be great if done correctly.http://deanoakley.com/http://www.thehorizontalway.com/html/css/urban-outfitters/
Typeoneerror
What we need are two new keys on the keyboard, "Page Left" and "Page Right".
paxdiablo
@TypeOneError, neither feels good to browse though, it's not natural.
Unkwntech
@TypeOneError, the portfolio site used that to good effect just because of the "neatness" of it and how clean the design was. However, I agree with Unkwntech that it doesn't feel right. Not to mention the fact that most users will have a vertical scroll wheel and not a horizontal one. That alone makes horizontal scrolling a bad idea.
Eric
@Eric, my scroll wheel scrolls horizontally in the two sites linked to. I'd say for things like portfolios where you want to grab attention and show an artsy style it's OK to go different. But generally it would be confusing for a user
monkeypushbutton
+1  A: 

Whatever your target browser size, make sure to include space for browser toolbars, status bars, and scroll bars as above. Internet Explorer (IME) often has over 100px of vertical space in toolbars and status bars. Typically, if I'm shooting for 1024 x 768, I would try to create a design of around 960 - 980px wide and 600px high to be safe. That way you accomodate scrolling if necessary and some nice white space (if the design requires it). I highly recommend YUI grids for instances where you need to target specific sizes:

YUI Grid

Typeoneerror
A: 

I target the 1024 pixel monitors (but don't use 100% of that space). I've given up on those with 800x600. I'd rather punish the few with outdated hardware by making them scroll if they need to, versus punishing everyone with new equipment by wasting space.

I suppose it depends on your audience, and the nature of you app though.

EJB
+1  A: 

All of the answers so far talk about desktop monitors, but I'm using stack overflow on my iPhone and I don't think you should exclude any mobile platform by targeting 1024 or 1280 horizontal pixels. Mark up your page so the browser knows what it all means and making it usable will come for free, even on screen readers and other kit you haven't thought of.

Graham Lee
Bravo, upvoting since you agree with me :-) although in two minds about it since you may get more votes than me :-( . Oh well, c'est la vie.
paxdiablo
+1 for apparently typing this response with the iphone keyboard. ;) My website looks great at 1024 with iphone's safari, fwiw.
Typeoneerror
With the iPhone I think it's going to depend on how you hold it, vertical or horizontal as obviously the dimensions will be different
Unkwntech
@TypeOneError not only did I type it on the iPhone, I was walking back from the pub too ;-)
Graham Lee
@Pax no, apparently I won't. ;-)
Graham Lee
A: 

Ultimately, this is not a matter of standards or best practices for markup, but rather knowing your audience and making sure your website does what you want it to do.

It's more important to consider the width of the browser viewport rather than screen resolution -- you cannot assume that every pixel on a display will be allocated to the browser (and even if it is, you have to subtract browser chrome). If you have access to analytics that report browser width (n.b. browser width, not screen resolution) then pay very close attention.

It's nice to try to accommodate the widest possible range of viewports but there are some limitations. Some challenges can be handled with CSS media types, some can't. Some can be handled with fluid layouts. But fluid layouts cannot work in all situations, depending on the type of information to be displayed, line length, reading comfort, etc. Some fluid layouts don't work in wide displays. Most break when sized below a certain width, etc.

As much as I'd personally like to design for viewports ~960 pixels and up, you can't always do it. So in some cases, it's still safest to design for viewports <=760 pixels or so (800 pixel wide display, maximized) -- though the time we can finally toss this limitation once and for all -- for the desktop at least -- is very fast approaching.

Where conversions are an issue -- and you have a fixed width layout -- you better have a darned good reason for putting anything that the user needs to click in order for the cash register to go "ka-ching" anywhere east of the 760th pixel.

Ditto for the primary navigation.

Finally, test your layout in everything you can get your hands on. Big. Small. Desktop. Handheld. The works. There's no substitute.

Clayton
A: 
Unkwntech
+1  A: 

there are actually industry standards for widths (well according to yahoo at least). Their supported widths are 750, 950, 974, 100%

There are advantages of these widths for their predefined grids (column layouts) which work well with standard dimensions for advertisements if you were to include any.

Interesting talk too worth watching.

see YUI Base

Simon_Weaver
+37  A: 

The basic advice these days is:

Optimize for 1024x768. For most sites this will cover most visitors. Most logs show that 92-99% of your visits will be over 1024 wide. While 1280 is increasingly common, there are still lots at 1024 and some below that. Optimize for this but don't ignore the others.

1024 = ~960. Accounting for scrollbars, window edges, etc means the real width of a 1024x768 screen is about 960 pixels.

Don't design for one size. Window sizes vary. Don't assume screen size equals windows size. Design for a reasonable minimum, but assume it will adjust.

Use liquid layouts. Use layouts that will adjust when the window is resized. People do this a lot, especially on big monitors. This is just good CSS practice.

Log browser display info. You can get actual numbers about this. I found some numbers here and here and here. You can also rig your site to collect the same data.

Mobile devices are special. If you got lots of traffic from iPhones and other mobile/small devices, you may need to give them special treatment.

User will scroll so don't worry much about height. The old argument was that users wouldn't scroll and anything important should be "above the fold." One of my students wrote a good summary about the fold and scrolling with links to more information.

More information here:

Karl Fast
You might want to check out: http://960.gs/ a complete site regarding designs using 960 pixels in a grid.The technique is called "960 grid designs".
BerggreenDK
Looks like SO uses 960 with nothing being liquid. Just FYI
colithium
A: 

Keep in mind that the higher the resolution, the less likely the internet browser will be maximiced.

And some browsers have lateral bars too.

It depends on what you want to render, but I'd go with a variable width layout that doesn't break at about 800-900 width.

Height is not really a problem.

XenF
+1  A: 

I get questions a lot from designers about not only width but what height to use to 'keep everything above the fold'. Here is one answer I gave recently -

For width, I'm not a designer but I've read that 960px width is the way to go these days, because it lends itself to being divided into columns that look nice, and fits nicely within most displays. If you can, design a liquid layout - but this is not always practical depending on your designer, your CSS skills, the images and the amount of text.

(you always want there to be 65-80 characters per line, with a line-height of about 1.15). This is the optimal column width for text, and it has been proven to be much faster and pleasant to read than very wide or narrow columns)

As far as 'above the fold', I just have to caution against using any such concept on the web. Horizontal scrolling can and should be avoided, but vertical scrolling is something you cannot 100% avoid. All I can tell you is that on a 1024x768 display (at least 95% of users have that or higher) you should be OK with a fixed 600px high block. But there are many different display formats out there, the browser chrome can take up a lot of room, and not everybody maximizes the browser window.

here are some other sites that say more-or-less the same thing - but planning to get absolutely everything 'above the fold' for everyone is tough because then you might only have 400px or so, according to the actual statistics.

And finally a good long article that goes into great detail (I'd post more but SO says I am too noob) - How to design for Browser Sizes - baekdal.com

sbeam
A: 

sbeam said that 'you always want there to be 65-80 characters per line'. That is not true. Wikipedia, for example, may have 180 characters per line. Or was it meant to be a particular website?

+1  A: 

I've personally always stuck to max width of 1000px, centered in the middle of the page (via margin left/right: auto).

If you're running at anything less than 1024x768, it's time to upgrade. Seriously. It's almost 2010. You can buy bargain bin lcd monitors with a native res of 1280x1024.

Sneakyness
To add to this, I just bought a 23 inch widescreen 1080p (1920x1080) lcd screen for $150 this black friday.
Sneakyness
I cant see how the screen of the developer is of any importance to the question? its the visitors of the website that are important as I see it? Ofcause its a good recommondation to get at better monitor or more than one monitor.
BerggreenDK
A: 

Here's an awesome tool: Google Labs Browser Size

Plynx