The post also demonstrates a way to use a bit of jQuery magic to record users’ browser window sizes and dump it into a database, since Google Analytics does not yet provide this metric.

Practically, it’s still best to use the old “keep it under a thousand pixels” rule. It matches up well with the most common browser window ranges, and many of us have lower screen resolutions anyway. I primarily use a 13″ laptop with a 1200-pixel wide LCD. That means I keep Firefox resized to be around one thousand pixels wide, leaving some breathing room while still being able to view most web sites without annoying horizontal scroll bars.

Screen Resolution ≠ Browser Window [CSS-Tricks]

Already, if you view an iPhone screenshot on a computer monitor, it will look strangely oversized due to the difference in resolution. The new “retina display” will make the effect further pronounced.

My question is: with phone displays increasing in resolution, can we assume that desktop and laptop monitors will follow? Will it become more common to see full-size screens with upwards of 300ppi? It might cause some problems for designers at first, but it will make for more richly detailed web designs eventually.

Back when newspapers ruled the earth (yes, I’m unconsciously trying to make print media sound prehistoric), The Fold was a physical crease in the paper. Nowadays it’s a bit more complicated. You have different screen sizes and resolutions, toolbars that take-up room in the browser, and some people resize their browser window differently… There are a lot of factors.

FoldSpy is an interesting little bit of JavaScript magic that let’s you see where the fold is on people’s computers. Once you place the script on your site, you activate it by visiting http://yourdomain.com/#foldspy. An interactive overlay appears, allowing you too see what parts of your site are visible above the fold by different people. As you adjust the overlay, you’re shown a percentage based calculated by the viewport size data collected from all of the sites that use FoldSpy.

Both sides of the argument have their pluses and minuses, and generally I would say “go with what best suits the instance.” If you want a certain look, which will require vertical tile images, and other images of specific width, you may need to go with a fixed-width layout. If you want as much control as you can get over the look of your design, or if you need your content area to be a specific size, go with a fixed layout.

Liquid layouts can adapt to the available space in the browser’s viewport, which makes a site more accessible, avoiding the annoying horizontal scrollbar that fixed-width layouts often generate at low resolutions. If you can put together a good-looking liquid layout that works well in your given scenario, go for it. However, you must rely on the CSS attributes min-width and max-width to make sure that your design can’t shrink too much, squishing your beautiful design into an illegible mess, or two wide, making for long, hard-to-read lines of text on large widescreen monitors. Too bad the attributes don’t work on Internet Explorer 6 (big surprise)!

You could also go for a hybrid layout where parts of the design are fixed, and others liquid. You could have a fixed-width sidebar with a liquid content column, for example. I’ve found that this method works better than having everything based off percentages of ems.

Unfortunately, we’re plagued by small groups of people with low-resolution monitors, very big widescreen monitors, tiny mobile web phones, and outdated browsers like Internet Explorer. We’re ill-equipped to handle all the possible scenarios, and far too many people don’t update their browsers in a timely manner, resulting in a lack of improvement in that area. All we can really do is support as many browsers and resolutions as possible, and wait for people’s computers to stop working, so they will get a modern machine, resulting in a tiny step forward progress-wise. Eventually Internet Explorer 6 will die-out, giving us better support for liquid layouts, which are becoming more and more important as screen resolutions diversify, having increasingly different aspect ratios as well as pixel dimensions.

Further Reading…

I managed to dig-up a post I found via Smashing Magazine back in August 2007. – CSS Layouts: The Fixed. The Fluid. The Elastic.