One Newbie's Understanding:
For the last few days I have been trying to get my head around the Omega 3.x theme's grid layout settings. This article attempts to describe my understanding of these settings. I am not a Drupal or Omega theme expert by any means, but someday I would like to become one and I believe that writing these articles helps me achieve that goal. This confession should also be interpreted as a disclaimer or warning to those reading this. I probably have misunderstood a thing or two, and in any event, the Omega 3.x theme is in Beta 1 as of this writing and is changing often, so use this information with caution.
Enabling the Responsive Grid
Near the very top of the Grid Settings section is a check box to "Enable the responsive grid". This is the heart of the Omega theme.
It is what allows you to resize the browser window, or display the page on different devices, and control how the page is styled. It is absolutely impressive to watch a web page change its layout to accommodate the size of the browser window in real time! This feature is what made me decide to standardize all my web building efforts around the Omega base theme.
The current version of the theme comes with four built-in layout sizes; Narrow (720px), Normal (960px), Wide (1200px), and Fluid (%width). These are listed in the Grid Settings section of the theme's setting. You don't want to confuse these with the "Grid System" selection, which is set to "Default (960px)" by default. Depending on what theme you are using for your administrative theme, you may need to scroll down, or un-collapse some headings to find the settings for the Narrow, Normal, Wide and Fluid layouts.
The Fluid layout in not checked by default is is meant only as an alternative to the Narrow layout. You will also find a selection for "Primary layout", which is set to "Normal" by default. As the help text states, this setting determines which layout to use if the "Enable the responsive grid" check box, located at the top of the settings page, is not selected. Below that, each layout has a selection box to "Use this layout with the responsive grid". In most cases you will want to select the Narrow, Normal, and Wide layouts. By selecting these, code is placed into the <head> tag area of the web page to load CSS stylesheets that control the styles for each of these layouts. I will discuss the "Weight" setting a bit later, but for now let's turn our attention to the "Media query" input text box.
Having never seen a media query before in my life, I knew I had a lot to learn when I scrolled down the page and saw this in the Normal Layout ~ Media query text input box:
all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)
At first glance, this looked like an inscription you would find on a strange piece of metal on a ranch near Roswell, New Mexico! Luckily the setting's title, "Media Query", gave me something to search the internet on and I came across a ton of pages on the topic. Some are more technical like Media Queries W3C Candidate Recommendation. The best one I found written for people that cannot interpret alien hieroglyphics was at http://css-tricks.com/. Reading his article on "Different Stylesheets for Differently Sized Browser Windows" gave me a clearer, but child-like understanding of Media Queries, and luckily was relevant to how the Omega theme actually uses media queries.
What is a Media Query?
In its most basic form, it is a way to swap out one stylesheet for another, based on condition(s). Let's say you wanted to use a different CSS stylesheet for your web page depending on whether it was being viewed in a browser or being output to a printer. That represents an excellent use case for Media Queries. Another is to swap stylesheets based on the size of the screen trying to display it, like mobile vs. desktop web browsers. The Omega theme, in an effort to be responsive to browsers' different and changeable viewing area, uses media queries to try to swap out CSS stylesheets based on data reported by the device itself.
Interpreting the Media Query Input Text Box
The media query input box 'default text' for the "Normal Layout" in the "Default (960px) layout settings" area listed above can be broken down as follows:
all - the target media type the styleseheet will apply to if the "condition" is met. As the name would imply, "all" indicates the stylesheet applies to all media types, including those such as ‘screen’ or ‘print’. Other types include ‘braille’, ‘handheld’, ‘projection’, ‘tty’, and ‘tv’.
and - AND is Boolean logic that results to "TRUE" if the condition before the AND and the the one after are met. (I thought about telling a humorous Boolean story here, but everyone would wonder if it was TRUE or FALSE.)
(min-width: 980px) - min-width refers the the viewport (viewable page area) in CSS pixels of the browser window or the <HTML> tag default width. This is different from the "browser size". If you were to add a Firefox extension like FirePicker (also known as FireSizer), you would quickly find that the browser window size is not the same as the viewport size. Browser "chrome" elements like scroll bars are the among the reasons for the difference. The condition being tested here is that the viewport width is greater than 980 pixels. Humans would probably prefer it read (min-width>980px), but those Roswell aliens are colon retentive.
and - Here is another one of the AND's, so we keep adding conditions that must be TRUE to the list of conditions
(min-device-width: 980px) - okay, this is where the aliens try to confuse the normal human being. This looks strangely familiar to (min-width: 980px). The "device" part signifies the physical screen pixel capabilities of the device displaying the content, as opposed to the size of the browsers' viewport CSS pixel area being displayed on that screen.
, - This barely perceptible comma is alien hieroglyphics for the Boolean OR logical expression. I've been to Oregon (OR), and if you remove an "m" from the word "comma", you would understand how the aliens got confused. In human speak, it means that IF all the conditions before the comma OR all the conditions after the comma result in TRUE, the entirety of the phrase results in TRUE.
all and (max-device-width: 1024px) and (min-width: 1024px) - I think we can now discern this section of the media query given the information presented above.
and (orientation:landscape) - quoting the W3C: ""The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’. " In human speak, if your browser viewport is wider than it is tall, it is in landscape "mode". This condition adds that test.
A Human Interpretation of the Media Query
After all that, what does the media query above really mean? Well, according to the "Hitchhikers Guide to the Media Query, Second Edition, Interpreting Alien Hieroglyphics for Fun and Profit", the above tests for the condition:
If you are any type of media device, be it a desktop PC, mobile phone, etc., and your browser window is open to at least 980 pixels and your physical screen size is capable of displaying that size window without scaling, or even still, if you can do the same thing at 1024 pixels when the width of that window is greater than your height, then I have a stylesheet I want you to use.
Width: A Visual Representation of my Mental Image
When I think of 'width' versus 'device-width', it is easy for me to get confused. After reading many articles about their differences, I created a mental image of what those differences are. By studying the image below, you too will have this same mental image and it will be stuck there forever each time you read a media query string! (Evil laugh!) The thing to take away from this image is that even though the device-width is changed, the web page width has not. If you want your web page to fit into a device-width of 640px, then you have to style your webpage for that width, test for it on the device that is calling for the page, and serve up the correct and targeted stylesheet with a carefully crafted media query.
Media Queries: All for not?
Now that you might have a better understanding about how Omega uses the Media Query to target a device's web browser with the appropriate stylesheet, you will be disappointed to learn that this can be a lot of work for nothing! Why? As Jakub Suder explains quite well in his article Tips for creating mobile sites... Devices Lie! Like the height and/or weight on a woman's driver's license, the device "width" reported by a mobile device should be taken only as an approximate.
The myth: min-width and max-width
Mobile browsers like to lie about their true size in an effort to make web pages that were not specifically designed for a smaller screen look "better". A mobile phone might have a device-width (screen size) of 320 pixels, but lie about their viewport size and say it was 980 pixels, then scale the web content to fit. If you tried to target that mobile phone with a "(min-width:320px) and (max-width:480)" media query condition, it would result in FALSE because the mobile device is a dirty rotten lying scoundrel.
The myth continues! min-device-width and max-device-width
So now that you know not to trust those nasty little mobile devices to tell you the truth about their viewports, you decide to pull out the truth serum and ask them how many pixels their screen size really is with the 'device-width' media query condition. They are forced to tell you the truth that it is in fact only 320px. (The nicer devices sometimes apologize for lying to you and offer to buy your dinner.) If you target your media query conditions to catch this with "(min-device-width:320px) and (max-device-width:480)" you will get the stylesheet you want selected, but the mobile device would then scale the web page three times its size to a 'simulated' 980px and make your carefully crafted and targeted stylesheets for that beautiful mobile web page "look as if you opened the mobile version of the site in a desktop browser", as Jake puts it.
So how do you solve the problem of the deceptive device width? The Omega theme tries to deal with this by using the <meta viewport> in the <html> tag, but his is a topic for another article.
Watching your 'Weight': A Final note
It is possible to define several media queries (by checking the boxes for Narrow, Normal, and Wide) and for some or all of them to result to TRUE. So how does the Omega theme resolve this possible conflict? That is where the "Weight" checkbox comes into play. While all layouts with a checkbox selected that result to TRUE will be added to the HTML code for that page, the media query with the 'heaviest' weight will be listed last and therefore take cascaded precedence over the others. So be sure to make the correct choices here. Carefully crafted media queries, together with the Weight selector make for infinite possibilities of CSS style!
Acknowledgements: I'd like to thank Jake Strawn (@himerus) for creating the Omega theme and Sebastian Siemssen (@thefubhy) for his support and patience in helping me understand some of the Omega 3.x theme's inner workings.