The Definitive FAQ on Screen Resolution

[jdeeze]

As a noob this is really helpful. It brings some sense to the madness i was doing before.

[lydia2090]

Great post! You have answered many many questions I have been wondering about. Genius!

[naveedjavaid]

Thanks for this great knowledge sharing with all of us.

[Oliver Cross]

I try to use liquid layouts as much as possible. the min-width feature in CSS is definitely worth learning and is a great tool in your armoury.

[Aquil]

Nice one, thanx for shairing with us

[AudiS2]

What's the general consensus now when more and more users are turning to 16:9 (so called wide) resolution?

[zcorpan]

What's the general consensus now when more and more users are turning to 16:9 (so called wide) resolution?

General consensus about what?

[webfinity]

It's good to design withing the 800x600 box, and to put the less pertinent information outside of that box. Great post...

[Zaleya]

Very well written.

[ScottyDM]

Here are some statistics from a few low-volume websites I manage. Out of 1801 samples (about November and December):

• 800 x 600 -- 6%
• 1024 x 768 -- 39%
• 1152 x 864 -- 6%
• 1280 x 1024 -- 36%
• 1600 x 1200 -- 1%
• other/unknown -- 9%
• JS turned off -- 3%

I'm using Statcounter and they seem to have only the bins shown. They don't report any of the new widescreen monitor sizes, which means they don't report any of the Macintosh screen sizes either. I think they've also stopped counting smaller sizes such as 640 x 480 (which explains why I've not seen that at all in the last couple of years).

Scotty

[AutisticCuckoo]

Are those browser window sizes or monitor sizes?

[JochenVandeVelde]

Great informative post, it's been really interesting to me. I myself don't design for 800x600 resolutions anymore, but try to keep the layout as narrow as possible to make it atleast display properly with a 1024x768 resolution, sometimes even a lower resolution.

[dwh]

This is a great thread. But it needs an update regarding IE7. Does IE7 respect max width? And how about Sven's expression hack? How does IE7 handle that? Any bugs to worry about?

[zcorpan]

IE7 existed when the FAQ was written, and it even calls it out explicitly. Yes, IE7 respects max-with, assuming you're not in quirks mode. You don't need the expression hack for IE7. There are certainly bugs but I wouldn't worry about them until they bite me.

[dwh]

Thanks Simon.

IE7 existed when the FAQ was written, and it even calls it out explicitly.

Oops, missed that.

You don't need the expression hack for IE7.

OK, I'll infer from this that the expression hack does not break IE7 either?

[Dan Schulz]

What he's saying is that the expression shouldn't need to be served to IE 7. Just enclose it in a conditional comment that targets IE 5/6 or use the * html hack to hide it from IE 7 and other modern browsers (though if you care about validation, you may want to put the hack and the expression inside a separate stylesheet and @import that into the main one).

[dwh]

What he's saying is that the expression shouldn't need to be served to IE 7. Just enclose it in a conditional comment that targets IE 5/6 or use the * html hack to hide it from IE 7 and other modern browsers (though if you care about validation, you may want to put the hack and the expression inside a separate stylesheet and @import that into the main one).

Thank you Dan.

Wow...so complicated.

I thought the * hack caused ie7 to render same way as ie6...or was that the holly hack?

You know, I found learning Unix easier than learning css...

[Dan Schulz]

No, that would be Quirks Mode. The * html hack only affects IE 5 and 6. 99.9975% of the time if you're building your site properly you won't need any hacks or "conditional comments" for IE 7.

[zcorpan]

OK, I'll infer from this that the expression hack does not break IE7 either?

If nothing else you get worse performance (since native implementation is usually several orders of magnitude faster than JS implementation).

[ScottyDM]

You know, I found learning Unix easier than learning css...

CSS drives me crazy! It isn't design, it's hacking. Screwing around with the statements and checking them against a bunch of browsers. Rinse and repeat... and repeat...


Screen Resolution

I've mostly done fixed width page designs and I currently design for a minimum screen size of 800. I usually put a div directly inside the body and then center the div. With a wide screen/browser window it looks pretty good and not squished to the left. I also use the Verdana font at a fairly large font size, either 15 or more rarely 14 pixels.

This leaves a very nice line length in terms of the number of words on the line, which compares favorably with line length in other media such as novels (which are optimized for readability). One thing I don't care for on some websites is the unrestrained line length, which is hard to read. It forces me to resize my browser window. Too short a line also forces me to do more scrolling.


This article has got me thinking.

There are two problems with my approach: people with tiny screens, and people who are even less ably sighted than some of my friends.

I've seen and admire that trick where the site designer puts a control on the site to allow the visitor to select their font size. I imagine that control could be used to select a first CSS file that sets basic dimensions, then follow that with a generic second CSS file that sets everything else and uses relative measures (like the em).

So how do I combine a flexible layout with a flexible font size?

I think for each base font size (each first CSS file) I could set the max-width of that outermost div and size-sensitive sub-elements. For example, when the user selects a 14 or 15 pixel font size (default) I would set max-width to what I use now, with line-length optimized for text readability. As the user selects different base font sizes I would resize max-width to keep line-length optimized. And I could set a min-width for each size too.

The original article of this thread mentioned that handhelds typically don't have Java Script and to use the CSS media query. Good idea, except how to test if I don't have a handheld? Anyway, using the media query I could default to a smaller font size.

I knew this girl (since passed away) who was legally blind (her sight was bad enough to keep her from getting a driver's license, etc.) She was an artist, inventor, and author, so she needed her computer. She had two monitors: a 17-inch set to 640 x 480 where she kept her floating menus and other controls, and a 21-inch set to 800 x 600 that was her main screen she used for doing her work. She told me that sometimes to see detail, she put her nose against the glass.

So yea, screen widths like 640 and 800 exist, even today when large monitors are cheap.

To answer the question: my earlier reported numbers are for monitor sizes. Personally, my monitor is 1280 wide, but I typically run my browser window at 900 to 1000. If I run into a website designed for wider, I only bother to resize if there is something I need over on the right. Often it's advertising or gizmos that aren't required. Now if the ads are Flash and get annoying, I resize my window smaller. (thinking of Atom Films)

Scotty

[dwh]

No, that would be Quirks Mode. The * html hack only affects IE 5 and 6. 99.9975% of the time if you're building your site properly you won't need any hacks or "conditional comments" for IE 7.

I think I know how to make this work, just want to check with you if I'm right:

 width:expression(document.body.clientWidth > 1100? "1100px": "auto" );

just needs the words * html ahead of it...like so

* html width:expression(document.body.clientWidth > 1100? "1100px": "auto" );

It's not more complicated than that...right?

[Dan Schulz]

More like this, actually.

/* I should probably @import this, just so the primary stylesheet can still validate */
* html #container {
	width: 750px; /* if scripting is off, disabled or blocked by a firewall, fix the width to 800 friendly */
	width: expression(
		(document.body.clientWidth>992) ? "974px" 
			: ((document.body.clientWidth>766) ? "auto" : "730px")
	);
	height: 1%; /* haslayout */
}

[dwh]

Thank you so much!

The current stylesheet is actually @imported already, so I don't need to separate out that rule & import it again, do I?

Edit:
Since I didn't totally understand everything in your code, I tried to do another search for * html hack and this time found the right page:
http://css-discuss.incutio.com/?page=StarHtmlHack
but was surprised to find at the bottom that ieblog considers this hack deprecated:
http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx
and was wondering your thoughts on that? IE team wants us to use conditionals...

[Dan Schulz]

If it's just one or two styles that you need to change, you won't need the conditional comments for IE 5/6. If you have a whole lot of styles that need to be changed for IE 5/6, chances are you're doing something wrong.

But basically here's what the expression I gave you does.

1.) Set a default width (for if scripting is off or gets blocked).
2.) Declare the expression which will replace that width (if scripting is enabled and actually works).
3.) If the width of the browser window is greater than 992px then set the DIV with the ID of container to a width of 974px.
4.) If it's not greater than 992px then check to see if it's greater than 766px. If it is, let the #container DIV expand to fill up the screen.
5.) Should it be less than 766px then set the width to 730px.

[dwh]

Cool. That's the only style needed for ie to apply a max width. You're a lifesaver!