14

I'm a proponent of Responsive Web Design in conjunction with Adaptive Web Design (i.e. - one design that adjusts display for all devices and provides content based on view port size) as opposed to separate 'mobile' sites designs.

There are some drawbacks, for example, on large displays I'd like to include some modules which will be hidden for smaller viewport sizes. However, in the case where a module is hidden based on viewport size, loading and executing that module causes a needless performance hit when it is known that the specific module will never be displayed at a smaller viewport size.

How can I use viewport size to effectively disable a module (i.e. stop it from executing) in order to speed up performance?

15

Advanced Module Manager (http://www.nonumber.nl/extensions/advancedmodulemanager) allows you to assign modules based on browser TYPE. So you could select mobile, or desktop, or specific device. It doesn't allow you to choose by size, however, so it's only useful to a degree.

It may also be possible with a combination of php and javascript. I'll send this question to my buddy, he might have an idea.

  • What a nice idea, I never thought of using AMM this way. – jackJoe Apr 23 '14 at 19:42
  • Peter's put a lot of awesome functionality into AMM, it's a must-have in my opinion. – Faye Apr 23 '14 at 19:44
  • I agree with this. If I was stuck with a theme that didn't have this built in (warp 7 themes for example have this built in) then I'd use AMM. – Brian Peat Apr 23 '14 at 19:46
  • @BrianPeat - can you provide further details on how this works with WARP7? – NivF007 Apr 23 '14 at 21:18
  • 3
    Warp 7 has a panel in the template admin that lets you click buttons for desktop/tablet/phone and it turns on and off modules based on those settings. Rocket theme does something similar with special classes. What I don't know is if the modules are offloaded, or if everything is loaded and then just hidden. I suspect it's the latter since you can see it change as you resize the browser. If you completely offload things based on size, what will it do if you actively resize the window? – Brian Peat Apr 23 '14 at 21:34
10

I don't think you should be disabling modules like that and still call it responsive design. Part of the point with responsive is that it will respond to changes of viewport and not just that it prints out a different layout for different screen sizes.

Depending on the example screen sizes it's possible that a tablet in portrait mode will cause the module to not load but then that same tablet might need that content once in landscape mode.

  • 3
    While that's true, it's not really effective in practice. Meaning an iPhone user will never have a screen resolution of 1440x900, nor will they even have the ability to resize their viewport. Responsive design where people are like "ooh look how things change as I resize my browser window" is really only effective for designers wanting to show off. In practice, it's perfectly fine to take the approach of shutting off modules and changing output for different screen sizes. – Don Gilbert Apr 23 '14 at 20:21
  • 3
    @Don Sorry it's simply not responsive design then, and there are plenty of people on desktop that take advantage of the resizing features when working in windows. Responsive design responds to viewport changes not whether its from a certain device or not. – Spunkie Apr 23 '14 at 20:25
  • 2
    I agree. But I disagree with the goals of "responsive design". As I said, it was dreamt up by designers to show off. They forget the fact that iPhone's will never have a huge resolution. tl;dr - Responsive design does not matter on mobile devices. I'd rather save network bandwidth than have "pure responsive design". – Don Gilbert Apr 23 '14 at 20:30
  • 2
    @DonGilbert and at Spunkie - IMO - both of you are right. The 'strict' definition of Responsive Web Design does not include modifying 'content' - I will edit the question to include RWD/AWD - Responsive Web Design and Adaptive Web Delivery en.wikipedia.org/wiki/Responsive_web_design – NivF007 Apr 23 '14 at 21:09
8

This is a JS class i made some time ago that could use javascript to detect viewports, it has never been put through rigorous testing but works.

function ResJS(){
    this.min = 0;
    this.max = 0;
    this.config = config;
    this.width = function(){
        return jQuery(window).width();
    }
    this.breakpoint = function(min,max){
        this.min = min;
        this.max = max;
        this.outside = false;
        this.inside = false;
        this.triggeredOut = false;
        this.triggeredIn = false;
        this.enter = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.min<context.width()&&context.max>context.width()){
                    if(!context.triggeredIn){
                        jQuery(document).ready(function(){callback(context.min,context.max)});
                        context.inside = true; //browser width has entered breakpoint
                        context.outside = false; //browser has left another breakpoint
                        context.triggeredIn = true; //triggered event for breakpoint
                        context.triggeredOut = false; //be ready to trigger leave event
                    }
                }else{
                    context.inside = false; //browser width is not within breakpoint
                    context.outside = true; //brower width is outside of breakpoint
                }
            });
            if(context.min<context.width()&&context.max>context.width()){
                jQuery(document).ready(function(){callback(context.min,context.max)});
                context.inside = true;
                context.outside = false;
                context.triggeredIn = true;
                context.triggeredOut = false;
            }else{
                context.inside = false;
                context.outside = true;
                context.triggeredOut = true;
                context.triggeredIn = false;
            }
            return this;
        }
        this.leave = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.outside&&!context.triggeredOut){
                    jQuery(document).ready(function(){callback(context.min,context.max)});
                    context.triggeredIn = false;
                    context.triggeredOut = true;
                }
            });     
            return this;
        }
        return this;
    }
    return this;
}

