Discuss: Switchy McLayout: An Adaptive Layout Technique
by Marc van den Dobbelsteen
- Editorial Comments
2 Nice
Nice technique! but.. unfortunately non of my clients will wait me to make 5 different css files. I need something more universal. :)
posted at 05:52 am on December 19, 2006 by Dimitar Yanev
3 Superb
This is excellent, I’ll definitely be looking at this a lot closer. I guess I’m lucky that I may get a chance to implement this in current development.
As always you are an inspiration.
Thanks for the article it’s fired up a load of ideas.
posted at 09:06 am on December 19, 2006 by Shaun Newman
4 Great, but needs improvement
Nice try, but I think that lots of work needs to be done to adopt this technique. Also, when I resize browser (Firefox 2.0 win) to 754px—screen_low, layout breaks. I don’t know a lot about PDAs or other alternative devices mentioned, but how about their’s Javascript support?! For now, web designers should still make different pages for different users – without using Javascript – different CSS and PHP maybe. Or am I just to conservative :-)
posted at 09:44 am on December 19, 2006 by Boris Kuzmic
5 Very good
Made-to-measure. And it is far better then one liquid layout for many viewports. Congrats. I’ll have to use it in near future.
posted at 10:57 am on December 19, 2006 by Gabriel Cenkei
6 Is this Resizing Weirdness?
And what if i would like a window with the actual “huge” layout and i resize it to a smaller size? For example i read something, then i want to copy several passages to a text file. For this i resize the Browser and start my text editor next to it. But all the interesting text suddenly disappeared or moved somewhere else. Maybe even the picture disappeared that i wanted to save.
posted at 11:50 am on December 19, 2006 by Dragan Espenschied
7 Content Reduction
I think for really small devices like PDAs or even phones you not only have to adapt the layout, but also reduce content.
posted at 12:35 pm on December 19, 2006 by Johan Schulz
8 JavaScript
Does the JavaScript detection work on all browsers (of course with JavaScript enabled)? Like for example Opera mini?
If JavaScript Detection fails you have to find a default. And the default has to be different for different user agents. So your technique only makes sense combined with some other logic.
Or, you can always choose to make a http://www.domain.com and a http://wap.domain.com (or http://www.domain.mobi).
posted at 12:56 pm on December 19, 2006 by Jochen Kurz
9 Available Screen Size
I totally agree to Dragan that you should not change the layout when a user resizes his browser window. Instead I would use the available screen size as the selector for your layout.
posted at 01:18 pm on December 19, 2006 by Peter Schön
10 Food for thought
Cracking concept, well done.
As others have said, I can see some issues ;-
- Resizing the window causes the content to change - Large images will always be downloaded (bad for mobile phones/PDAs)
Someone suggested using the ‘available screen area’, I think this alone would be a bad idea because I’m lucky enough to work with wide screen monitors (>1920 pixels) but seldom have browser windows open wider than 1280, usually around 1100.
I think if there was someway you could perhaps ‘remember’ the initial setting that the browser open the URL at, this would be a solution, though how you’d “remember” such a thing is beyond my ability.
All that said, this is a simple, yet brilliant observation. That people will be looking at your pages on many many different sized screens, allowing the to read/view the ‘meat’ of your page is the essential part.
Most deffinately, food for thought.
posted at 01:33 pm on December 19, 2006 by Paul Maddox
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)


1 Oh to dream
How I wish I could deliver a template like this to my current employer. Alas, I am still getting them to stop developing Windows IE-only apps for the general public at large. I’m happy at the moment just getting them to accept my “alternative” (ie, standards-compliant) markup with a stylesheet switcher. Well, I delivered the template eight months ago and it’s still in limbo hell.
Thanks for the article. It will be well implemented by me somewhere for someone. Just not for my current paycheck holder.
posted at 05:32 am on December 19, 2006 by John Lascurettes