The way a website should look and behave in a mobile device is significantly different than how it does on a laptop or desktop display.  We came up with a plug-in for Joomla! to make it easy to instantiate different interfaces depending on the client platform.

We’ve been working on a site redesign that requires significantly different templates for laptops/desktops and mobile displays.  On the one hand, we want to optimize the UI for each device; on the other, we don’t want to force users to maintain multiple copies of every page.  That would be disgustingly inefficient, particularly for a site based on Joomla!

Instead, wouldn’t it be beautiful to have all sorts of custom templates for each mobile platform and have the appropriate template selected automatically?

A Plug-in Is Born

I started “googling” around and ended up in the Joomla Core-Enhancements Mobile Section.  I found three extensions (good) but they all had significant limitations (not so good).  For example, one of them required a Joomla! “core” change.  Not pretty.

One plug-in in particular captured my attention, the PDA-plugin for Joomla 1.5.  This plug-in came pretty close to what I was looking for because 1) it detects all popular mobile platforms and 2) switches Joomla! to a specified mobile template (i.e., this template can also be downloaded with the plug-in).

Unfortunately, even though it came close it still had some shortcomings,

• You can’t handle multiple, independent device/templates with it (i.e., you can’t have one template for iPhone, another for Blackberry, etc).
• You can’t make custom adjustments to your final HTML code based on the device detected (e.g., remove a particular DIV block for the iPhone or a particular OBJECT element for a Blackberry, etc).
• Finally, the detection strings are not easily configurable from the plug-in parameters.

I’m a curious person, so I looked at the plug-in’s source code.  A few hours later a new little monster was born (taddah!): the Mobilebot for Joomla 1.5+ plug-in.  Here’s a summary of what this plug-in does,

1. It can detect iPhone, Blackberry, Android and Opera Mini separately and load a particular template for each of them.
2. It has two extra spaces so you can add your own custom mobile devices.
3. You can adjust your final HTML code with simple/regular expression PHP replacements; this can be done independently for each particular device.
4. If none of the specific devices is detected (or you just have one template for all mobiles), the plug-in can also perform a general mobile detection and load a “generic” mobile template if configured accordingly.

This plug-in uses two detection methods,

1. Compare the user-agent HTTP header with a list of strings (all of them configurable)
2. Detect a named subdomain in the address bar assigned by you for that particular device

It can even use both methods at the same time.   Here’s an example:

Let’s assume that you assign the subdomain http://iphone.example.com for the iPhone template and you enable both detections methods for such devices in the Mobilebot parameters.

If you receive a visit of someone using an iPhone, this is what happens:

1. If the visitor types in http://iphone.example.com directly, then subdomain-based detection is triggered and the visitor gets the correct template.  In this case, user-agent detection is disregarded.
2. If the visitor reaches the site using http://www.example.com, then subdomain based detection doesn’t trigger but the visitor gets the correct template anyway because user-agent detection is enabled too.

The only difference between these two cases is the URL showing in the address bar.  In the first case it will show http://iphone.example.com, and http://www.example.com in the second case.  If this is not what you want, keep reading.

You may have a reason to keep a consistent URL showing in the iPhone visitor’s address bar.  For example,

• You want to get the word out regarding the existence of your mobile subdomain.
• You just are a consistency freak (like yours truly)

Either way, you can accomplish this by enabling the “Redirect to iPhone subdomain” feature along with user-agent detection.  In the configuration dialog, each platform has its own “Redirect to mobile subdomain” parameter.

With this configuration, user-agent detection is used as a secondary helper only to correct the URL when needed.  Otherwise, the redirection option is turned off by default because it’s not needed by most people.  However, if you need it, you can turn it on easily.

Version 1.0

This is the first version of the plug-in so if you find any issues with your particular environment or specific configuration, please, help me correct them.  We can accomplish more together!

No mobile template is included with this release.  This plug-in has the primary objective of giving you the freedom to have completely independent templates for mobile devices.  You can get started with the “PDA” template provided by Denis Ryabov (aka., Physicist) with the PDA-plugin (you may need to do some adjustments to it).

Using this approach, you can include very device-specific HTML markup without affecting the default behavior of your website!

I hope this plug-in helps somebody out there.  It certainly will be helpful for us at Nearsoft and new site layout we’re working on.  Come back here with your iPhone in about a month and you’ll see what I mean.

Final Setup Notes

If the template you provide for a particular device doesn’t exist, no template change is performed.  This is a good thing, for example, if you mistype the template name in the plug-in configuration parameters.  Your site won’t break.  It will not look right for that device, but it won’t break.

Subdomain-based detection requires some extra configuration.  Continuing with the example, both http://www.example.com and http://iphone.example.com should point to the same IP address (e.g., your website) so you may need to do some DNS configurations first.