Switchy McLayout: An Adaptive Layout Technique

by Marc van den Dobbelsteen

57 Reader Comments

Back to the Article
  1. I love the concept, the implementation however leaves a little to be desired.  I’ve added a subtle example of it to my website:

    http://www.dunedinicehockey.co.nz/

    On resizing to <640px the page border dissapears showing real content in it’s place.  The information boxes at the bottom of the home page also shift around.

    The thing I don’t like is that my borders pop back into place for a few seconds whenever you switch to another page :(  So although the concept is sound, in reality there are still a few issues with it.  I’m happy with it in it’s current form on my site as below 640px you really do need the extra screen area, so a bit of flickering on page changing seems like a reasonable tradeoff, but for use in common browser widths I see there being significantly less use for this technique.

    Copy & paste the code below to embed this comment.
  2. As I was reading this article I thought it was great. But after I thought about it and changed idea.
    quickly:
    1. This solution affects the window-resizing. If I resize my window I’m going to see disappearing elements. It’s confusing and unusable.
    1b.As written in a post before,I could have problems while printing page.
    2. The elements flicker.
    3. If the real problem are small displays, we can use the Css media type switchers display|handled|print etc etc. This would be the simplest and best practice for small screens.

    Copy & paste the code below to embed this comment.
  3. While I was reading your article I was asking myself whether this way of implementing a layout got it the wrong way around. In my opinion web-design should not be too much focused on the users choice of the UA or OS in order to deliver the best possible and pixel-precise design, but instead a web-designer should strive for the most convenient way of presenting content.
    If we all end up in designing 4 different CSS for 4 different viewing conditions we may find ourselves at the entrance of a one-way-road. As others mentioned the technique is neither future-proof nor is it useful for most users (since when am I forced to see a different layout, just because I decided to maximize my UAs viewport?). But worse: what will happen to those poor souls who rely on the ability of their UAs to enlarge the content via [ctrl]+[+]? They will see the layout the designer decided to be the best for their initially chosen viewport size, which may not be the best solution in an enlarged view, as enlarging means reducing the relative size of the viewport.
    Why are we still using techniques relying on absolute pixel-precise positioning instead of developping solutions that rely on relative units like ‘em’? An entirely ‘em’-based CSS would allow the perfect representation of any sort of content in any UA regardless of the UAs viewport size. And please, use the media-selector in your CSS-definitions in order to address certain types of UAs.

    Copy & paste the code below to embed this comment.
  4. I think these blog is really useful for new comers and Excellent resource list.

    Copy & paste the code below to embed this comment.
  5. though i am inclined to agree that on resizing my window i don’t like to see things disappear and reappear differently. still its an interesting methodology and makes sense in many but obviously not all web dev. tasks.

    Copy & paste the code below to embed this comment.
  6. Another fantastic article on ALA.

    I used both my PC and my mobile phone (Sony Ericsson K800i) to play about with the examples, and they work well. I also turned JavaScript off in Firefox using the Web Developer extension and the content in the examples was very well structured.

    It’s not something I’d look into producing myself just at this moment, but I’m definitely adding this article to my favourites for the near future.

    Copy & paste the code below to embed this comment.
  7. I dont mean to be a big bubble burster, but the code / sample page is not suited to real-world deployment.

    Consider the PDA. It will load in the full page, THEN adopt to the PDA styling. This will waste the low resources of the PDA and also the bandwidth. (If you check the CSS, even though it only shows a small portion of the image, its just cropped – the whole thing must load in!) – I’m sure you can continue this line-of-thought…

    The better, and dare I say RIGHT, method is to check the Headers sent to the website and then decide what to do for the User Agent.

    Mind you, the mobile industry have done very little to help the developers (and themselves) as concerning headers. I did read an outline document by the IETF specifying recommended headers to send, useful things like: dimensions (inner and outer), resolution (PPI) and colour. Possibly more. Of course not all devices can agree on what to send, and thus User-Agent is still your best bet.

    Copy & paste the code below to embed this comment.
  8. A great article.

    Personally i’m surprised there isn’t many sites optimised to the users screen resolution. Maybe this is “web 3.0” ?

    I think that at this point there is no real alternative than to make a separate site for mobile. Developing for mobile is like developing for email, semantics and best practices are not the way… The javascript/css support just isn’t there yet.

    Copy & paste the code below to embed this comment.
  9. I find this absolutely del.icio.us; great article, easy implementation. Thanks!

    Copy & paste the code below to embed this comment.
  10. Interesting amalgam of already popular techniques. But this technique is not a revolution, so why do you name it “Switchy McLayout”? It doesn’t sound serious.

    Copy & paste the code below to embed this comment.
  11. …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.
  12. What a nicely presented article.  Great visuals!

    Copy & paste the code below to embed this comment.
  13. 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.
  14. 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.
  15. 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.
  16. 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?

    P.S.

    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.
  17. 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.
  18. 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:
    http://www.apptools.com/phptools/browser/source.php
    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.
  19. 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.
  20. IE reads my index page for screen size but not any others on my site when implementing switchy mclayout.

    http://webdesign.tntech.edu/Design/ILO/index.php

    any ideas?

    Copy & paste the code below to embed this comment.
  21. 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.
  22. 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:
    http://www.mineisbetterthanyours.com/test/switchyBug/
    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.
  23. 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.
  24. Your technique only makes sense combined with some other logic.

    Copy & paste the code below to embed this comment.
  25. 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.
  26. Awesome post, awesome discussion. I got enlighted for my new project. @All: thanks!

    Copy & paste the code below to embed this comment.
  27. 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.