Maria and Responsive Layouts ....

[ladd.james]

Maria is making my development life really easy so thank for such a neat tool.

I've been doing a lot with responsive layouts and Maria makes this very simple, as I can simply
choose which view to create that is suitable for the 'device'.

For example:  pseudo code

constructor: function(model) {
    mycode.ElementView.apply(this, arguments);
    if (device.isMobile())
        this.appendChild(this.mobileProductView(model));
    else if (device.isTablet())
                     this.appendChild(this.tabletProductView(model));
},

With commonality in a common ProductView class this makes things clear an easy.

A quick and more direct question I have is, where would you put the method that lets me
know what the current "device" type is?  I'm using Twitter Bootstrap for responsive layouts
and I can have a marker element rendered only if a certain device is in use, therefore the
presence of the "marker" indicates the device.

Probably not the best way, but would you put the "device" query in a view or in a controller?

[Peter Michaux]

Hi James,

If you absolutely must have different view classes for phone, tablet,
and desktop (i.e. these widgets must differ by more than just CSS
meaning the JavaScript must be also be different) then I would want a
utility function to do the work for me.

I'd keep the utility in a file like named either

myApp/src/js/util.js

or

myApp/src/js/util/browser.js

With an API like

myApp.isMobile();
myApp.isTablet();
myApp.isDesktop();

You could even do something like the following after defining the
various product view classes if the isMobile and isTablet functions
can run when the JavaScript first executes

myApp.DeviceProductView =
myApp.isMobile() ?
myApp.MobileProductView :
myApp.isTablet() ?
myApp.TabletProductView :
myApp.DeviceProductView;

None of the above excites me too much as this is browser sniffing.
True responsive design is simply based on the size of the device. The
narrow view that is built with phones in mind will be used on the
desktop if the browser window is made narrow.

Peter