As phone sand tablets become more popular it’s becoming more common to see sites that can dynamically handle them, as well as notmal users, without having to load a special “mobile version”. There are several way to create such fluid sites, but today I’ll be talking about one I made not to long ago.
WordPress twentlyeleven, the new theme with wordpress 3.2, is a fluid width site, as you shrink your window the relative sizes get smaller, eventually breaking down into a single column site for mobile devices. They do this with CSS3 @media conditions, and while this is a perfectly usable method I found it left a little to be desired. First it bloats your stylesheet with all it’s extra group and if your using something that deletes comments, like the CSS color changer I posted last week, those group will get removed and the site will no longer be fluid (in fact it will probably be broken to boot). The second this I dislike about the @media method is the lag. Whenever it changed between sizes the browser pauses for a moment while it figures everything out. I know this is probably a minor concern to most people but it annoyed me to no end, I wanted quick, fluid changes. For those reasons I wrote a short little jQuery javascript to do the dynamic changing.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var sizeable = 'body,#content,#sidebar,#footer'; $(document).ready(function(){ $(window).resize(); }); $(window).resize(function(){ var width = parseInt($(window).width()); // The following line was added for the example $('#currentsize').html(width); if(width<=320){ $(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('tiny_screen'); }else if( (width>320) && (width<=768) ){ $(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('small_screen'); }else if( (width>768) && (width<=1024) ){ $(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('medium_screen'); }else{//>1024 $(sizeable).removeClass("tiny_screen small_screen medium_screen large_screen").addClass('large_screen'); } }); |
Snipplr: http://snipplr.com/view/59044/flexible-site-layout-with-resize-detection/
The script adds a style to every element in the selector variable, which is anything that jQuery would understand as a selector (in the example it’s several different divs separated by commas, but I’ve done it with various other selectors). The classes that are added, as well as the sizes they are added at, are controlled by the if statement. In the example, the sizes “tiny_screen”, “small_screen”, “medium_screen”, and “large_screen” where added if the window was under 320px, between 321px and 768px, between 769px and 1024px, and anything larget that 1024px respectively. Those sized are all easily changeable (reducible or expandable if you want more or less steps). Using an if statement to control the sizes isn’t the most efficient way sure, but if your under 5 size options it’s just as fact as any other method, possible even faster if your number of levels is low. That said, if anybody wants to use more and notices it being problematic let me know and I’ll remake it using another method.
Settings up default styles, for those people without javascript enabled, can be done in two ways. First is to use the cascade effect of stylesheets, so say if one of your elements is the #main tag, you can give the normal #main the styles you want, like width:800px;, then give #main.small_screen a different style, the one you want on a small screen, say width:400px. Because #main.small_screen is more detailed that #main, it’s rules will override #main’s rules and it’ll give you the smaller, updated width. This methods does have the disadvantage of making some thing more difficult to adjust in the style sheet later (because you have to hunt it down and look between them all). I suggest simply giving those items a default class. I figure most people with javascript turned off are using medium screens, so in that case my html code would include both an id of main and a class of medium_screen, the script will adjust that ass soon as the page loads if it’s bigger or smaller assuming it can run and if not they should be able to use the site just fine.
I’ve got an example of this right on the resizer example page so you can see it in action. If you have any questions/comments/criticisms post them below, as well as if you use this in a project or improve upon it and I’ll update with that information included as well.