Best approach for loading a sidebar Only if the screen max-width is >900px?

Question

I have been playing around with media queries quite a bit lately and I love the concept. It is so easy to display images or change div floats depending upon what the users screen max-width is.

I'm trying to find a way of displaying a custom sidebar on my template Only if the users screen size is large enough to permit it. i.e. max-width is >900px.

So far every solution I have found simply uses css to hide/show a div via the media query.

example:

@media screen and (max-width: 880px) {
#secondary-nav  {
    display: none;
}

The 'problem' with this approach is that I am still sending the data to devices that can't see it due to my hiding it. Creates unnecessary bloat for mobile users.

What I am looking for is the best approach to loading the sidebar only if it fits my 'rules'. Also, it needs to readjust itself if the viewer changes the browser window size, like when snapped to side in win7.

I did find one concept of using javascript to check the screen width, and save that to a cookie: http://www.yiibu.com/resources/scripts/default.js

I'm guessing at that point, there would be a way of checking the cookie 'width' data and then serving up the sidebar or not.

The only problem with that is what happens if cookies are not enabled?

also, what happens when screen size changes, does that mean the cookie is being set/unset over and over again?

Anyhow, I am really open to ideas on this one, as this is virgin territory for me.

The primary idea here is to serve up device appropriate wp templates without sending data to the users device that is hidden for smaller screens. After all, mobile data is kind of expensive, so I want to do all I can to help my users out.

Answer 1

On my website I load the recent comments per AJAX for window sizes above 480px:

if ( 480 < jQuery(window).width() )
{
    jQuery(document).ready(
        function()
        {
            jQuery.get('http://toscho.de/?rc', 
                function(data)
                {
                    jQuery(data).insertBefore('#inner');
                }
            );
        }
    );
    jQuery('#posts').after('<div class=clear>&#160;</div>');
}

This code is quite old and not very elegant. But it may give you a hint for the right direction …

Answer 2

This is no way around this that I know of, it is one of the problems of media query's and CSS. I often see whole sites just using visibility:hidden; or display:none;. Your best bet is to just create a seperate page for mobile vs desktop, or use elements that can be very fluid ( not dynamic). I'm sure you can hack something with JavaScript and cookies but the end result will most likely be very problematic and have a hard time with compliance.

This is a solid read: http://www.alistapart.com/articles/responsive-web-design/

Answer 3

I think the least hacky way to do this would be to look at useragent at the server level and serve a full width or mobile theme based on that. Within the themes you could then further show/hide elements based on actual viewport width and be a bit more economical about it.