Detecting Screen Resolution to load alternative CSS a good idea?

Question

Im working with a graphic designer who constantly wants to make websites larger than the 960 pixels i recommend. I can do a certain amount with liquid layouts but id really love to be able to load different CSS for larger resolutions. I googled it and found the link below, but im worried that I havnt heard more about this. Is this is a reliable method? Im concerned as I would have thought that more people would want to do this.

http://www.ilovecolors.com.ar/detect-screen-size-css-style/ Thanks

Tidewater

Do you mean screen resolution? – Feathery

I like the design of this site.. css-tricks.com – Fourteenth

Answer 1

To simply answer your question: No. Even if it was, it seems inefficient to build multiple CSS files, etc. There are better methods than relying on resolution.

A longer-winded answer: When 960 becomes "oh, that's so 2010..." how many of your sites will look dated? At the same time, not everyone that browses the internet has a 30" Cinema display either, or a dual monitor setup. I try to design to best accommodate MY traffic.

Although it may be nice to detect browser window widths, and/or screen widths (monitor resolution), I think the majority opinion is this: Know your intended audience and design/build for it.

Building a 960 grid and a CSS, then building a 1024 grid and a CSS = Inefficiency, and not very "future proof".

If you're watching your site traffic and see that 90% of your visitors are using 1 or 2 (or 3) resolutions, build a fluid layout that works well for that audience.

Fluid layouts are probably the best universal solution to the ever-expanding array of devices, resolutions, viewport sizes, screen definitions (low, medium, high) on the market now -- let alone 18 months from now.

1. Checkout @media queries to add to a fluid layout/design. Modify one CSS file (not 3). http://www.w3.org/TR/css3-mediaqueries/

   @media screen and (max-width:960px) { h1, h2 { color:#990000; font-size:1.4em; } }

   @media screen and (max-width:1280px) { h1, h2 { color:#336699; font-size:1.8em; } }

2. Add min- and max- widths to your CSS (or a similar logic) can also help satisfy a wider range of resolutions/browser sizes, as well as give your design a longer shelf life. And doesn't rely on a document.window.width() function.

Get the most bang for your buck. Fluid designs, @media queries, javascript to help bridge some gaps. You'll end up with less code, a more "future proof" design, and a larger percentage of satisfied visitors.

Crowns

For me creating some additional styles is not a big problem regarding upkeep and future proofing, etc. It will be up to my client if they want to pay the extra, and I think that they will. Also while these sites are new I have no user data to work from regarding screen resolutions. Many of the sites will stay low traffic so I may never have sufficient data. – Tidewater

What I was thinking of doing is creating the standard 960 design, and then modifying it for larger displays, and selecting the new css with media queries. As the link you gave me is W3C can I assume this is widely supported and standards compliant, etc? Thanks – Tidewater

One more thing, are their any high profile sites doing this? Im sure a large image conscious brand would have the resources to use this technology. Again, this seems too good to be true and as I haven't heard many case studies im a little nervous it. Thanks – Tidewater

Additional styles (mods to key classes, ids), yes - not a big deal. It would be a necessary component to a flexible site that works well in a collection of browser/screen sizes. @media queries are CSS3, so not every browser is going to recognize them; however, a jQuery plugin has been built to bridge the gap. You also mentioned the 960 standard...I'm currently working within a 978 system that works (I think) just a little bit better. Checkout this link: 978.gs. Look at the demo, then check the source code. This particular site is using both @media, as well as the jQ method. – Crowns

Your last comment was interesting...so I snooped around. www.apple.com (inside their home page <head>); www.adobe.com - (inside "homepage-martha.css") --> They're pretty high profile :-). Here's an interesting article on the subject: 24ways.org/2010/life-beyond-media-queries – Crowns

OK. So what I think im going to do is design for 960, and then load additional styles with media queries so the design looks a bit better on larger browsers. The 960 should always work as a backup, and if the larger styles dont always load then thats fine. Thanks Dawson. – Tidewater

Glad to help. Sounds like you got a plan. – Crowns