Introduction

In my previous feature on CSS layouts, I talked a bit about the different CSS layout approaches available to a designer when building a web site. In this feature, I’d like to focus on a dynamic resolution dependent layout implementation that I think provides a strong alternative for those trying to find a balance between fluid and fixed layouts. With dynamic layouts, the possibilities really are quite endless. You can change 3-column layouts to 2-column layouts, provide appropriate font-sizes to increase legibility, and even reward higher resolution viewers with extra content and larger images. And no, you don’t have to put php in the CSS or lose the caching benefits of using external stylesheets to make it work.

HTML Form Builder

Before I really got into JavaScript, I was always frustrated by how I could never really get a fluid layout to look right across all the different resolutions users were using to see my sites. Columns never really scaled exactly the way I wanted them to and tiny font-sizes on higher resolutions, which were okay on lower resolutions, killed content legibility. When I tried to drop 800x600 layouts, I ended up inconveniencing users that didn’t maximize their browser windows. Until I saw The Man in Blue’s article on Resolution Dependent Layouts, I felt fixed layouts failed to take advantage of the dynamic medium of the web and fluid layouts failed to truly adapt to the variety of viewing methods. While The Man in Blue’s implementation is a great piece of work, I think we can create our own version that’s a bit more modular and easier to develop for both programmers and designers.

See It In Action

I’ve built a quick demo page showcasing how a dynamic resolution dependent layout can offer adaptive alternatives with a very basic XHTML wireframe.

Dynamic Resolution Dependent Layout Demo

Just resize your browser to see the layout change accordingly. What’s nice about this method is that I don’t have to load a completely new CSS file from scratch for each layout. I only need to load the rules needed to adapt the default layout to the browser width size. It’s not so much a stylesheet switcher as it is a stylesheet adapter.

Implementation

To follow along, download dynamiclayouts.zip, which contains the files used in the demo above.

The first thing we want to do is to place inside the head element all the stylesheets we’re going to be calling on to determine each dynamic layout. Here’s an example set from the demo:

<link rel="stylesheet" type="text/css" href="css/default.css" title="default"/>
<link rel="alternate stylesheet" type="text/css" href="css/thin.css" title="thin"/>
<link rel="alternate stylesheet" type="text/css" href="css/wide.css" title="wide"/>
<link rel="alternate stylesheet" type="text/css" href="css/wider.css" title="wider"/>

Notice that we’ve added title attributes to all of the link elements and designated the dynamic CSS stylesheets as “alternate stylesheets” in the rel attribute. Be sure to indicate your primary CSS stylesheet by setting its title attribute to “default.” The “default” stylesheet is used as the foundation for all of the dynamic layouts and if JavaScript is disabled, this will be the stylesheet that the site will use to display the page. If you use multiple stylesheets to build the default view of your site, you’ll want to title all of them as “default” so the script doesn’t discard them when the layout is dynamically altered. If you want to adapt this method to create a true CSS switcher, just remove the “default” title attribute and the script will disable the foundation stylesheet completely and use only the rules in the alternative stylesheet.

Next, we want to include the dynamiclayout JavaScript file:

<script src="scripts/dynamiclayout.js" type="text/javascript"></script>

Inside the JavaScript take a look at the dynamicLayout function.

function dynamicLayout(){
    var browserWidth = getBrowserWidth();    //Load Thin CSS Rules
    if (browserWidth < 750){
        changeLayout("thin");
    }
    //Load Wide CSS Rules
    if ((browserWidth >= 750) && (browserWidth <= 950)){
        changeLayout("wide");
    }
    //Load Wider CSS Rules
    if (browserWidth > 950){
        changeLayout("wider");
    }
}

The heart of our process is in the browser width detection on the first line and we’re going to use The Man In Blue’s getBrowserWidth() function to help us find it. Check out the code here:

function getBrowserWidth(){
    if (window.innerWidth){
        return window.innerWidth;}  
    else if (document.documentElement && document.documentElement.clientWidth != 0){
        return document.documentElement.clientWidth;    }
    else if (document.body){return document.body.clientWidth;}      
        return 0;
}

For the demo, I’ve set it up so the site adapts to 3 different resolution scenarios based on browser width: smaller than 750px, larger than 750px (but smaller than 950px) and larger than 950px. The changeLayout functions that are used in dynamicLayout correspond to the title attributes in our alternative stylesheets. As you can see, it’ll be pretty easy to tweak the if statements to your own needs.

Now, inside of your “alternative stylesheets”, you’ll want to specify the rule changes needed to change your default layout to adapt to that particular resolution scenario. The CSS rules in the alternative stylesheets are applied after the default CSS file is loaded so they’ll override any rules that don’t have !important selectors applied to them. While you could redo every CSS rule in the default stylesheet, often layouts don’t need many changes to make them work in different situations. In the demo, for example, while the “default” stylesheet uses over 10 rules to create the foundation design (some sites use over 100 rules), the “thin” CSS stylesheet need only to change a few rules and selectors to make the site work on small browser widths:

/* ----- Thin CSS Rules ----- */body{
font-size:.8em;
}
#container{
width:80%;
}
#primaryContent{
width:100%;
line-height: 125px;
}
#secondaryContent{
width:100%;
line-height: 125px;
}

This is one of the key strengths to using this method for creating dynamic layouts. We can easily switch from fixed to fluid layouts based on what’s going to be best for the user and each layout is conveniently contained in it’s own external file, so we only need to specify the changes needed to adapt a design for a particular situation. This makes it easier to understand, faster to design (because it reduces CSS redundancy) and better to develop with because it keeps the presentation layer neatly separated from the behavior layer.

To finish up, we’re just use John Resig’s winning addEvent function to run our functions when the page is loaded and when the users resize their browser windows.

//addEvent() by John Resig
function addEvent( obj, type, fn ){ 
   if (obj.addEventListener){ 
      obj.addEventListener( type, fn, false );
   }
   else if (obj.attachEvent){ 
      obj["e"+type+fn] = fn; 
      obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); } 
      obj.attachEvent( "on"+type, obj[type+fn] ); 
   } 
} //Run dynamicLayout function when page loads and when it resizes.
addEvent(window, 'load', dynamicLayout);
addEvent(window, 'resize', dynamicLayout);

