Last updated 14 January 2013. Created on 5 June 2010.
Edited by jay-dee-ess, Mark_L6n, Elijah Lynn, banghouse. Log in to edit this page.

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

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

claudiu.cristea’s picture

Is "0px to 740px wide - global.css" line correct? Shouldn't default.css be loaded for mobile too?

Claudiu Cristea | Webikon.com

sammo’s picture

This is the way it works. However, as narrow is inherited by all non mobile versions, I'm not quite sure what you would put in default.css that you couldn't put in narrow.css. Any ideas?

TelFiRE’s picture

What would be the point of default if it just loaded in the exact same places as global? No, it's only for desktop/tablet styles.

global.css -- Loads for ALL. This is where your mobile styles go.
default.css -- Loads for desktop (all but the flexible, mobile layout). This is where your desktop styles go.

And then of course the others are for specific view tweaks.

jacobson’s picture

I wonder whether most readers will understand how the choice of a .css file determines what content is displayed. I candidly do not. In my understanding, Drupal will deliver whatever content is requested by the combination of .tpl files that make up the page. The .css files, as I understand things, only determine HOW that content is displayed. This handbook page needs to explain how / why the layering of .css files affects the content delivered to the user device.

jacobson’s picture

Below is a link to a very good presentation by a fellow from Four Kitchens. The presentation explains "responsive design" concepts and helps to clarify that the same content is delivered to all devices no matter the size (except any content that is specified by CSS, such as background images).

http://drupalcamp24x7.org/tutorials/responsive-drupal-7-theming-how