how to change the stacking order for mobile layouts

I'm sorry to get your hopes up with the prospect of a helpful reply, but alas, I'm looking for answers to the same question. In addition I'd like to know if it is possible to disable or hide selected content from mobile browsers. In short I'd like to present a full site for larger screen sizes and tablets, but a much slimmed-down site for mobile.

I'm no expert by any means, but I guess it will be necessary to influence the Context module so that it recognises Omega defined media queries. That said, I guess that Context does what it does and that a media query context would need to be added; which leaves me asking if this is a job for Delta?

No idea really, just looking for help.

In the interests of extending the conversation and with your agreement, I'd like to ask if we can alter the title to 'How to change the stacking order and/or hide selected regions for mobile layouts?'

As an example of selective region/zone display, here's how to use the CSS display attribute to hide the header zone in the mobile layout:

Put this in global.css:

.zone-header { display: none; }

Put this in mytheme-alpha-default.css:

.zone-header { display: block; }

So the header zone will be visible in all but the mobile layout. You can imagine variations on that: If you wanted to hide in the narrow layout, but not in normal and wide, you could put the display: block in mytheme-alpha-default-normal.css and mytheme-alpha-wide.css.

Interesting, that opens a number of options and thank you for the suggestion. Although it makes me wonder about how efficient it is hide content with with css? Thinking of rendering times and loading for mobile devices.

Any thoughts on changing the stacking order?

There are already position and weight values and having read the documentation the difference between these two still seems a little grey. To do with visual positioning versus html ordering from what I understand; of importance for screen readers and perhaps SEO.

Should there be a third value for 'stacking'? Value 0 for hidden and n for the (mobile override) stacked order.

I guess that in time, these issues will be handled with the proposed Omerga UI module, but it would be good to have some options in the meantime.

I am not deeply into the philosophy and arguments of responsive design and "mobile-first", but in part it must deal with the current limitation that the screen dimensions are not delivered when the page is requested.

The "mobile-first" approach says, let's choose a stacking order that works for mobile, and deliver the content in that order. Then, as the screen gets wider, the media-query-driven CSS can specify the order of how the content starts lining up horizontally, using the grid CSS.

In all the grid frameworks I've seen, the grid CSS worries about horizontal ordering and positioning. The horizontal ordering can be altered with the push and pull classes (which get chosen when you change the ordering in the Omega settings page). The heights of the regions are not specified and are assumed to vary based on content.

So for instance, you might have a page with three regions (rows) that looks like:

AB
CDE
FGH

Now, you can actually deliver this in a different order, say,

AB
DCE
HFG

and have the CSS pull and push the different regions horizontally to get the first arrangement. And it's easy to have different arrangements in each row, based on different push and pull classes. But there's no easy way to change the order of the rows, to, say,

CDE
AB
FGH

If you knew the heights of the rows, you could use negative margin-top and margin-bottom values to pull things up and down, but typically you don't know the heights.

(Maybe this whole post is just telling you something you already knew.)

As for the efficiency of just hiding regions, yes, that's an objection. If you just want to remove background images then you can just not include them in the mobile CSS. If you want to hide content then you're stuck just throwing it away.

If you use Javascript, or look at the user agent string when the request comes in from the browser, then of course you can load exactly the content you want. See for instance, http://marionobledesign.com/my-blog/additive-content.-an-alternative-to-..., which loads extra material with Ajax. I also found this contrarian viewpoint about responsive design: http://www.webdesignshock.com/responsive-design-problems/. But read the comments, because there's a lot of back and forth.

(Maybe this whole post is just telling you something you already knew.)

Certainly not and I thank you for taking time to explain the issues. I need to re-read your pointers and change my thinking a little.

I'm not worried so much about the order as I am about hiding certain regions. For mobile displays is it simply no more or less than a matter of display: none in the style sheet, as indicated earlier? Or is there something else.

Hi RKopacz,

In theory you can simply hide this with CSS, the main issue is the content will still get loaded, just not shown.

For instance if you had a carousel with several images on a desktop version but just wanted 1 image to display on the mobile version, you can just create 2 blocks (1 for desktop carousel, 1 for mobile displaying a single image).

