Switchy McLayout: An Adaptive Layout Technique

by Marc van den Dobbelsteen

57 Reader Comments

Back to the Article
  1. …so how would you approach this technique for email? end users could be on an array of different devices and clients (which largely block js), and the sender wants an image-rich delivery to those able to view it.

    thoughts? discussions? articles? thanks!

    Copy & paste the code below to embed this comment.
  2. What a nicely presented article.  Great visuals!

    Copy & paste the code below to embed this comment.
  3. First of all I’d like to thank everybody who has joined the discussion or who has cracked his mind on this technique before. To empower the discussion and give it some direction i’d like to clarify some things about this particular adaptive layout implementation.

    Like some people commented, the techniques used in the examples aren’t that new or groundbreaking. Nor will it pretend to be most ultimate solution for the specific
    problems whe have to deal with. The goal behind this particular implementation however is.

    This article is definitly not about page-layout but it has a distinct focus on the appearance of content items on the page in relation to the device whe use. Information richness, dimensions and appearance can be changed depending on the available screenarea on different devices.

    The demo’s are created with just one goal in mind, demonstrate and clearify the mechanism. They are no cut ‘n paste solutions. So things like realtime-change-of-content-on-resizing like we use in the demo’s is certainly not usable. Instead, as stated in some comments before, define screensize once at pageload. 

    For me this article is a way to shake-up the css layout revolution. Nothing new has been introduced for some years now, and that worries me. Especialy the introduction of widescreen devices will eventualy create a new mind-set. While available screenarea on handhelds is very sparse, we got plenty of it on our widescreens. So following questions will rise:

    How to handle this whole bunch of unused screenarea?
    What can we do with this screenarea?
    How does it fit in our webstandards way of building?

    Well now, let’s take this example further. So modify it, implement it, polish it, talk about it, discuss it, let creativity lead us to some new idea’s and concepts. we are curious by nature, so let’s innovate!



    Copy & paste the code below to embed this comment.
  4. It took me only a few hours to design a small site with low medium and high resolution.
    A few minor ajustments to the script and it was very usefull. Dergrades gracefully, is unobtrusive. When you start with a nice low resolution version, it looks nice on a celphone, pda highres display without javascript.
    The extra time you need for the extra css versions is with a good practice of cut and paste minimal in compare with the results. My thanks to Marc for the idea. Just try.

    Copy & paste the code below to embed this comment.
  5. I have just finished reading this article and view all the code, as I am designing a brand-new web right now for wide screen, I think I have found thr right answer here.:)

    Copy & paste the code below to embed this comment.
  6. You discussed what happens if JavaScript is disabled, but I question if this technique really works in most cell phone and PDA web browsers.

    I have personal experience with trying to view “normal” web pages with the built-in web browser on my RAZR smart phone, Opera-Mini on a cell phone and a PDA and the PDA’s builtin web browser.

    They all seem to ignore CSS.

    So I guess it comes down to this question.  Is CSS support for PDAs and Cell Phones is too poor for this technique to work in the real world?


    You could use this technique to control screen layout, but using it to eliminate displaying large media files seems futile.

    As someone else mentioned – having to wait for the full content of the largest display supported to be downloaded before you detect that the device is really just a cell phone is a tremendous waste of bandwidth and time.

    Copy & paste the code below to embed this comment.
  7. Maybe I’m just late to the party and declassé – maybe it’s not new in this article – but the thing that really caught my eye was in the second example, the degradation of columns into tabs.  Kudos to Marc if that’s your innovation.

    Copy & paste the code below to embed this comment.
  8. So this plan works well for simple pages like the example page, but what if I have some sort of a flash presentation or navigation system that I would like on the main page? Is there a way to determine if the browser is Portable, and then send the viewer to a different page?

    The viewer visits the page on a regular Mac/Pc and gets index.php, but then if they have a Portable they get send to indexportable.html or something like that?

    I did find:
    in my searches, but I am not sure if does exactly what I am looking for.

    Copy & paste the code below to embed this comment.
  9. I see a lot of use for a technique like this, but not necessarily as many of the commenters have assumed.  I see this technique more as a “progressive enhancement” than “graceful degradation”.  That is, rather than use it to provide a more seamless, light-weight website for mobile devices, I’d use this to provide a richer, more fulfilling experience for those with wide-monitors and higher resolutions, which are almost an equal reality these days as mobile devices.  I’d use it to add less-valuable content or simply mere decoration for those larger resolutions, and not to restrict content from those with smaller resolutions or less-capable devices.  As previous comments have indicated, there are more-direct ways of accomplishing that.

    Copy & paste the code below to embed this comment.
  10. IE reads my index page for screen size but not any others on my site when implementing switchy mclayout.


    any ideas?

    Copy & paste the code below to embed this comment.
  11. I´m thanks for this website i have more information fo webdesign and css learning and inspired.

    Copy & paste the code below to embed this comment.
  12. I know the point of this article was the javascript, but I also want to use this resolution-based column remapping technique you used in example 2.  I really want to use a form of this technique, but I am new to using css.  I think this is a potential bug in your screen_med implementation and hopefully it is an easy fix.  To see the bug, go to my example here:
    All I have done is copy and paste the last paragraph to make body tab A longer.  When you do this and view the page in screen_med, instead of the layout being A B on one line followed by C D on the next, the order becomes A B followed by another “line” which has blank space and then C on the right column, and then the D section wraps back onto a 3rd “line” and is on the left.  Does anyone know how to fix this?  I just want there to be 2 columns that properly follow each other without any weird space.  Thank you.

    Copy & paste the code below to embed this comment.
  13. Its also crucial that they do this without the css defining a fixed height of how tall each section is going to be… (although how tall is not what matters, it just matters when they aren’t the same height).

    Copy & paste the code below to embed this comment.
  14. Your technique only makes sense combined with some other logic.

    Copy & paste the code below to embed this comment.
  15. I am very interested in using a simplified version of this on the new (all css version) of my site, but I notice it doesn’t work in IE5. You always get a clientWidth of zero. I don’t know much jscript. Anyone know how to get round this?

    Copy & paste the code below to embed this comment.
  16. Awesome post, awesome discussion. I got enlighted for my new project. @All: thanks!

    Copy & paste the code below to embed this comment.
  17. It is not quite the same. But similar enough to be mentioned: Another possibility is to use a CSS
      * container with overflow:hidden and fixed width combined with
      * (sub)containers with fixed height. As many columns are displayed as possible (this means, part of the content won’t be visible on small screens.)

    Copy & paste the code below to embed this comment.