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:

This will obviously load up the rangee template in the add-ons template group. And that's where the magic start: 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.

Loads mobile__add-ons/remember-me because that particular template has a mobile equivalent.

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.

Loads contact/index because there is no mobile__contact template group.

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.