Screen Resolutions?

[7724]

Hi Guys,

Bit of advice please...

I'm about to re-design my website using tables and was wondering the best way to go about it.

Basically back in the 'good old days' I was told to design for 800 x 600 screen resolutions and googling now it pretty much says the same thing.

However, in 2007 surely now people tend to have bigger screens. I know I have a 1400 x 1050 resolution so designing for a 800 x 600 that looks rubbish!

So just wondering what others are doing? Still designing for that resolution or not?

Comments most welcome.

Thanks

Chris

[TheAnarchist]

Well, just because you have a 1400 x 1050 screen, doesn't mean that 800 x 600 screens are no longer used. Most of the public screens I use (at internet cafes and the like) are 1024 x 768, and I do still see some 800 x 600 screens, but I would assume that 1024 x 768 is the typical screen resolution.

That said, what is wrong with designing for 800 x 600? I personally have nothing against a website that has less content to look at, and more neutral space. It's much easier on the eyes, in my opinion.

I have built sites and I continue to build sites designed for 800 x 600 viewing, while I use a 1200 x 800 screen. Any screen larger than 800 x 600 can only mean more neutral space, and thus making things easier on the eye than a screen crammed full of text.

[Kravvitz]

I suggest you read these:
The importance of window-width
Senior citizens tend to prefer 800x600 to 1024x768.

and these:
Why tables for layout is stupid: problems defined, solutions offered
Why should you avoid using tables for layout?

[AutisticCuckoo]

However, in 2007 surely now people tend to have bigger screens.

Most likely, but that doesn't mean they use larger browser windows. If you're at 1600×1200 it's usually rather pointless to maximise the browser window, because it gets too wide to read text comfortably.

While there is a definite trend towards larger monitors for desktop use and for laptops, there is a parallel trend with handheld devices and web-enabled mobile phones. The latter group has small displays, sometimes only 128 pixels wide.

So it's not as easy as saying that we can now forget about small monitors and create 8-column layouts for every site. In fact, web design is getting harder, because the range of display sizes is increasing.

Using fixed-width layouts is therefore a practice that will (hopefully) die out soon. There is no one-size-fits-all anymore. We'll have to learn to use more adaptive layouts, like constrained liquid/elastic hybrids.

[Gamermk]

A fluid layout that looks fantastic in 800x600 as well as 1400x1050 is what you should be going for.

The bigger screens get the less people maximizing windows.

[RichardN]

Greetings

The percentage of users browsing my website with 800 x 600 is 9.05% last month and decreasing. Would you still spend several hours trying to optimise a layout for this resolution?

Does anyone know if you can detect what resolution a user is browsing with and send them to a different layout? I know you can do it with IE conditionals but what about Firefox?

The reason I ask is because my website completely dies when viewed in 800 x 600 and I want to know whether it's worth the time trying to fix it up for that audience.

Kind regards

RichardN

[Gamermk]

The percentage of users browsing my website with 800 x 600 is 9.05% last month and decreasing. Would you still spend several hours trying to optimise a layout for this resolution?

Just because only 9% are forced to view at 800x600 doesn't change the fact that significantly more people are viewing your website in a window that isn't maximized on a monitor with a high resolution.

[AutisticCuckoo]

Would you still spend several hours trying to optimise a layout for this resolution?

I wouldn't spend any time trying to optimise for any single 'resolution'.*
It's far better to create an adaptive layout that works well in any reasonable viewport size (640×480 and up).

*) 'Resolution' is not really what you're talking about. The resolution on your monitor is probably something like 96 dpi. A resolution is a quotient; a density of pixels. What you are referring to is the pixel dimensions of the monitor.

[C. Ankerstjerne]

The two most important questions are:
1. Who is your target audience?
2. What type of contents do you have?

If your target audience have wide browser windows (i.e. not wide monitors), you might get away with ignoring the 800 pixel width crowd, however if you expect a fair deal of elder users, good viewability at 800 pixels wide (as is scaleable text, but that's a general rule).

If you have contents which isn't suitable for wide designs (especially for text-heavy pages), then stick with line width of no more than 800 pixels wide. Otherwise, the text will be illegible.

I'm currently re-designing a website I purchased, and it is being optimised for both 640 pixels wide for text passages, 800 pixels for full content view and 1024 pixels and above for inclusion of advertisements (see this screenshot to see what I mean). This way, even on small browser sizes, the user can scroll vertically once, and then read the contents without much difficulty.

[Yassies]

The screen resolutions issue is make me crazy...so I make 760px width and 421~468 height site.this is very suitable for any size of resolutions.

[Kravvitz]

You don't need a fixed height. Just let pages be as long as their content.

760px is fine for fixed width layouts.

[AutisticCuckoo]

760px is fine for fixed width layouts.

Oh?

[felgall]

People use any line length at all in their browser these days.

Web readers use a length of 0
PDAs usually have under 400
WebTV is fixed at 544 and can't be changed
People with huge screen resolutions open their browser and three or five other programs and tile them so that the browser only gets say 380 width although they're more likely to set it to 700 or so.

Design your web page to handle all of these because if you don't then those you don't cater for will go to some other site that will.

[Kravvitz]

Oh?

I agree that it's much better to use a constrained fluid and/or elastic layout.

If someone was required to do fixed width, what would be better than 760px?

[AutisticCuckoo]

I was just raising my eyebrows when encountering the word 'fine' in a for me unsuitable context.

The answer to your question is, of course, that it depends on the target audience. If everyone has at least 800x600 and a maximised browser window, then 760px may be adequate. If some users have smaller viewports (e.g., mobile devices) then 760px is too much. If everyone is on 1600x1200 then 760px may be too narrow. That's the problem with fixed widths (as I know you're aware, but others may not be).

