Discuss: Switchy McLayout: An Adaptive Layout Technique

by Marc van den Dobbelsteen

11 Screen/Window size

Ever since I’ve had a 1024 pixel wide monitor, I haven’t used my webbrowser maximized anymore. My browser window is commonly actually about 800-900 pixels wide. I really can’t understand why people measure screensize, while that says nothing about the available display area in the browser. But maybe I am a special case.

The modified layout problem on window changes is easily fixed; don’t change the layout on resize, only on load! That way you can change your window size (for example to have an editor alongside) without the layout changing. But note to Dragan: it has always been common that text re-wraps when you change the window size, so pictures and text do end up at different locations. Unless you like horizontal scrolling!

One more thought; how about implementing the screen-zoom features of IE and Opera. At a lower zoom-value, you can show a higher-resolution layout…

posted at 05:20 pm on December 19, 2006 by Peter -

12 But what about the 5% procent of people ..

But what about the 5% procent of people who have javascript turned off, is there a default state.

maybe a liquid “by nature” site, could be hijacked (javascript enchanced to behave better.

posted at 07:43 pm on December 19, 2006 by leonard eshuis

13 Interesting, but...

This technique is interesting for sure, but it doesn’t really solve the issue of designing for all screens. This problem is not best solved with javascript. If we’re targetting users with obscure screen resolutions, chances are we’re also targetting obscure browsers which means we cannot assume javascript is supported. Perhaps a better solution would be to use “switchy layouts” in conjunction with serverside UA detection for custom css or the lesser-supported CSS media type.

posted at 07:51 pm on December 19, 2006 by Champ Bennett

14

The several commenters who wonder what will happen if JavaScript is turned off must have missed the following sentence in the article:

When JavaScript is not available, the layout degrades to an “old-school�? liquid layout.

If there’s a Firefox/Win display problem with one of the examples, as Boris Kuzmic mentions , that’s probably a problem with the demo (and we’ll look into it), but it’s important to note that such an problem doesn’t say anything about the solidity of the resizing technique itself.

And as for the issue of content changing when you resize your window, Peter is correct:

The modified layout problem on window changes is easily fixed; don’t change the layout on resize, only on load!

You don’t have to implement the technique exactly as it’s implemented in the demo…and probably shouldn’t, since the demo was created only for the purpose of illustrating the concept.

posted at 08:36 pm on December 19, 2006 by Erin Kissane

15 Excited but Disappointed

I was excited to see this article because the varying sizes of devices nowadays certainly does pose challenges; I was hoping to find salvation, but I am sort of disappointed by what I saw.

First of all on my 1024 res display the content took up only about a third of the available real estate.

Second, without JavaScript support the layout broke — it did not revert to a liquid layout. The image got wide but the content area stayed as is and made some of the text hard to read as the image went behind it. (I did re-load the page.)

For now I guess, for me anyway, I will have to stick with reasonably sized fixed width (760px) or old school liquid layouts, add max-width for monitors that are super wide (using browsers that support max-width), and rely on a handheld media-type CSS for those little devices.

I did base these comments on what I saw on the demo page, and maybe that page is at fault, but I had nothing else to go by. I do appreciate the technique though and hopefully with some refinement it might be a more usable solution. I will recheck the demo page to see if it gets updated at which time I may reform my opinion.

(I’m using FF 2.0 on Win)

posted at 09:01 pm on December 19, 2006 by Mike Cherim

16 Pretty Rad!

Cool man! I have to implement this! It’s too dope not to get used!

posted at 10:30 pm on December 19, 2006 by Robert Fauver

17 RE: JavaScript and other issues

@Erin Kissane:
The point of my comment was not to ask “what happens when javascript is off or unavailable” but more to note that the solution to the problem of designing for ALL screens is not solved by using javascript. Most browsers written for small screen devices do not support javascript and therefore this technique will not work, despite the fact that this article implies that it will.

posted at 10:49 pm on December 19, 2006 by Champ Bennett

18

Thanks for your comments, Mike. The technique can be implemented to serve any layout you can design to any range of screen sizes you want to target. We limited ourselves to seven widths for the demo, but you can make it as big or as small as you want by changing your CSS.

I hope Marc will discuss the JavaScript degradation issue; I believe that’s a major selling point for this technique.

posted at 10:57 pm on December 19, 2006 by Erin Kissane

19

The point of my comment was not to ask “what happens when javascript is off or unavailable�? but more to note that the solution to the problem of designing for ALL screens is not solved by using javascript.

Right. I was responding to the commenters who were asking that question. There are several of them above.

posted at 10:58 pm on December 19, 2006 by Erin Kissane

20 This is nice temporary hack until we got more supp

This is pretty useful and I also did something like that around a year ago.
BTW, I’m not shure that more than 3 types of layout will be useful, mostly because all we have limited time of development.
Also real deal will be after more browsers implement CSS3 media queries
For now only Opera and probably Safari/Konqueror support it.

posted at 11:05 pm on December 19, 2006 by Andrey Petrov