Template switch between mobile and desktop

Hi everyone,

I''m trying to make plugin to detect which browser the visitor used and base on the browser switch the template. The detecting of the browser is not the problem, but it loading of the template.

Now I have tried an "Extra" called "Mobile Detection". It detect mobile devices and call the chunk where the mobile template is. It works, but its there any other method to detect mobile devices and assign a mobile template?

My plan is using a plugin to determine the event of the document/page. 'OnWebPagePrerender' and detect from here the mobile.

If this visitor is a mobile then use the assign mobile template.

But the main question is for me, how do u assign the mobile template on the visiting document.
I can't find the method/function of it.

There is another way to handle different screen sizes on different devices without changing the template. It's been called "responsive design". Basically, it uses CSS media queries and styles the same page differently according to the different screen sizes being reported by the device.

http://www.alistapart.com/articles/responsive-web-design/
http://mediaqueri.es/

Both the modx-boilerplate and Flexibility packages have responsive design grids with media queries for mobile. Flexibility is quite a bit more comprehensive for MODX (with resources, TV's, snippets, templates, packages, and a basic styled MODX site) and the boilerplate is based on the html5 boilerplate (bare bones responsive grid and css).

boilerX is also available in packages at http://modx.com/extras/category/site-packages

modx-boilerplate: https://github.com/anselmh/modx-boilerplate

Nice tutorial with video using the modx-boilerplate: http://designfromwithin.com/blog-webdesign-development/2011/04/06/using-the-fantasic-modx-boilerplate-part-1/

Flexibility from Design from Within - taken a bit further and using Foundation from Zurb, available via package management and at http://modx.com/extras/package/flexibility

Flexibility website: http://designfromwithin.com/flexibility/

Or you can use Foundation bare bones with this package from Design from Within if you don't want the full MODX site installed: http://designfromwithin.com/blog-webdesign-development/2012/02/07/foundation-modx/

Foundation 3 has been released, but these Flexibility packages use Foundation 2. See the Foundation site for information and documentation for Foundation 2 (there are a few differences between 2 and 3 that are important to note). http://foundation.zurb.com/

I was hesitant at first, when Menno changed Flexibility from inuit.css to Foundation but I'm a convert now. The nesting of grids makes Foundation superior IMO. (although I still like a lot of inuit.css class simplicity) see http://csswizardry.com/inuitcss/

Thanks everyone for the information. I know the principle of responsive design, but I never did a research on it. Now that I have the information from you guys, I'm going to try it out and make a responsive design.

I want the mechanic of using the assign template, because I want to make a template in Jquery Mobile template. I think i'm going to make a responsive design and a jquery mobile template.

Notes on Using Template Switching:

I just recently implemented template switching manually on my site. If you are going to do this, let me tell you what I came across. First, the earliest and best place to assign the template is OnLoadWebDocument. This will save a ton of load on your MODX installation, as it hasn't yet parsed the document, but it has a Resource. Second, set the page as non-cachable (inside MODX). Otherwise, your template will not update if it has been cached already.

Honestly, a healthy balance would use CSS Media types, jQuery Mobile AND Template Switching.

Thanks for the tips. I agree with the balancing. I try to find the balance between those 3 things.