Then use display: none to hide which ever block for whatever screen width.

The mobile version will still be downloading the desktop carousel block with all its images etc. which of course will eat up the mobile users bandwidth and the site load times would be impacted as well

How would I, for example, have a block that is up top right of the navigation on the responsive layout but down at the bottom just above the footer for the fluid layout?

just have 2 blocks in the different positions and use css display to show or hide the appropriate one.
That is what I would do.

In theory, depending exactly where you want this block to display, this should happen by default with the Omega theme and setting the weights. (I've got a similar thing happening on my site using the "tej" subtheme for Omega"

Alternatively, as 2pha mentions you can do this with the style sheets. Omega gives you several different style sheets that activate depending on the media queries set. Off the top of my head you get something like:

global.css = CSS for all layouts
wide.css
narrow.css
etc.

Media queries will use the relevant style sheet depending on the min/max width dimension you set.

therefore you can set 2 blocks, one for a mobile device and another for a wider screened device and then hide each one depending on the width.

Maybe it gets the job done for extremely light bits of content, but that's not an ideal way of handling it since everything will be downloaded twice. Is there no way to hook into the same bit that is re-arranging the sidebars? Or is that all done with CSS? I know I've seen responsive websites where the actual markup changes.

So the two ways to move content on the mq changes is either by altering the weight (which only works within the region. Or to create a custom script using the mediaqueries.js and http://drupal.org/node/1478648 to move the entire html contents using append/prepend functions in jquery.

I've used both to great success in sites (the one with custom scripting can get really advanced moving around not only elements but also re-assigning column counts etc.)

Like pointed out above you can change the weight to change the stacking order. This has limits because the blocks won't leave their section/region.

Adaptive themes has integrated browscap module to determine if a site is mobile and lets you make blocks disappear from regions altogether. That even avoids loading them. Not sure how well they allow to distinguish between tablets and smaller screens (see below).

You might want to try to use the browscap and mobile tools modules to emulate this. The bad: browscap is 'in transition' because the 'browser capabilities project' is being moved. Worse: it sees tablets as mobile too, thought these are often able to render the website 'normally' due to their bigger screens.

IMHO - browscap isn't the solution it's a workaround. As you've pointed out with the tablets etc. on the market now the screen sizes are varying but their capabilities also vary. Can you sniff out the user agents and do some block shifting on it with these modules, yes but I don't think it's going to make it into Omega core simply because of the fact that it's not the ideal solution.

With responsive sites we should be looking for more universal solutions than user agent strings which can become quite a mess when you have multiple devices with multiple capabilities using the same user agent string.

If you have to do some sort of block switching then yes browscap/mobile tools may be the best option but in an adaptive/responsive site you should be finding more universal solutions

If you have to move around a lot of image or views elements, loading the page elements twice is seriously slow. You can instead take a queue from Omega: http://drupal.org/node/1478648, and rearrange the page with jQuery. The jQuery function .before takes care of the magic for us.

// Move one field before another when the normal layout loads.
(function($) {
  Drupal.behaviors.myCustomBehavior = {
    attach: function(context) {
      $('body').bind('responsivelayout', function(e, d) {
        if($(this).hasClass("responsive-layout-normal")) {
          $(".field-name-field-title").before($(".field-name-field-youtube"));
        }
      });
    }
  };
})(jQuery);

added more details

Do you have to code for the desktop, and then conceal content from mobile with CSS?

Can't you code mobile, then have desktop content load later on or not at all?

Can you code so that "if screensize is less than X, do not load following:"?

JMunce - If you're talking about doing ajax requests for desktop content after the page loads you can surely do that. However from the module layer (php) there's no real good or reliable way to sniff out the device.

To counter your point though - Is there a way you can make the content work for all screens and just adapt it as necessary rather than changing the whole layout/content as well? I've found that from a user experience point of view a mobile user doesn't necessarily want different content than the desktop user, just content that works on their screen/device.

Move it to latest supported version, not that what we are discussion here is very Omega specific, but more a generic question about web-techniques.