The Switchy McLayout

Posted in Web Design, Web and technology by Khaled on December 21st, 2006

The Switchy McLayout is an adaptive layout technique that allows the designer to define a layout for wide display, one for medium-sized screens and one for hand held devices and PDAs.
And no this not like liquid design because when you design a liquid template that is optimized for a maximum width of 800 or 1024 px you will have a broken layout with gaps if the site is viewed on wider screens, moreover on the small screened hand held devices and PDAs the text and the graphics will be compressed together, so that’s quite a major issue in my opinion! The switchy Mclayout could be a nice solution to solve such issues it behaves as if your layout were a ‘vector’ graphic that scales up and down without loosing quality. Of course it is not as perfect as that but it is a nice and a very useful technique. As I said it defines a layout for each kind of screens.
After defining a range of layouts, the technique consists on detecting the user’s screen width in order to use the appropriate style for that size thanks to a style-switching technique that depends on the class of the body element. This is done thanks to a some nice unobtrusive JavaScript code…

All in all you will see that with the switchy McLayout technique helps designers take as much advantage as possible of the available screen space. This is really useful due to the unceasingly increasing number of the screen sizes for the devices used to browse the net. This technique can help you with such a big challenge.
Still Hungry for further details? find more here!