If you feel changing the layout on resize is a bit too jarring, just remove the second addEvent call to dynamicLayout on resize to limit layout adaptation to occurring only when the web page is first loaded or refreshed by the user. One nice thing about using these functions is that you can easily adapt the code with a little cookie magic to create a better stylesheet switcher to provide your users the choice of what layout option they prefer.

Final Thoughts

Before I leave you be, I’d like to take some time to talk about how I think this implementation should have been created. Ideally we should be manipulating the @import CSS rules to choose the appropriate stylesheet to tack on the end of the default CSS file. Unfortunately, W3C’s specifications for dealing with CSS rules in JavaScript are so badly implemented across the browsers that we have to use a hacked CSS stylesheet switcher function based on disabling link elements from 2001 to make dynamic layouts work sanely. C’mon people, help me with the magic making. I honestly believe that proper CSS rule implementation by the browser vendors could create the low barrier of entry needed to get a majority of designers to the next level of web development: DOM manipulation. It would be so much easier to learn how to manipulate the presentation layer, if we could use the same vocabulary for making changes in CSS in JavaScript. For example, how nice would it be to be able to use following:

var defaultSheet = document.styleSheets[0];
defaultSheet.insertRule("#container{width:500px;}");

or

totalRules = defaultSheet.cssRules.length;
lastRule = defaultSheet.cssRules[totalRules - 1];
defaultSheet.addImport("/css/wide.css", lastRule);

Yeah, well too bad for us. Most of the syntax for manipulating CSS rules is forked between IE and Gecko browsers and Safari refuses to change the page rendering even though it recognizes the methods. It’s sad to see how this prevents a lot of exciting possibilities and I hope the recent JavaScript renaissance will help people recognize these limitations so they can ask for them to be fixed. If you want to read more about the problems with CSS rule implementation in JavaScript, check out Peter-Paul Koch’s article on the subject. Anyway, I’m off my soap box now. Have fun with dynamic resolution dependent layouts and be sure to keep in touch with your favorite browser vendor about CSS rules!

HTML Form Builder
Kevin Hale

Dynamic Resolution Dependent Layouts by Kevin Hale

This entry was posted 5 years ago and was filed under Features.
Comments are currently closed.

