Hi everyone! I have another good question... Is there a way to detect the users screen resolution and load a different stylesheet according to each? The reason is that I'm working on a website, and if I make it work on an 800x600 screen, it looks awful on bigger screen resolutions, and vice versa. The main problem being the width of my columns (content and sidebar). If I make them small enough for the smaller res, then there is too much whitespace on the bigger res. If I make them pretty on the bigger res, my sidebar gets pushed below the content div. Any ideas are welcome!

Then just load different css based on that selection.

Variation among screen resolutions has been a web design problem for a long time. There are various well-established solutions:

• Design for a smallest supported screen size (800*600 or 1024*768) using a fixed pixel width
• Use a liquid layout
• Use a flexible or elastic layout
• Detect the screen resolution or viewport size with javascript

The simplest solution is to choose a minimum supported resolution and stick to it. This is makes design somewhat easier, because you know the size of your "canvas". Nowadays designers are moving towards 1024*768 as a minimum supported resolution.

Instead, you can use a liquid layout where the widths are specified in percentages (%) rather than pixels (px). Liquid layouts will stretch to any screen width. They have two serious disadvantages, however: you lose control of design proportions, and on large windows the text lines become very long (and hence hard to read).

My preferred solution is to use an elastic and flexible layout: elastic because the entire layout scales with the font size, and flexible because it compresses when the window is too narrow. See my badminton website, for example. First, try changing the text size; notice how the layout maintains proportions. Next, try reducing your browser window below 1024px, and notice how the main content area compresses to accommodate this.

The disadvantage of elastic layouts is that they are harder to code; you need a stronger understanding of CSS. They tend to require a little more markup too (which is hardly an issue).

I don't recommend using javascript to detect screen resolution. If you were going to do that, you would need to detect the viewport dimensions instead: don't forget that the user may not be using the entire screen space for his browser window! This is especially common on large screens.

And what happens if he changes the window size? Are you going to swap around the stylesheets? This is getting messy. How often are you going to evaluate the viewport dimensions?

In general, you should avoid using javascript to fix layout issues, because it slows down your website (see Yahoo's performance rule 25). Javascript layout solutions are extremely hacky. I use javascript to fix Internet Explorer's lack of support for {display: table}, but otherwise I would avoid fixing site layout with JS. I do use javascript to fix small-scale layout issues, such as generating extra markup for multiple background images on a "pull-out" box; but this is nowhere near as hacky as using it to fix your entire layout. With javascript, a light touch is generally best. Avoid using javascript to do stuff that CSS does more efficiently; CSS is good for layout, and javascript is not. And don't forget that your pages should degrade gracefully when javascript is unavailable.

If you do decide to use a javascript method, ensure that it does not continuously evaluate (or your website will slow to a crawl).

By using multiple stylesheets for different resolutions, you also greatly complicate your design and release process. It's much simpler just to choose a width (I use ems, but you could use px) and centre this on the page. Providing the whitespace is balanced on the page, it's no problem.

Thanks guys! I suppose it may be easier if I just play around with my CSS and try to get it right. I would post the link for you to see, but I haven't done everything that needs to be done security-wise yet (Site done in Wordpress, which I now LOVE btw!!!) Thanks so much for your help!