I feel like GMail is an excellent example of best practices in action, but I'm looking for a more theoretical code-based approach. CSS? JavaScript? jQuery? Let's hear it.
A:
Depends on what you have to do on window resize...
Usually most applications and websites use browser resize event for changing layout or increasing/decreasing font size when user changes browser window size.
Otar
2010-08-01 12:20:29
Umm. The vast majority of websites don't do anything special with browser resize events. Off the top of my head, I can think of only one website that does (and that is because it has two layouts, isn't designed for desktop browsers, and had the resizing trick added on as an afterthought to make things a little nicer for users who do try to visit it with a desktop browser)
David Dorward
2010-08-01 12:24:05
+2
A:
Most web application use proper document layout and CSS to make the flow work itself out naturally when the user resizes the browser window, without executing any script at all. This is exactly what the CSS properties display, position, float, clear, etc. are for.
tdammers
2010-08-01 12:22:19
Can you elaborate a bit more about "proper document layout"? I find your answer to be vague and not really helpful.
Zachary Burt
2010-08-01 16:57:47
By 'proper document layout' I mean: Use structural markup as it is intended, then apply CSS to style it. Make good use of the various options you have to provide a document that naturally adapts itself to the given window size and font. This means, among other things, that you should avoid absolute positioning, specify sizes in em rather than pixels where this makes sense, don't use tables for layout unless you absolutely have to, try not to insert structural elements for the sole purpose of creating a visual effect (although this is often the only way to achieve what you want).
tdammers
2010-08-01 18:56:47
A:
A different and not so common approach is used at http://sjoraddning.se where resizing the screen adjusts the amount of columns used in the layout.
David
2010-08-01 12:38:47
This is essentially the same as Otar's answer, except that the code is minified so its hard to figure out *how* to achieve the effect.
David Dorward
2010-08-01 12:41:36
A:
you could do something like this.
The idea is you make a large wrapper (#main,the lightest one) and you place 2 divs inside:#left and #right.
left is a fixed width div width:200px and floats left float:left.
right is liquid so no width, but to prevent #left from overlapping you give #right a margin of the width of #left -> margin:0 0 0 200px.
To prevent #right from being to small you give it a minimum width min-width:400px. Now when you resize the window #right will resize along until #right gets at 400px then the scrollbars will be visible