• Home
  • About
  • Advertise
  • contact
Subscribe: Posts | Comments | E-mail
  • 1.RhapsodyAnything & Everything
  • 2.Web DesignStandards rule!
  • 3.Photoshop... Love Buzz
  • 4.The WebNews and Trends
  • 5.Web DevServer Side
  • 6.Hosting...for the web
  • 7.Science... DNA and Stuff

WebScienceMan

Posted on December 21, 2006 - by Khaled

The Switchy McLayout

2.Web Design 4.The Web

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!

Be Sociable, Share!
  • Tweet
This entry was posted on Thursday, December 21st, 2006 at 11:53 am and is filed under 2.Web Design, 4.The Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

504 Commentshttp%3A%2F%2Fwww.webscienceman.com%2F2006%2F12%2F21%2Fthe-switchy-mclayout-an-adaptive-layout-technique%2FThe+Switchy+McLayout2006-12-21+11%3A53%3A31Khaledhttp%3A%2F%2Fkyscorp.com%2Fblog%2F2006%2F12%2F21%2Fthe-switchy-mclayout-an-adaptive-layout-technique%2F

We'd love to hear yours!



  1. Visit My Website

    December 25, 2006

    Permalink

    Steph said:

    This doesn’t work for me, I’m not sure why? I’m dumb you know :( I’m pretty sure I have done the exact same thing as the example. Thnx anyway



  2. Visit My Website

    December 25, 2006

    Permalink

    Master said:

    Well I am not sure why it is not working for you Steph but did you remove this line

    document.getElementById(‘count’).innerHTML=fmt+’px -> ‘+cls;

    from the javascript file?



  3. Visit My Website

    June 30, 2010

    Permalink

    Facebook said:

    facebook

    All I'm looking for a site on a very large and beautiful on this site are subject to all of you very
    thanks



  4. Visit My Website

    August 2, 2011

    Permalink

    zara said:

    Discount Coach Outlet, New Arrival Coach Bags are waiting for you! welcome you to pick and purchase! Here we offer many new styles of Coach Bags at the best price. The Coach Bag looks elegant and graceful. The simple and bold design fits for the girls who have litmusless charming and b characteristic. We also offer you various choices of Coach Sunglasses, these Coach Sunglasses are extremely popular all around the world, once someone buys a pair of Coach Sunglasses from our Coach Store, they usually will not turn to other brands. We promise all our Coach products are on sale in top quality, and all our coach products are highly praised by our dear customers all over the world. Please rest assured to pick whatever you like from our Coach Outlet Online Store!



Leave a Comment

Here's your chance to speak.

  1. Name (required)

    Mail (required)

    Website

    Message


    • BreedSoftware HostGator
  • What I'm Doing...

    • RT @JohnChow: 2 Resources to Take Your Blog to the Next Level http://johnchow.com/16964 2010-11-14
    • RT @JohnChow: 2 Resources to Take Your Blog to the Next Level http://johnchow.com/16964 2010-11-14
    • RT @JohnChow: 2 Resources to Take Your Blog to the Next Level http://johnchow.com/16964 2010-11-14
    • More updates...
  • Featured News

    • FireFox will be bigger in 2009? by Khaled on April 2, 2009
    • Launching TwittHero by Khaled on March 2, 2009
    • TOP 10 reasons why my Web Design company grossed 5 million dollars of revenue in its first year by Khaled on February 18, 2009
    • 25 WordPress Plugins you need to have a better blog by Khaled on February 12, 2009
    • WebNotes: Annotate, Organize, Share by Khaled on February 8, 2009
  • Tag Cloud

    • 2.Web Design 2.Web Design 3.Photoshop Adobe Adobe Photoshop blog bookmark browser Browsers CMS color CSS DNA Facebook FireFox Genetics graphic design Graphics HTML Internet Explorer JavaScript Joomla Mozilla Opera palette Photo Manipulation Photoshop Express Photoshop tut Photoshop tutorial productivity recession recipe Safari Science Sitepoint social tutorial Twitter web web design business web designer Web Development WordPress WordPress plugins WordPress Update
  • Take a look

    • BreedSoftware
    • Kyscorp.com
    • Scriptomania
    • TunisDesign
    • TwittHero
404 Not Found

404 Not Found


nginx/0.8.53

Subscribe: Posts | Comments | E-mail

Add to Technorati Favorites WebScienceMan © 2006-2009 |Powered by WordPress| KYSCORP.COM 2000-2009| Rainbow Cliff Theme.
Optimized for FireFox 2+ | Google Chrome 1.0 + |Opera 9+ | Safari 3+ | IE7+ [Web Standards are

404 Not Found


nginx/0.8.53
" style="color:#000000; font-weight:normal; text-decoration:none;">cool
!]