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.
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.
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!
I’m digging it, nice work.
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…
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. :-)
Sorry, it was meant to read: “However, of course it can’t encompass for everything in your example.”
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.
Wonderful! I just have a little addendum: instead of having 3 different CSS sheets, why not instead do something like…
and on CSS:
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. :)
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?
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.
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.
@Kevin,
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! :-)
I’m with Randal on the layout issue. Somehow the layout should vary based on the relationship between font size and browser resolution.
“Safari refuses to change the page rendering even though it recognizes the methods”
Can you explain what you mean by this statement?
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…
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.
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.
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.
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.
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
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.
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.
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.
Nice Idea, to present every Screensize, their “own” Layout. Quite good idea for MobileWebSites.
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.
>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.
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.
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. :)
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.
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.
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.
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.
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.
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.
Everyone needs a hug.
Everyone needs a poke in the eye with a sharp stick.
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.
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.
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
Definitely allowed. Everything we create on Particletree is created under a Creative Commons License. Specifically, this one.
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?
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
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.
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!
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?
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!
I just found this - it might help. I have not tried it myself yet. http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
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 :)
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.
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.
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.
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?
nice job and clear, thanks for it.
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.
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.
Can someone get this thingamajig to work correctly in IE?
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.
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.
Everyone needs a hug.
kjlsdfjgldfjg;ldjf gdlfjg dfgkjdf;l g
Frank Jamison, you are my hero. This problem has been bugging me for the past few hours!!!
i reallly do need a hug right now.
nice to see the solution thanks a lot
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?
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
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.
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
Everyone needs a hug.
Nice work
Some really nice scripts here
Thanks for the good examples, good luck with the work!
really great script and it works perfect
Very nice work. Not for the novice but very cool.
Very cool script. Thanks for sharing it with us.
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.
Good article! your site let me learn more. Thanks! And please keep up to date.
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?
pretty nice here
Nice Idea, to present every Screensize, their “own†Layout. Quite good idea for MobileWebSites.
I think it is very great to see this nice piece of work
Really interesting article and useful informations! Best regarts from Germany send Handball!
Hello! This is very intresting article. Best regards
Hi, it´s an interesting and helpful article. Thanks
Nice Idea. It’s time to do something like that ;)
gry flash
I checked it at home and it’s really fine
Great solution! maybe I’ll try it in my blog.
I Use Layout ;)
Good Article and nice comments table :)
Nice Blog i need it :)
Everyone needs a hug.
cooolllll Blog good work
Good Fotka Manager ! Thanks
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:
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.
Thanks for sharing this information with us. Was very useful and its working fine for me.
design seems to play only a small role in the success of a site.
Very nice site and i learn some more here
Nice article , good job man. Thanks
I’ve put up a site using this code. Check out http://www.geminidowns.com.au/
Very nice site and i learn some more here
http://www.taiyau.com/2007/index_e.htm
I’am new to css! Nice site!!! thx!
This is cool! I like it a lot.
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)!!
Many, many thanks for this site!
Wow. this great!
Thanks for stuff, its great.
Good article , thank You
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.
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.
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)!
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?
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.
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.
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
fresh news fetal development
Thanks Kevin for taking care of this. Much appreciated :)
Gooooooood Blog good work!!!
[…]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
Thank you for your advices and examples! They are very, very inspiriting!
Very thanks for very interesting article. btw. I really enjoyed reading all of your posts
Thank you, I found it very interesting.
Good article , Thank You !
Thank you for interesting article .
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!
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.
Thanks for the good examples, good luck with the work!
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.
Hello, I checked it at home and it’s really fine. Thanks.
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
So sorry, it was meant to read: “However, of course it can’t encompass for everything in your example.â€
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
“Safari refuses to change the page rendering even though it recognizes the methodsâ€
Can you explain what you mean by this statement?
Congratulations, your article is really good.
Great article, thank you for sharing.
great article thnx for sharing with us
Thank’s for your work. Don’t stop. I will enjoy to read your next articles. Greetings!
Very usefull information, thank you.
Very interesting point of view :)
Works perfectly! Many Thanks! I was looking for that. That’s the cure for my pain! :)
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)!
Thanks very much. Great ideas!
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
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.
Very detailed article. Although there are some drawbacks when using elastic design.
Nice Idea , good work
I really enjoyed reading all of your posts.
Very thanks for very interesting article. btw. I really enjoyed reading all of your posts.
Very nice article. Thanks for taking the time to write it down. Keep up the good work.
Good article ,Dynamic Resolution Dependent Layouts thank You
OK Good article , thank You !!!!!
Great, thanks for the tips! http://www.stefanrooyackers.com
hmz…may be interesting for me thanks.
http://www.hypotheekrente.co.uk
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.
The Safari problem that we’re having is this
Has anyone else had this problem? Any ideas for a fix?
Great script by the way, thanks for sharing.
Ian
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…
Works perfectly over here! Thanks! Got it working on (maximale hypotheek)
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.
good site! Thanx you!
I learned a lot reading ur site, it is in my favorites now. ….. thanks
hypotheekpartner
thanks …. even i need a hug from time to time:P
Thank you for your advices and examples! It realy helps.
adwordsexperts.nl
I finaly could solve some problems on my site. Hopefully i can finish it now. Thanks and a big hug back.
what a lot of huging here feels like comming home. I had a lot of help from this site keep up the good work.
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.
Good article
Everyone needs a hug. Good Article.
Thanks for this nice idea. Your site let me learn more. And please keep up to date. Przewozy Autokarowe
Very nice article. Thanks for taking the time to write it down. Keep up the good work.
Works perfectly over here! Thanks! Got it working on
Nice Idea , good work
Okay good work :) I needed this for http://www.lening-geld-lenen.nl/
Mucho gracias!
Thank you! Very nice and interesting article.
Thank you! Very nice and interesting article.
Excellent article. Good with the books of Eric Meier More articles like this are appreciated!
This article was very usefull for me in creating my website! Tahnks.
Please go on writing such articles, it helps me much, for example for my site http://www.absoluutdebeste.nl
Everyone needs a hug.
This has not aged well, and now looks a pretty poor solution for what modern CSS can provide as default.
good work. thanx
good work! thanx for your post
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).
i would also like to thank you for the article, aov.
good info about css! very helpfull formy site about letselschade