Resolution dependent style switching
In case you’ve ever longed for the ability to send different CSS rules to browsers depending on the visitor’s current window size, Dynamic Resolution Dependent Layouts is for you.
In the article, Kevin Hale at Particletree describes how to implement a method that uses JavaScript to dynamically load a CSS file that changes the layout to suit the current window size. If liquid or elastic layouts are not your thing, take a look at this for a more flexible way of keeping your fixed width layout.
- Previous post: att.com celebrates a year with web standards
- Next post: Is instant messaging good or bad for productivity?
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Nice article Robert. This looks like an interesting technique. Personally, I can't wait for widespread support of media queries, but this is a good holdover technique.
Thanks for posting this, Roger. The layout I am working on now is fluid but I've had to make some unfortunate compromises to get it to fit at 800 x 600 - this way I'll be able to make it look great on resolutions large and small :)
Is it wrong that I immediately cringe when I think about using JavaScript to alter page layout like this? It just gives me the willies.
nickster: If it is done in an unobtrusive way, provides a fallback for when JavaScript is disabled, and you give the visitor an option to force one of the layouts (and thus turn the automatic switching off) I don't see a problem with this technique.
I'm sorry but that was the most annoying thing i've seen in a long time. A page that changes its layout when I maximize my browser? Seriously?! I guess the best use would be to resize the text based on browser width, although that would be quite annoying as well if you're not expecting it.
I guess I should be saying this to the author instead of the linker ... sorry 'bout that Roger ;)
I can see potential uses for it, since mediaqueries isn't widely supported yet.
I'm not sure, but I think it should work more like mediaqueries does in Opera - on load and without changes if window is resized. Having the options available for manual switching helps though.
I'm still not sure what I think about it. On one hand its great for people with lets say 800x600 screen resolutions because with the example above they'll never realize some content was moved, or completely removed in the first place. Then there are those who might enlarge the browser window and wonder why half the page disappeared. Isn't that some sort of usability issue?
I agree entirely with Brian on this. This is the first thing that came to my mind. While it is a neat trick of coding, will this not completely confuse the average user? One second they are looking at a page with certain content on it. The next second, or the next time they come to the page, part of the page has disappeared.
I've been working on a project at work where screen resolution size is a problem. I've noticed in our stats that 1024x768 is the most popular (nothing surprising to anyone here) followed by 800x600. Coming up quickly behind it is all the new widescreen resolutions, which for a fluid layout begins to break design elements.
I've resorted to going to a max-width with the IE hack to solve it for now. Not the best solution though. While this may be an alternative, our stats also show that there are a decent percentage of our visitors that have JavaScript disabled.
I think this begs the question of how are other coders/designers dealing with the rapid increase in larger screen resolutions with fluid design?
I think this technique would be best to use during page load to determine which layout to use. I agree that the live stylesheet switching can be a bit too much. But in some cases, for some sites, it could be the best choice.
Hmm. I wonder how well this would work when you combine it with an elastic layout...
I imagine that we're not discussing wholesale reworkings here, but perhaps linearizing three columns down to two when a narrow window is detected.
I still favour wholesale liquid layouts, but that's the coder more than the designer speaking; Microsoft's approach of serving up two different homepages for 800 and 1024+ seems to work all right.
I've been doing this on my site for a while now, for everyone using a browser at less than or equal to 640 pixels wide, the layout changes to one designed for smaller screens, and lets face it, if they are browsing at this res or lower, chances are they are using a handheld device that doesn't identify itself as such.
And the issue of resizing? Well, most people will keep the window above 640x480 anyway.
All I do with my layout is align all the sections down the screen instead of accross.
And lets face it, I'm sure the user would rather be able to read the content, at whatever res they choose, rather than have everything squashed up, like most websites (liquid or not).
Very interesting - it may help in making static width layouts more accessible.
Sorry, comments are closed for this post.