... and why only one way is best.

Using media queries in Drupal is no different than how they are used on any CMS or custom application. But there are a few things to keep in mind before you send your site live.

One of the easier ways to try out the media querie on an existing site is to include it in the stylesheet link in your themes info file. The format is exactly how it would be in the media attribute of a link tag. Simply change this

stylesheets[all][] = styles/layout.css

stylesheets[all and (min-width: 960px)][] = styles/layout.css

One of the biggest challenges front end developers face is having different browser versions on different operating systems display the page consistently. Even if you build your page with Firefox or Chrome on Windows, the page may display differently on those browsers with the Mac OS or Linux. Part of the reason is that each browser has it's own default stylesheet. One browser may use more padding on an unordered list while another may use just margin.

Some of the advantages of CSS3 are that you can now create effects on your page with code that used to require images. Not making calls to the server for your sites decorations can greatly increase page load times. Unfortunately, no versions of Internet Explorer available today can handle these new advances in CSS. IE9 will support most of the new features, but that has yet to be released and since it will only run on newer versions of Windows, developers will have to rely on using images to make their sites look consistent across browsers.

I am not a developer but I can only imagine the frustration of not having a simple template to follow for the new FBML tabs. Lo and behold the new 520 Grid System!! If you're used to the traditional 960 Grid System this will come easy for you.

As a Web designer, I like to approach the design of any site as efficiently as possible. Long before I even became interested in Web design, I stumbled upon the art of information architecture, which is basically a complex map of information. As a primarily visual learner, I took information architecture to the next level by expressing information visually as opposed to textually. My fascination with mapping led me to what I consider my primary source of inspiration: maps!

Firebug is one of the greatest plugin for developers to troublshoot a web design. The problem is it is only available for Firefox. So when you get that javascript or css bug that only shows up in IE, it is many times more difficult to troubleshoot with out the power of Firebug.

Luckly Microsoft has released an alternative to Firebug for IE called the Internet Explorer Developer Toolbar. You can download it for free at the url.

Cascading Style Sheets (CSS) is the styling language developed by the W3C for use in conjunction with a markup language such as HTML or XHTML. Its power is in the fact that the information can be stored in various scopes, and the cumulative effect of all styling rules is computed before rendering the final design in the browser. When used with sufficiently semantic markup, it is a very flexible way to completely style a website, separating the presentational details from the content itself.

Coda
Coda is an amazing multipurpose program created by Panic Softare for the Mac OS platform; it combines a text and CSS editor, FTP program (based on the already wildly succesful FTP tool for Mac, Transmit), terminal, web previews of your files, and even has a built in version of The Web Programmers Desk Reference. I absolutely LOVE this program because it eliminates the need for having multiple applications open and streamlines my web editing and uploading process. Unfortunately for PC users, Coda is only available for Mac.