User Interface Design : Switchy McLayout Technique
Many times, I have wondered about how to handle UI for the wide-screen displays. Liquid layouts worked well, but in resolutions such as 1600, they create good amount of accessibility issues. I strongly thought about using javascript and CSS, to manage multiple resolutions. But never found any solid workaround.
Today, I came across an excellent article by Marc, at A List Apart, describing the Switchy McLayout technique, which uses the JS and CSS to handle UI according to the screen size available. Thats way cool. 
Here is the link about the Switchy McLayout.. and some excerpts below.
| Quote: |
| CSS-based liquid layout has proven successful during the reign of 800-pixel to 1024-pixel screens, but as we use a wider range of devices to access the web, we need more powerful and flexible ways of managing layout. If we want to serve devices whose viewports range from 240 pixels to about 1680 pixels—and with resolution ranging from 72 to 150 pixels per inch—we need a new method.
What’s the problem with liquid layouts? If you create a liquid layout optimized for a maximum width of 1024 pixels—limiting maximum line-lengths for your text to maintain readability— gaps will appear on a wider screens, and your carefully balanced layout will break. On a tiny-screened PDA, your text and images will be compressed into a crowded content sandwich. No designer wants that. If vector-based layouts were technically possible on a wide range of browsers, we could use a single generic layout that looked exactly the same on all screen sizes. Since that’s more fictional than feasible, we have to find another way. …. Switchy McLayout to the rescue Switchy McLayout lets you define the dimensions, information richness, and appearance of your content objects for set ranges of screen sizes. A news site, for example, could have one layout and appearance for wide screens, one for medium-sized screens, and another for PDAs. Images could shrink or even disappear according to the screen size, columns could come and go as needed to maintain readability, and you can achieve a more efficient use of the available space for each screen size. |