Basically you use it like this

ResJS()
    .breakpoint(0,600)
    .enter(function(min,max){
        console.log(min,max,'enter');
    })
    .leave(function(min,max){
        console.log(min,max,'leave');
    });

Breakpoint has min/max parameters for width, then a chained function for entering it and leaving, with a callback to run some JS code.

I cannot go in detail on how it works, as I made it so long ago but your free to use it if it will help. This can be used to load modules through ajax based on the viewport. I believe joomla's com_ajax can be used with this to make some really cool features.

  • 1
    This looks like a major piece of the puzzle and has interesting possibilities - thank you for the answer and especially for posting the code. – NivF007 Apr 30 '14 at 16:04
  • 1
    The top answer is my co-worker, this is more or less my idea :P – Jordan Ramstad Apr 30 '14 at 17:26
3

An another solution:

You can use a Server Side Device detection like this: http://mobiledetect.net/ here the Joomla Plugin http://www.yagendoo.com/en/blog/free-mobile-detection-plugin-for-joomla.html and then extend the joomla/templates/yourtemplate/html/modules.php with your own mod_chrome style. Then you can write as many php if statements you like for any device or resolution.

3

If you want to speed up performance then don't load modules that are unnecessary. If it isn't necessary on small screens then it also isn't necessary on larger screens.

People with larger device displays also want a fast website that doesn't load unnecessary cruft. You are making the erroneous assumption that larger screens have more bandwidth available. They don't.

Be a good designer and give all your users an optimised site experience, irrespective of their screen size.

2

I would suggest that browser sniffing is the wrong way to go here. If you really want to only load modules based on screen width, you need to be running some javascript, which then calls the module by AJAX (com_ajax). Bear in mind that there may be a payoff in terms of search engine optimisation for content loaded by AJAX.

2

I generally use css @media to make this happen. Makes it simple to hide things depending on screen size and have them parse for times when a landscape tablet is wide enough to show it and the portrait width is not. Here is an example:

@media (max-width:699px) {
    #moduleid, .modulewrapperclass {display:none}
}

I usually use this to hide an entire module position so I base my css selector on the wrapper of that position (or positions in some templates).

  • Thanks for your answer. The problem with the CSS media-query approach is that you are still executing a module (even though you are choosing not to display it). The solution I'm looking for will not execute the module unless it is displayed. – NivF007 Apr 25 '14 at 23:08
  • As others have said, that may not be the best idea for folks who change their viewport size after page load as well as landscape vs. portrait tablets. The few hundredths of a second it takes the server to parse this module will not matter much and since it is display:none on the smaller devices you don't render it so no time is lost there either. - But if you really want to not have it load, then Advanced Module Manager is probably the way to go as linked in another answer. – pathfinder Apr 26 '14 at 2:57
1

You could load it on demand using some javascript that calls com_ajax and returns only the modules for the current size.

0

You can use module suffix in combination with media queries. Many template frameworks have this already built-in where you can add a class of "hidden-phone" to not have them display on mobile. They call them CSS Helper classes:

GANTRY: http://www.gantry-framework.org/documentation/joomla/advanced/responsive_grid_system.md

WARP: http://www.yootheme.com/blog/2012/06/12/warp-gets-responsive

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.