Drupal/Omega

http://drupal.org/node/819168
The Mobile First Approach

When people say "mobile first" in referring to web design & theming, it's not just a mentality or something people say in a "the way it ought to be" sort of sense. They literally mean, designing the mobile theme first, then adding on CSS for tablets, desktop, and wide desktop themes. In a technical sense, it means that the global.css that contains the basic design elements of the site is loaded no matter what device you are using to view the website. Then, CSS3 Media queries determine what the size of the window is and additional stylesheets will be tacked on; either "narrow", "normal" , or "wide" - depending on the width of the device.

If the desktop version of a site is loaded first, and then media queries discover that the user is viewing using a mobile device, the only option at that point is to hide some assets from mobile browsers. Using "display: none;" only means that the asset isn’t shown — but the user still has to wait for these images to download. The only way to not initially load an asset is to not include it in your stylesheet. The way to achieve this is to make the mobile stylesheet the default, and then add in the large background images and extra styles for the desktop theme using a media query.

The Omega Theme for Drupal 7 comes with built in CSS media queries that determine when to load specific stylesheets:

    0px to 740px wide - global.css
    741px to 979px wide - global.css + default.css + narrow.css
    980px to 1219px wide - global.css + default.css + narrow.css + normal.css
    1220px and wider - global.css + default.css + narrow.css + normal.css + wide.css