It couldn't be any simpeler to use Mobile. Just install it and you are ready to go.
Let's say you have a page you're accessing that's using EE native routing:
http://devot-ee.com/add-ons/rangee
This will obviously load up the 'rangee' template in the 'add-ons' template group. And that's where the magic starts: if you create a template group called 'mobile__add-ons' and within that group a template named 'rangee', that template will get served up when that page is visited on a mobile device. It's that easy!
If no mobile equivalent of a template is found, the regular template is served up to the frontend.
I know what you're thinking: "But wait... what about Pages and Structure URL's?" I've obviously thought of that. Mobile also works with these two fantastic modules.
For the curious folk among us, here's how that works: It checks if the current URL is in the site_pages array generated by both Pages and Structure and replaces the associated template with the mobile equivalent if it exists.
A basic example would look something like this:
Regular templates:
- homepage*
--- index
- add-ons
--- auto-expire
--- mobile
--- rangee
--- remember-me
- contact
--- index
Mobile templates:
- mobile__homepage
--- index
- mobile__add-ons
--- auto-expire
--- mobile
--- remember-me
The following will happen:
/
Loads 'mobile__homepage/index template' because mobile also honors the default template_group setting.
/add-ons/remember-me
Loads 'mobile__add-ons/remember-me' because that particular template has a mobile equivalent.
/add-ons/rangee
Loads 'add-ons/rangee'. Even though there is a 'mobile__add-ons' template group, there isn't a 'rangee' template present in that group. Therefore it just loads the regular template.
/contact
Loads 'contact/index' because there is no 'mobile__contact' template group.
{is_mobile}{mobile_client}
These are pretty much self-explanatory.
As of version 0.8 there are two extra global variables:
{mobile:switch_to_full}{mobile:switch_to_mobile}
These two tags output a link that allows you to switch the mobile check on or off.
They are used like this:
Switch to:
<a href="{mobile:switch_to_full}">Full</a> | <a href="{mobile:switch_to_mobile}">Mobile</a>
As of version 0.7 you can define a template_group prefix for each mobile client. Setting a prefix for each mobile client might be a bit much, but you might want to make a difference between mobile devices and tablets like the iPad.
**Important!**
Because of the lack of extension hooks during the stage where Mobile works its magic, I had to hack into the segment variables array to make this work. Because of that, when using native EE routing (not with Pages or Structure), '{segment_1}' will also be prefixed with 'mobile__' in the mobile templates.
Keep that in mind.