[felgall]

760px is too wide for many printers. If you need your page to be printable then you need a version that is arount 720-740px.

[C. Ankerstjerne]

Not really. You can just make a seperate style sheet for printed versions (which is a good idea anyway, since there's no reason to waste the user's ink by forcing them to print out menus then can't use and advertisements they can't click).

[Dark Tranquility]

I was just raising my eyebrows when encountering the word 'fine' in a for me unsuitable context.

The answer to your question is, of course, that it depends on the target audience. If everyone has at least 800x600 and a maximised browser window, then 760px may be adequate. If some users have smaller viewports (e.g., mobile devices) then 760px is too much. If everyone is on 1600x1200 then 760px may be too narrow. That's the problem with fixed widths (as I know you're aware, but others may not be).

I agree, but even for 800x600 760px is quite wide it won't probably cause problems with most of the browsers but it is advised to use something like 740-750 px to target all the users with 800x600 resolution

[AutisticCuckoo]

target all the users with 800x600 resolution

Nope. Only those who use a maximised browser window.
(Although that may be most users at that display size.)

[Dan Schulz]

I'm at 1024x768 with my browser maximized, but I also have my font metrics (dpi settings) set to 96dpi.

You can't control anything with regard to the browser window (viewport). I've said it before, I'll say it again, screen resolution is meaningless and should not be used as a measuring stick.

If you want to know why, read some of the posts, or run an advanced search for the words "screen resolution is meaningless" that were written by me. (I'm too tired - and sick - to do it myself right now.)

You'll be glad you did.

[Dark Tranquility]

Nope. Only those who use a maximised browser window.
(Although that may be most users at that display size.)

yeah at 800x600 I can't imagine someone not using a maximized browser window, but that could happen!

[xhtmlcoder]

Yes, dpi is a font size. Pixels per inch (PPI) or pixel density is a measurement of the resolution of a computer display.

[AutisticCuckoo]

DPI is not a font size. It's a measure of resolution for print (dots per inch).

[Michel Merlin]

(Sorry to have forgotten in my Drafts this reply, written Mon 19 Feb 2007 15:51:07 +0100. Updating and posting it today after someone's question here in France. On Sitepoint, such discussion on window vs screen, unfortunately forgotten now, could be IMO usefully restarted in The Definitive FAQ on Screen Resolution)

Most likely, but that doesn't mean they use larger browser windows. If you're at 1600×1200...

...there is a parallel trend with handheld devices and web-enabled mobile phones. The latter group has small displays, sometimes only 128 pixels wide.
...
Using fixed-width layouts is therefore a practice that will (hopefully) die out soon... We'll have to learn to use more adaptive layouts, like constrained liquid/elastic hybrids.

I strongly agree with that (and I regret most webmasters have been going the opposite direction in the last years). I never understood (or admitted) that webmasters want to know which screen resolution users are on. The user lends them only a window (or even only a tab), not their entire screen, so the webmaster being concerned about their screen width is borderline with uselessly intruding their property.

Since most webmasters are disabling web caches (through "NO CACHE" or EXPIRE or ONLOAD or JavaScripts causing "updates" or any other technical ways), the "Back" button has become unusable (it causes each time the page to be re-downloaded, with the according unbearable delay, typically ~1000ms, instead of the instant response we used to get in the early times of the web). So the average (hence careful and silent) real-world user, being used to verify and re-check many things before speaking or posting, is forced to keep a large number of his visited pages open, quickly reaching 60 to 100 open web pages (each in its window or tab). Of course this implies to use each of these windows or tabs at normal size, NOT at full screen.

As an example here's a record (Sat 16 Aug 2008) of my little 1280×800 screen with 120 items on my Taskbar (zoom):



As one can see, each IE6 window is here in "normal" size, which I set to about 737px wide and 700px high (internal dimensions. Note that IE6 customizable interface lets me shrink controls and accordingly expand the internal, useful, viewable area to this 737×700), which lets me efficiently view contents, and at the same time quickly enough switch or drag between windows. Now one could like narrower than 737px (say ~640px), but in real world pages (that too often have wide fixed layouts) the proportion that require full screen would increase too much. Also note that Windows XP Pro Taskbar can host 120 items efficiently if docked to the side of the screen, NOT if left in its original bottom position, where it would arrange the buttons in a couple rows that are improperly managed. OT: Finally for Sitepoint Aussies, notice my viewing Mirusia Louwerse (here singing Porgi Amor)

Versailles, Sun 19 Sep 2010 19:47:15 +0200