Adapt.js: More efficient responsive design

As the mobile space continues to grow, there has been a growing interest in Responsive Web
Design,
making use of CSS media
queries to selectively target
device screen size and layout orientation in CSS stylesheets. But asJason
Grigsby points out, media queries have
substantial
drawbacks. Since media queries only filter styles and (and related image assets) on the client, you may end up pushing a lot of data down to the client that the user may never see. In mobile applications, this is extremely costly.

Nathan Smith, JavaScript hacker and
creator of the 960 Grid System has releasedAdapt.js, a lightweight JavaScript library that
will let you specify a list of stylesheets and the screen sizes for
which they should be loaded:

When your page loades, the appropriate layout is written to the <head>
of your document based on the screen width of the page. If you enable thedynamic setting, additional stylesheets will be fetched when the user
resizes the browser window or rotates their mobile device.

Silver bullet?

Nathan admits that every project is different and there are tradeoffs
between stylesheet size and extra network hops:

As with any area in which technological approaches are open for
debate, there is the danger of religious fanaticism, where we each
rally behind a respective method and defend it vehemently. I would
caution you to weigh the options, consider mobile users, and choose an
approach makes sense for you.