The Mobile First Approach

Saying "mobile first" in reference to web design & Drupal theming is not just a mentality or something people say. It literally means designing the mobile theme first and then adding CSS as needed.

Here's an example: a site contains a large background image but the user is on a mobile device. To optimize for the smaller screen, the background image is typically hidden from mobile browsers using the "display: none;" declaration in the stylesheet. That "hidden" image must still be downloaded, however. The only way to not initially load an asset is to exclude it from the site's default stylesheet. By making the mobile stylesheet the default and using a media query to add in the background image for the desktop theme, the page is better optimized for each browser.

In Omega, this "mobile first" approach begins by loading global.css regardless of the user's device. The global.css file contains basic design elements. CSS3 Media queries then determine the width of the window and adds stylesheets until the proper width is reached. This "layering" occurs in the following order: "default", "narrow", "normal" and, lastly, "wide".

Here are Omega's built-in break points and their associated stylesheets as determined by the theme's built-in CSS media queries:

• 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