· 179 Comments! ·

  1. PJ Hyett · 5 years ago

    I’m digging it, nice work.

  2. Tim · 5 years ago

    Have seen a lot of these “dynamic” layouts recently, and I have to say; I really like the concept. Your’s is particularly nice. :)

    My good friend Stuart has just implemented a similar idea without using javascript over on his site, Muffin Research Labs. I know the method is different and a lot of people won’t think it’s as nice, but it is a solution to the same problem.

    Just thought I’d post it here because it’s nice to see different solutions to similar problems…

  3. Robert Nyman · 5 years ago

    At a first hurried glacne, it looks nice and seems to work well.

    However, and not meaning to steal your thunder here, but should JavaScript be a prerequisite to achieve a certain layout?

    Also, to create a fairly flexible layout where the columns can fall down, floats and em-based column widths can get you pretty far.

    However, of course it can encompass for everything in your example. I guess it’s a matter of balance. :-)

  4. Robert Nyman · 5 years ago

    Sorry, it was meant to read: “However, of course it can’t encompass for everything in your example.”

  5. Kevin Hale · 5 years ago

    I agree Robert that JavaScript shouldn’t be a prerequisite to see a page’s design, which is why there’s a default css file to depend on.

    The “default” stylesheet is used as the foundation for all of the dynamic layouts and if JavaScript is disabled, this will be the stylesheet that the site will use to display the page.

    Custom CSS stylesheets (like increasing font-size) are rather popular on a lot of sites now and they require both cookie acceptance and JavaScript to work. I think this is one of those situations where JavaScript helps add a lot of value to a web site with subltety.

  6. Rico Sta Cruz · 5 years ago

    Wonderful! I just have a little addendum: instead of having 3 different CSS sheets, why not instead do something like…

    function changeLayout(newLayout) {
      document.body.className = newLayout;
    }
    

    and on CSS:

    body.wider #container { width: xxx; }
    body.thin #container { width: yyy; }
    body.wide #container { width: zzz; }
    

    The differences between each layout is minimal anyway (mostly widths and floats) that it probably makes more sense to collapse it to one CSS file. Besides, IE seems to have a problem with disabling stylesheets, and the disabled attribute to the LINK tag is not a standard. :)

  7. Matthijs · 5 years ago

    I agree with Kevin. This is a nice example in which a small amount of js can do a lot. Off course, it’s still not THE solution, but that’s what you point out in your article. One thing though: as it is now, the alternative stylesheets can be selected in the browser preferences. However, the result is not too pleasant. Would it be possible to script around that? So that someone without js can still select the stylesheet he or she wants?

  8. Randal L. Schwartz · 5 years ago

    Your browser width is pixel based, but you really need an “em” based value there. If I widen my browser, but then increase my font size, I don’t get the narrower layout, even though that would be appropriate.

    Think of a high-resolution projector for a wall of TVs. You’ll be using an em size of 300pt (so people can see it at 6 feet), but your layout engine completely confuses that.

    Almost any solution that talks about pixels is wrong. Almost.

  9. Kevin Hale · 5 years ago

    Rico, that’s a definitely a way to go, however, it might not be an ideal solution on more advanced designs where there might be a lot more rules that need to be changed for each layout.

    Matthjis, you’ll either need to use cookies or sessions to make the changes stick for a user. If you want to do it without JS, you’ll have to use a server side script that actually loads a different default CSS file in the head. If you google it, you’ll find a lot of implementations showing how to do it with php and such.

    Randal, while it would be easily set it up that way, I don’t think it really makes sense to give a thin layout if you increase the font size in the browser. I want thin to mean thin. I think the better solution would be to provide people with the ability to force the layout to another version if they want, which I provide in the demo. That being said, I do think tying widths to ems is a great way of providing appropriately scaled layouts. In the end, it really comes down to what’s going to work best for the content at hand.

  10. Robert Nyman · 5 years ago

    @Kevin,

    I think this is one of those situations where JavaScript helps add a lot of value to a web site with subltety

    Oh, it absolutely makes it better! I’ve launched a web site that creates a certain type of columns through JavaScript (that I won’t give out here :-)), but my personal guess is that most customers wouldn’t want the layout to look different to different visitors just because of JavaScript.

    However, if that’s not a problem, go for it! :-)

  11. Phillip Fayers · 5 years ago

    I’m with Randal on the layout issue. Somehow the layout should vary based on the relationship between font size and browser resolution.

  12. Teevio · 5 years ago

    “Safari refuses to change the page rendering even though it recognizes the methods”

    Can you explain what you mean by this statement?

  13. Roger Johansson · 5 years ago

    Your demo seems to work in Safari here. The only problem I can see is that the vertical scrollbar disappears and doesn’t come back when I return to this article page. A reload brings it back though…

  14. grumpY! · 5 years ago

    i guess i am a design luddite, but i favor simply picking a decent model (100% width, or a fixed width based on conservative estimates) over this layout micromanagement.

    just as an aside - the sites i find the most useful often have terrible or nonexistant design techniques. craigslist, slashdot, etc. design seems to play only a small role in the success of a site.

  15. Teevio · 5 years ago

    I’m not seeing any problems in Safari except for what Roger pointed out that when you hit the back button the scroll bar does not show.

  16. Kevin Hale · 5 years ago

    I’m sorry, I guess I wasn’t very clear. This method is NOT using CSS rules for manipulating the layout and so yes, it should be working in safari just fine. Safari fails to react to changes of the CSS rule DOM property for manipulating stylesheet information and so what I was complaining about is how there could have been a better way of making these layout manipulations.

  17. Steve Williams · 5 years ago

    Neat. I have a more brutal script on my site [inspired by Mike Davidson’s article] that redirects visitors of small screened devices supporting javascript to a subdomain stripped of images and css styling - and therein lies the problem. Most of the devices I’ve been able to test (mostly mobile phones) are not js equipped and are left to struggle with the full-on version. Unless you specifically navigate to the ‘mobile.’ subdomain of course :-)

    I like your solution because the basic css file could essentially be the zoom layout, and others the preferred design layout(s) - thanks, much food for thought.

  18. Nick Cowie · 5 years ago

    I am a big fan of elastic design (which I prefer to call proportional design), where the layout is proportional to size of the font. And you vary the size of the font so the web page fills most of the browser window.

    You can see it in action here, were you can drag the browser window width and watch the page and font size adjust.

    It is also in use on my blognickcowie.comWord of warning, I use SIFR for the headings, they do not resize until the page is refreshed. (I need to write some javascript to do that). So dragging from a wide to narrow layout may cause problems. Just need to refresh the browser window.

    Also there are a couple of odd IE bugs on my blog that need to be fixed, so the home page does not render correctly. (Another thing on my to do list and one problem of working from a Mac)

    If your font size is set to largest in IE or up a couple of sizes in other browsers, the layout is a pain to use.

    There are no images on the blog at the moment, I am experimenting with elastic images at the moment and they will appear on the site in the next few days. While you can make images in the HTML elastic you can not make background images eleastic.

    How it is done, all units of measurement are in ems. In modern browsers 1em = 16px, and then you set body fontsize to 76% (1em = 12px) in the stylesheet. Then use javascript to change body fontsize dependent on the width of browser window. Window width for my site is 61em so: if browser window > 999px, fontsize = 87% = 14px width 850px if browser window >730px and Word of warning, I use SIFR for the headings, they do not resize until the page is refreshed. (I need to write some javascript to do that). So dragging from a wide to narrow layout may cause problems. Just need to refresh the browser window.

    Also there are a couple of odd IE bugs on my blog that need to be fixed, so the home page does not render correctly. (Another thing on my to do list and one problem of working from a Mac)

    If your font size is set to largest in IE or up a couple of sizes in other browsers, the layout is a pain to use.

    There are no images on the blog at the moment, I am experimenting with elastic images at the moment and they will appear on the site in the next few days. While you can make images in the HTML elastic you can not make background images eleastic.

    How it is done, all units of measurement are in ems. In modern browsers 1em = 16px, and then you set body fontsize to 76% (1em = 12px) in the stylesheet. Then use javascript to change body fontsize dependent on the width of browser window. Window width for my site is 61em so: if browser window > 999px, fontsize = 87% = 14px width 850px if browser window >730px and

  19. Woolly Mittens · 5 years ago

    Nice script. I see you start the script on the “load” event though. This means the user will see the page fully loaded and then flicker as a new stylesheet is applied.

    Maybe it’s smarter to start the process before the page has fully loaded, the window’s width-parameter is available before then anyway.

  20. Peter Akkies · 5 years ago

    Pretty good idea!

    An interesting use of this technique is to automatically switch to a handheld stylesheet if the resolution gets too low. That makes sure people who use handhelds which aren’t identified as so or people who just browse with really small windows will still be able to properly view the website.

  21. Mats Lindblad · 5 years ago

    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.

  22. Heiko · 5 years ago

    Nice Idea, to present every Screensize, their “own” Layout. Quite good idea for MobileWebSites.

  23. Paul van Steenoven · 5 years ago

    Thanks for this nice idea, only remark though its seems to conflict with sIFR. I am no javascript expert but when i include the javascript it makes both sIFR flash and the HTML header visible.

  24. Stuart Colville · 5 years ago

    >Maybe it’s smarter to start the process before the page has fully loaded, >the window’s width-parameter is available before then anyway.

    It’s a shame that support for DOMContentLoaded is so patchy across browsers because that would enable the script to run when the DOM tree is available rather than wait for the whole page to load. This being a particular problem with sites using a lot of image-replacement which is more common these days : )

    When I was creating the current version of my site Muffin Research Labs I experimented with Cameron Adam’s script but ended up not using it as I didn’t like two aspects of it (I’m not knocking it, it’s a great script! As is this implementation). One was the reliance of javascript and secondly I didn’t like the delay in resizing (due to waiting for the page to load - see above).

    In the end I implemented the floated columns approach as Tim mentioned above. One of my personal requirements was that the primary content column was to be fixed (so that I can use images across the width of the primary content) and so to make use of the space for the secondary content using the ‘natural’ properties of floats seemed to be a good way to go.

    I have toyed with the idea of using a related method for moving to what is effectively the ‘Thin’ layout here if someone bumps the text-size up 4 times. For the reason that with fixed columns the text becomes less less readable as the text size increases. I think this was also what Randal meant in his comment above.

    I would view this as an ‘auto-zoom layout method’. On my site if you need to bump the text up 4 times you would probably be better served with a single column layout. However this would probably be impractical as each browser has a different way of resizing the text. Could make for a good experiment though.

  25. ben scott · 5 years ago

    not sure if you have read the J.Veen book The Art and Science of Web Design , it is 5 years old and you can download for free

    http://www.veen.com/jeff/archives/000747.html

    in this book he outlines exactly what you have done here and adds in conditional resizes as well.

    thought it would be good to credit him in this article.

    like the implementation, but would be more useful if it could also be combined with elements being left fixed like flash can do. Realise this may make for some serious amounts of javascript though and lots more documentation.

  26. Hal Rottenberg · 5 years ago

    Has anyone tried this with PocketIE available on Windows Mobile PDAs or other small-format browsers? (Opera has an embedded version I think?) This is on my TODO list now but if anyone else has already done it please speak up. :)

  27. Rich Seymour · 5 years ago

    I think what Randal was pointing to is very importatn (mad props for him still being online and active). Anyway, we have a tile wall display here that is 14’ x 10’ with 4098 x 2034 resolution and most websites look pretty strange on it. Resolution independence is important for longevity, so you really have to use ‘em’s as your units if possible, then it won’t bork when a blind person (aka me on a bad day) hits control + a few times.

  28. Kevin Hale · 5 years ago

    I really think it’s a bad idea to believe one layout option is king for all situations. Elastic layouts do have issues in certain situations. For example: if i’ve got poor vision and a lower resolution set on my monitor (probably because I’m blind), then when I hit ctrl + a few times the layout which is now tied to ems becomes way larger than the browser windows size thus adding scrollbars horizontally.

    I believe text size increases were meant to do just that in a browser, increase text size, not zoom the page. Also, while some sites have no problems having layout tied to ems, if you’re using advertising on your site (and most ad sizes are in fixed dimensions not ems) then you could be pushing your ads off the viewport when someone resizes their text. Like I said earlier, it all depends on content of your site and what’s going to work in your situation.

    That said, this method adapts to any css layout of your choice and so if elastic layout is your cup of tea, you’re welcome to go nuts with it using this script. The demo doesn’t use elastic principles because it’s a bit easier to show some of the possibilities if I go from fixed to fluid.

  29. Peter · 5 years ago

    My first thought was that this is another great tool for the designer’s kit. However, I am now leaning towards it taking away options rather than giving them (to the user). Although you can force a style, if you resize the window the javascript kicks in so you’ve to force the style again. If choice of font sizes and colour schemes could be added it would improve it imho.

    Better still (but I am biased and have it my site) is Mike Purvis’s Jello Mold Piefecta layout which adjust nicely to screen widths, plus a php style switcher which does not depend of Javascript. Having said that, perhaps DRDL is a great tool and I haven’t found its best potential yet.

  30. Mike Purvis · 5 years ago

    If Javascript must be used, my preference tends toward Rico’s approach, rather than embedding the sizes right in the code. I realise that this isn’t always possible (eg, calculated widths), but having that class there to hook onto should make certain other types of layout change more straightforward. (for example, linearizing flanking columns at a narrow width)

    The reason I prefer a straight CSS solution (like Jello, yay Peter!) is simply because outside of IE, the onResize event doesn’t fire continuously. It’s resize-drag-drop-pause-SNAP. Whereas Firefox will continue to reflow CSS during a drag.

    So perhaps it’s really just a browser implementation problem.

  31. fredM · 5 years ago

    The implementation is impressive. No doubt about it.

    Unfortunatly I get slightly seasick watching the effect take place. It is not something for me….or my customers.

  32. Pat Collins · 5 years ago

    I like the idea, but the idea of a consistent user interface is something that is very much desired by users. To have to find a piece of information in a different place after changing the size of the window would be a hassle to any user.

  33. prabu · 5 years ago

    Everyone needs a hug.

  34. Joe · 5 years ago

    Everyone needs a poke in the eye with a sharp stick.

  35. Lewis · 5 years ago

    I need some help.

    I have the solution working, however, I really want a PHP version of the solution. Naturally, you mentioned google, and, I didn’t numerous searches.

    I found nothing, all of the solutions relied completely on Javascript, which, I don’t mind, but, doesn’t suit my needs.

    Maybe it is just the search criteria that I was using, but, I have spent the last two weeks trying different combinations, and I am still getting nothing.

    So please, if you know of a PHP alternative, or search criteria that can let me find an alternative, let me know.

  36. cruster · 5 years ago

    Ehm … Well, when resizing the browser window, this works accross all the browsers. But when loading the page into a window with certain dimensions, it does NOT work in IE6. The Man In Blue’s solution works in IE6 as well.

  37. Lawrence Meckan / Absalom Medi · 5 years ago

    Kevin,

    What licence is this code under ?

    I’ve just done a couple of experiemental templates under GNU/GPL which include your script which clients are asking for, and I need some confirmation on whether or not this allows free distribution.

    Thanks

  38. Kevin Hale · 5 years ago

    Definitely allowed. Everything we create on Particletree is created under a Creative Commons License. Specifically, this one.

  39. John · 5 years ago

    Pretty nice job and clear, thanks for it.

    But, at first visit is not loading the correct CSS when you are using Internet Explorer 6.

    It will be fixed?

  40. Gurpreet · 5 years ago

    Hi I am facing some problem When i put my application on Internet it work fine on Intranet but when we put same application on internet than some of my script validations are not working on some users can anyone sugget me about this

  41. Lawrence Meckan / Absalom Media · 5 years ago

    Gurpreet, are you sure Javascript security is correctly configured on the client machines ?

    I’ve encounted issues where JS is either turned off, or the browser remains unable to parse the script due to IE’s “Internet security” settings.

  42. Corneel · 5 years ago

    Hello,

    I like it a lot and I am trying things. It seems to work well, but it works on resize only, not on load.

    This is my testpage: http://www.e-sonics.nl/vb9/Webdesign9_2.html

    Can anyone help me out here?

    Thanks!

  43. James · 5 years ago

    Thanks for the tutorial and scripts. Very helpful.

    I too am running into the problem others mentioned, where in IE the styles aren’t being applied properly onload. Only on resize.

    I’ve thought perhaps manually triggering an resize event might do the trick, but I have no idea how to do this.

    Any suggestions?

  44. Rob G · 4 years ago

    I’m having the same problem as Corneel. The script works fine for me in Firefox and Safari but it doesn’t work when the page initally loads for me in IE 6.0. But it does start to working in IE if I resize the window. Of course your example code works fine for me in IE. I think that the problem might lie some of the floats I’m performing in my main body but I’m not certain. I’ve been working through this problem for the last 4 hours and I just can’t seem to find the solution. Can anyone help?

    Sample

    http://www.robgreer.com/test/gallery_test.shtml

    Thanks for your help!

  45. Martin · 4 years ago

    I just found this - it might help. I have not tried it myself yet. http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

  46. Daniel · 4 years ago

    i like the idea of viewport-size-independent layouts for a while. i use a base size (font-size for body 62.5%), em’s for sizing and a javascript with events for changing the body’s font-size depending on the viewport (resulting in scaling up or down the whole layout).

    this does work nice and everything but: how to deal with graphics? logos, pictures etc.? i can use ems for img sizes as well which works fine for mozilla- and webkit-based browsers but as you know the image-resizing algorythm of ie6 is a problem. i made a test-case where i used flash for the logo-graphic which does the trick, but this seems a bit of overload to me.

    how do you deal with graphics? any better ideas than using flash?

    all the best, daniel :)

  47. Bob McLain · 4 years ago

    This is a great technique and one I’d like to use, but has anyone tried to fix the bug that makes it somewhat useless for IE6 (and thus most of the world?).

    In IE6, the expanded content does not show when the page is loaded.

    If you reduce the browser size and then expand it, the expanded content does show.

    Since most people won’t be resizing their pages, they’ll think the extra content isn’t there.

    Over at the Man in Blue, someone pointed out that this bug may involve setting the css default value to true instead of false. I’m not sure what that means, but I hope someone here finds inspiration and manages to fix what is otherwise a great technique.

  48. Jo · 4 years ago

    I am going back to 4.01 - this XHTML is just a pain in the backside. XML should be used as it was inteneded. W3C? they got it wrong if u ask me.

  49. Jo · 4 years ago

    Its clear that programmers and designers are worlds apart. Why oh why did they not consider that proportional layouts were important. Instead what could have been simple has just turned into the biggest ball ache.

  50. Andy Skogrand · 4 years ago

    Has anyone been succesful in changing the width to height instead? I tried and it tested succesful in all browsers, except IE. I simply changed each instance of Width to Height in the javascript file. Is there a better way or any way to watch and change style sheets based off height, not width?

  51. oxygene · 4 years ago

    nice job and clear, thanks for it.

  52. Frank Jamison · 4 years ago

    Has anyone noted that Opera does not grab the alternate stylesheet on initial page load (or reload)? It only grabs it when the window is resized.

  53. Frank Jamison · 4 years ago

    Bob…I am having the same problem as you are.

    I’ve got it working in IE, NS, and FF, but Opera is just being a pill.

    To get it working on initial load in the other browsers, remove “alternate” from the rel attribute on the html page.

    If anyone has a fix for Opera, it would be greatly appreciated.

  54. Willbus · 4 years ago

    Can someone get this thingamajig to work correctly in IE?

  55. Paolo · 4 years ago

    As Frank Jamison noted: To get this script to work correctly in Internet Explorer (I.E.) you just need to change all the rel values to “stylesheet” instead of “alternate stylesheet”.

    I havn’t found any problems using this tweak so far…but I just started. If anyone encounters any issues using this please post and let us know.

  56. Charlie · 4 years ago

    I seem to have problems in IE. It displays the correct sytle sheets however if the page is refreshed the default css file is used again.

  57. poulpy · 4 years ago

    Everyone needs a hug.

  58. prashanth · 4 years ago

    kjlsdfjgldfjg;ldjf gdlfjg dfgkjdf;l g

  59. Tom · 4 years ago

    Frank Jamison, you are my hero. This problem has been bugging me for the past few hours!!!

  60. Barrett · 4 years ago

    i reallly do need a hug right now.

  61. vijay · 4 years ago

    nice to see the solution thanks a lot

  62. Gaya · 4 years ago

    Hi,

    Love the script and it worked like a treat on the home page (www.toothbone.co.uk/liemur/index3.html) till I started. applying it to other linked pages. It works much better if the linked page is not template generated. However (in bigger screen than 1024) when I link it to template generated pages the page ‘thinks’ a little and then rezises itself to the wider resolution (like here when you click on About Us or Training Courses). How can I get rid of this ‘jump’ between pages?

  63. Eric · 4 years ago

    just a thought, first I don’t consider myself an expert on any coding implications for web sites, however we must keep all this in perspective to what the end user will experience or hassle with. You can put a lot of time into coding and tweaking and recoding and so on and so on and then forget the bottom line and bigger picture. If a website has great content and serves a valuable function the user will put up with quite abit of simple nonsense such as using his or her scroll bar a couple of inches or so. Also the growing trend seems to be much higher resolutions as default for PC’s. Any user who wants otherwise, it is his choice to do so and would probably recognize the trade offs. By using such code as you suggest you are attempting to take control away from the user more than give them a benifit and at what overall cost to the developer as tradoff for the end users functionalty. Also you say yourself you are rewarding those with larger screens with additional content are you intending to punish other customers without. I’m not really trying to slam great coding which I’m sure this is, I’m just trying to bring out one of the most overall overlooked concepts of design and that is truly putting the users first, looking at the big overall picture and that sometimes includes the overall cost for the end results. Just a thought

  64. Rariti · 4 years ago

    I had a great time with the script on my personal portfolio site (http://www.delacruzcreative.com). Whenever I find something like this, I on occasion like to see what is possible design-wise nad how far I can push it. Sure it cost a little with extra divs and classes, but sometimes the trade-off is worth a little extra. I have to admit it was a bit if a mind squeeze, to get all the width variances worked out. It’s a fairly new site implemented with a CMS, and I still have some issues with the script in Opera, and some other non-related issues, but I’m sure, I’ll figure it out someday. If you check out my site, have a look at the teal bubbly on-page navigation when viewing at different widths. I thought that was pretty cool. Thanks Kevin.

  65. Pol · 3 years ago

    Hi,

    Love the script and it worked like a treat on the home page (www.toothbone.co.uk/liemur/index3.html) till I started. applying it to other linked pages. It works much better if the linked page is not template generated. However (in bigger screen than 1024) when I link it to template generated pages the page ‘thinks' a little and then rezises itself to the wider resolution (like here when you click on About Us or Training Courses). How can I get rid of this ‘jump' between pages?

    Does someone have a solution for this jumping styles? I encounter this in IE6 whenever clicking a link? thx

  66. arun · 3 years ago

    Everyone needs a hug.

  67. prap · 3 years ago

    Nice work

  68. ajax · 3 years ago

    Some really nice scripts here

  69. Stefan · 3 years ago

    Thanks for the good examples, good luck with the work!

  70. liv streams · 3 years ago

    really great script and it works perfect

  71. maximale hypotheek · 3 years ago

    Very nice work. Not for the novice but very cool.

  72. tsjechisch · 3 years ago

    Very cool script. Thanks for sharing it with us.

  73. BuddyL · 3 years ago

    When I found your site in a web search, the information said something about switching stylesheets using PHP instead of JavaScript. I anxiously went to this sight to see how you accomplished this great feat, but nothing on your site makes any reference to it. For the reader who may have come here looking for PHP resolution detection, understand that it is not possible. PHP can detect your browser, but not your monitor resolution. This must be done client-side. That said, you can pass variables from JavaScript to PHP using Get variables.

  74. Zauberer Zauberkünstler Zaubershow · 3 years ago

    Good article! your site let me learn more. Thanks! And please keep up to date.

  75. ben · 3 years ago

    I had the same problem as others with the script not firing in IE until you resize the window. Once I removed “alternate” from the “rel” on the advice of another commenter it now works fine. Maybe the article should be updated to state this?

  76. nieuws · 3 years ago

    pretty nice here

  77. Katalog Stron · 3 years ago

    Nice Idea, to present every Screensize, their “own” Layout. Quite good idea for MobileWebSites.

  78. hongaars · 3 years ago

    I think it is very great to see this nice piece of work

  79. Handball · 3 years ago

    Really interesting article and useful informations! Best regarts from Germany send Handball!

  80. Hosting WrocÅ‚aw · 3 years ago

    Hello! This is very intresting article. Best regards

  81. klimatyzatory · 3 years ago

    Hi, it´s an interesting and helpful article. Thanks

  82. Marcin · 3 years ago

    Nice Idea. It’s time to do something like that ;)

    gry flash

  83. Gierki · 3 years ago

    I checked it at home and it’s really fine

  84. Watch Paris · 3 years ago

    Great solution! maybe I’ll try it in my blog.

  85. Catering · 3 years ago

    I Use Layout ;)

  86. Miód · 3 years ago

    Good Article and nice comments table :)

  87. Perfumy · 3 years ago

    Nice Blog i need it :)

  88. Skischule Bodenmais · 3 years ago

    Everyone needs a hug.

  89. Berater · 3 years ago

    cooolllll Blog good work

  90. Fotka Manager · 3 years ago

    Good Fotka Manager ! Thanks

  91. telewizja n · 3 years ago

    Rethinking How You Build a Page

    When you build a site using tables, you have to think in a “tabular” format. In other words, you’re thinking in terms of cells and rows and columns. And your Web pages will reflect that. When you move to a CSS-P design, you’ll start thinking of your pages in terms of the content.

    For example, the page for this article can be considered to have five content parts:

    1. the header This is where my photo is, the top banner ad, and basic navigation.
    2. the left navigation This is the left side of the page, with the subjects and essentials.
    3. the right navigation This is where the tower ads and other information is.
    4. the content The text of this article.
    5. the footer The bottom navigation, copyright information, lower banner ad, and so on.

    Rather than putting those elements in a table, I can use the

    tag to define the different portions of the content, and then use CSS-P to place the content elements on the page.

    For the sake of this article, I’m going to pretend there are just three columns on the page, and ignore the header and footer.

  92. yellowpages · 3 years ago

    Thanks for sharing this information with us. Was very useful and its working fine for me.

  93. Trading · 3 years ago

    design seems to play only a small role in the success of a site.

  94. ajax · 3 years ago

    Very nice site and i learn some more here

  95. Pozycjonowanie · 3 years ago

    Nice article , good job man. Thanks

  96. Erik · 3 years ago

    I’ve put up a site using this code. Check out http://www.geminidowns.com.au/

  97. Mini Storage · 3 years ago

    Very nice site and i learn some more here

    http://www.taiyau.com/2007/index_e.htm

  98. escimo · 3 years ago

    I’am new to css! Nice site!!! thx!

  99. Blog WordPress · 3 years ago

    This is cool! I like it a lot.

  100. Flaschen Franz · 3 years ago

    Thank you for your advices and examples! They are very inspiriting! I would get rid of html style tags on my websites and your posts are really helpful!! Thank you (big hug)!!

  101. komputery · 3 years ago

    Many, many thanks for this site!

  102. Rysiek · 3 years ago

    Wow. this great!

  103. Tomasz Golger · 3 years ago

    Thanks for stuff, its great.

  104. SEIKO · 3 years ago

    Good article , thank You

  105. Sklepy · 3 years ago

    Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more.

  106. Åšmieszne filmiki · 3 years ago

    Very thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view. Makes you think more.

  107. Drinks · 3 years ago

    Thank you for your advices and examples! They are very, very inspiriting! I would get rid of html style tags on my websites and your posts are really helpful!! Thank you very much (big hug)!

  108. Londyn · 3 years ago

    Hi, has anyone been succesful in changing the width to height instead? I tried and it tested succesful in all browsers, except IE. I simply changed each instance of Width to Height in the javascript file. Is there a better way or any way to watch and change style sheets based off height, not width?

  109. London jobs · 3 years ago

    Hi, When I found your site in a web search, the information said something about switching stylesheets using PHP instead of JavaScript. I anxiously went to this sight to see how you accomplished this great feat, but nothing on your site makes any reference to it. For the reader who may have come here looking for PHP resolution detection, understand that it is not possible. PHP can detect your browser, but not your monitor resolution. This must be done client-side. That said, you can pass variables from JavaScript to PHP using Get variables.

  110. darmowe gry · 3 years ago

    Nice script. I see you start the script on the “load” event though. This means the user will see the page fully loaded and then flicker as a new stylesheet is applied.

  111. WordpressFan · 3 years ago

    Although the internet may be a wondrous piece of engineering and a work of art in progress is it is also an important and powerful industry. The internet represents an unparalleled opportunity for work. Web designers might as well be the modern equivalent of the gold miners of the Old West. They are searching for riches and traveling until they find their fortune. However web design skills are only part of it. A webmaster may have powerful skills but they are not necessarily SEO masters. Let’s compare and contrast.

    A webmaster must master not only the basics such as HTML skills but also web design programs, web programming languages, graphic skills and pretty much must have advanced computer skills. They must understand all of the tricks of the trade as well as be creative enough to use them.

    SEO masters on the other hand not only have to master all of the tricks of their trade must they must also learn the black arts of their trade. They have to not only be able to manipulate the search engines ranking algorithms but also do it in such a way as to not get caught. They have not only the fighting skills but also the necessary stealth skills to be invisible. This my WordPress blog dreamhost.free-search.eu/kilka-fotek-z-dreamhost

  112. Albina-ht · 3 years ago

    fresh news fetal development

  113. Noclegi · 3 years ago

    Thanks Kevin for taking care of this. Much appreciated :)

  114. work and travel · 3 years ago

    Gooooooood Blog good work!!!

  115. strony www · 3 years ago

    […]SEO masters on the other hand not only have to master all of the tricks of their trade must they must also learn the black arts of their trade. They have to not only be able to manipulate the search engines ranking algorithms but also do it in such a way as to not get caught. They have not only the fighting skills but also the necessary stealth skills to be invisible. This my WordPress blog dreamhost.free-search.eu/kilka-fotek-z-dreamhost[…] good work

  116. pozycjonowanie · 3 years ago

    Thank you for your advices and examples! They are very, very inspiriting!

  117. cms · 3 years ago

    Very thanks for very interesting article. btw. I really enjoyed reading all of your posts

  118. maxbrand · 3 years ago

    Thank you, I found it very interesting.

  119. wypadek w Anglii · 3 years ago

    Good article , Thank You !

  120. Wynajem samochodów kraków · 3 years ago

    Thank you for interesting article .

  121. Fofum Sony Ercicsson · 3 years ago

    Hi, my name is Christopher Gsm. I would suggest to send this text within the forwarded spam-mail to the webmasters, administrative contacts,and registrars of each spam-promoted website!

  122. Praca · 3 years ago

    Hi, my name is Praca. when I found your site in a web search, the information said something about switching stylesheets using PHP instead of JavaScript. I anxiously went to this sight to see how you accomplished this great feat, but nothing on your site makes any reference to it. For the reader who may have come here looking for PHP resolution detection, understand that it is not possible. PHP can detect your browser, but not your monitor resolution. This must be done client-side. That said, you can pass variables from JavaScript to PHP using Get variables.

  123. Randki · 3 years ago

    Thanks for the good examples, good luck with the work!

  124. Forum BMW · 3 years ago

    Hello, i guess i am a design luddite, but i favor simply picking a decent model (100% width, or a fixed width based on conservative estimates) over this layout micromanagement.

    just as an aside - the sites i find the most useful often have terrible or nonexistant design techniques. craigslist, slashdot, etc. design seems to play only a small role in the success of a site.

  125. Turystyka · 3 years ago

    Hello, I checked it at home and it’s really fine. Thanks.

  126. Drink, drinks, recipe, recipes, coctails · 3 years ago

    My name is Cristopher. I have a more brutal script on my site [inspired by Mike Davidson’s article] that redirects visitors of small screened devices supporting javascript to a subdomain stripped of images and css styling - and therein lies the problem. Most of the devices I’ve been able to test (mostly mobile phones) are not js equipped and are left to struggle with the full-on version. Unless you specifically navigate to the ‘mobile.’ subdomain of course. I like your solution because the basic css file could essentially be the zoom layout, and others the preferred design layout(s) - thanks, much food for thought. Chris

  127. Strefa WiadomoÅ›ci · 3 years ago

    So sorry, it was meant to read: “However, of course it can’t encompass for everything in your example.”

  128. Sennik · 3 years ago

    At a first hurried glacne, it looks nice and seems to work well.

    However, and not meaning to steal your thunder here, but should JavaScript be a prerequisite to achieve a certain layout?

    Also, to create a fairly flexible layout where the columns can fall down, floats and em-based column widths can get you pretty far.

    However, of course it can encompass for everything in your example. I guess it’s a matter of balance. Sennik

  129. naturyzm · 3 years ago

    “Safari refuses to change the page rendering even though it recognizes the methods”

    Can you explain what you mean by this statement?

  130. jak wyslac faks · 3 years ago

    Congratulations, your article is really good.

  131. voip · 3 years ago

    Great article, thank you for sharing.

  132. Disney · 3 years ago

    great article thnx for sharing with us

  133. wesela Å›lub · 3 years ago

    Thank’s for your work. Don’t stop. I will enjoy to read your next articles. Greetings!

  134. tani faks · 3 years ago

    Very usefull information, thank you.

  135. voip · 3 years ago

    Very interesting point of view :)

  136. Strony Internetowe · 3 years ago

    Works perfectly! Many Thanks! I was looking for that. That’s the cure for my pain! :)

  137. stefan rooyackers · 3 years ago

    Thank you for your advices and examples! They are very, very inspiriting! I would get rid of html style tags on my websites and your posts are really helpful!! Thank you very much (big hug)!

  138. stefan rooyackers · 3 years ago

    Thanks very much. Great ideas!

  139. Voip · 3 years ago

    Hi, I like the idea of viewport-size-independent layouts for a while. i use a base size (font-size for body 62.5%), em’s for sizing and a javascript with events for changing the body’s font-size depending on the viewport (resulting in scaling up or down the whole layout. Voip

  140. Forum Nasza Klasa · 3 years ago

    Hello, my name is Nasza Klasa. Has anyone been succesful in changing the width to height instead? I tried and it tested succesful in all browsers, except IE. I simply changed each instance of Width to Height in the javascript file. Is there a better way or any way to watch and change style sheets based off height, not width? Nasza Klasa.

  141. Niels · 3 years ago

    Very detailed article. Although there are some drawbacks when using elastic design.

  142. tuning · 3 years ago

    Nice Idea , good work

  143. Pozycjonowanie PoznaÅ„ · 3 years ago

    I really enjoyed reading all of your posts.

  144. Galeria sklep · 3 years ago

    Very thanks for very interesting article. btw. I really enjoyed reading all of your posts.

  145. Dekoracja i prezenty · 3 years ago

    Very nice article. Thanks for taking the time to write it down. Keep up the good work.

  146. Antyki kolekcje hobby · 3 years ago

    Good article ,Dynamic Resolution Dependent Layouts thank You

  147. Aukcje allegro · 3 years ago

    OK Good article , thank You !!!!!

  148. stefan rooyackers · 3 years ago

    Great, thanks for the tips! http://www.stefanrooyackers.com

  149. John D. · 3 years ago

    hmz…may be interesting for me thanks.

    http://www.hypotheekrente.co.uk

  150. friendly removals · 3 years ago

    Hi! What a nice article. I have similar problem as you have. It is great to find some solutions. It was very helpful to me. Thank you very much.

  151. Ian White · 3 years ago

    The Safari problem that we’re having is this

    • when the browser loads, the appropriate CSS file for the width is NOT applied
    • but, when resizing, the appropriate CSS file is applied

    Has anyone else had this problem? Any ideas for a fix?

    Great script by the way, thanks for sharing.

    Ian

  152. Vincent · 3 years ago

    Everyone needs a hug. Your demo seems to work in Safari here. The only problem I can see is that the vertical scrollbar disappears and doesn’t come back when I return to this article page. A reload brings it back though…

  153. Hypotheek · 3 years ago

    Works perfectly over here! Thanks! Got it working on (maximale hypotheek)

  154. centrale · 3 years ago

    Hi, I like the idea of viewport-size-independent layouts for a while. i use a base size (font-size for body 62.5%), em’s for sizing and a javascript with events for changing the body’s font-size depending on the viewport (resulting in scaling up or down the whole layout.

  155. naturyzm · 3 years ago

    good site! Thanx you!

  156. Hypotheekpartner · 3 years ago

    I learned a lot reading ur site, it is in my favorites now. ….. thanks

    hypotheekpartner

  157. adawords · 3 years ago

    thanks …. even i need a hug from time to time:P

    Thank you for your advices and examples! It realy helps.

    adwordsexperts.nl

  158. SSCRI.com · 3 years ago

    I finaly could solve some problems on my site. Hopefully i can finish it now. Thanks and a big hug back.

  159. Kredieten.us · 3 years ago

    what a lot of huging here feels like comming home. I had a lot of help from this site keep up the good work.

  160. adum · 3 years ago

    Everyone needs a hug.

    Hello, my name is Nasza Klasa. Has anyone been succesful in changing the width to height instead? I tried and it tested succesful in all browsers, except IE. I simply changed each instance of Width to Height in the javascript file. Is there a better way or any way to watch and change style sheets based off height, not width? Nasza Klasa.

  161. drinki · 3 years ago

    Good article

  162. offshore companies · 3 years ago

    Everyone needs a hug. Good Article.

  163. Przewozy Autokarowe · 3 years ago

    Thanks for this nice idea. Your site let me learn more. And please keep up to date. Przewozy Autokarowe

  164. pozycjonowanie · 3 years ago

    Very nice article. Thanks for taking the time to write it down. Keep up the good work.

  165. strony internetowe · 3 years ago

    Works perfectly over here! Thanks! Got it working on

  166. sex anonse towarzyskie · 3 years ago

    Nice Idea , good work

  167. Geld Lenen · 3 years ago

    Okay good work :) I needed this for http://www.lening-geld-lenen.nl/

    Mucho gracias!

  168. Londynek · 3 years ago

    Thank you! Very nice and interesting article.

  169. forum infiniti · 3 years ago

    Thank you! Very nice and interesting article.

  170. Ernst · 3 years ago

    Excellent article. Good with the books of Eric Meier More articles like this are appreciated!

  171. Prepaid mobiel · 3 years ago

    This article was very usefull for me in creating my website! Tahnks.

  172. De beste hypotheek · 3 years ago

    Please go on writing such articles, it helps me much, for example for my site http://www.absoluutdebeste.nl

  173. Babysitter · 3 years ago

    Everyone needs a hug.

  174. Me · 3 years ago

    This has not aged well, and now looks a pretty poor solution for what modern CSS can provide as default.

  175. Domein checken · 3 years ago

    good work. thanx

  176. promote your site · 3 years ago

    good work! thanx for your post

  177. Ian White · 3 years ago

    If you’re using prototype, then you might find this blog post useful. Basically a simplified version of this excellent script (if you’re using prototype).

  178. aov · 3 years ago

    i would also like to thank you for the article, aov.

  179. letselschade · 3 years ago

    good info about css! very helpfull formy site about letselschade