Mobile Sites with Joomla! CMS

As the number of mobile devices continues to outpace the number of desktop computers, the creation of mobile-accessible sites is becoming more and more important. This article addresses the issue of making a Joomla based site mobile-accessible.

For other content management systems such as Typo3, WordPress, and Drupal, the making of mobile-friendly versions of the sites has already been discussed on mobiForge (see Multi-client Websites with the Typo3 CMS and WURFL, Mobile-Friendly Blogging with WordPress, and Creating Mobile Sites in Drupal Using Multisites). This article is devoted to achieving a similar effect in Joomla using the 'PDA-mambot'.

About Joomla!

Joomla! is a free, open source content management system (CMS) licensed under the GPL. It is written with the PHP programming language and uses the MySQL database. Joomla! has come into the world as a fork from another well known CMS called Mambo. Joomla is one of the simplest CMS but at the same time provides excellent functionality. At the time of writing, it is possible to find more than 2300 extensions that should satisfy most requirements for most users. As a result, it is possible to manipulate quite precisely a Joomla site without any specialised knowldege. Joomla is well suited for small, and large corporate sites or for information-based projects. It is also worth noting the massive community of users; there are more than 145000 members of Joomla! Community Forum to help find the answer to practically any question concerning Joomla. And if you still convincing, Joomla has recently won 'Best PHP CMS Award 2007'.

Joomla Installation

The starting point of this tutorial is a working Joomla install. The Joomla installation process has been well documented, so we will not go into any great detail on this subject here. There are two official manuals: Installation Guide on help.joomla.org and Absolute Beginners Guide to Joomla! on forum.joomla.org. There are also some unofficial manuals: Joomla Tutorials on joomlatutorials.com, Joomla Tutorial on netshinesoftware.com, Joomla Tutorials (Video Guide) on dezinedepot.com.

In CMS Joomla there are various kinds of extensions: templates, components, modules, and mambots (in forthcoming version Joomla! 1.5 mambots will be renamed as plugins). The template defines the appearance of a site. A component is the basic content-type of page (e.g. article, contact form, etc.). The module is something like a widget, i.e. some information on page which doesn't concern a component directly (e.g. a menu, popular articles, a banner, etc.). Mambots (plugins) are event handlers with a specific goal. They are triggered by some Joomla event, for example, on Joomla initialization ('OnStart' event), or on the display of contents of an article ('OnPrepareContent' event), etc. Now over 2300 various Joomla extensions are available on a site extensions.joomla.org (Joomla! Extensions Directory).

The Joomla! CMS can be downloaded on joomla.org. (current version is Joomla! 1.0.13). For the remainder of this article we assume that you have a working install of Joomla! 1.0.x.

PDA-mambot

In order to make a Joomla site mobile accessible we use a PDA-mambot. Before discussing this PDA-mambot used, we need to ask 'What is a mambot?'

The standard answer to this question is:

A mambot is a small task oriented function that intercepts content, and manipulates it some way before it is displayed.

It is essentially a container for some chunk of code that performs a specific function. The basic purpose of our 'PDA-mambot' is to make a mobile-friendly version of any already existing Joomla-based site in just a few clicks. That is, all your content will be immediately accessible by mobile devices.

The essence of a 'PDA-mambot' is that it simply activates a PDA or mobile template instead of using the default, if it is determined that it is appropriate to display the mobile version of a site.

There are two ways to use a 'PDA-mambot':

1. Display of the mobile version of a site for the mobile browser, i.e. on the same link http://yoursite.com/ it is possible to see both the full and mobile versions of a site depending on the device used for viewing. This is referred to as the 'multi-client' approach.
2. Display of the mobile version of a site for a subdomain, e.g., for http://pda.yoursite.com/. This is referred to as the 'multi-site' approach.

You can use either of these variants, or both, though the second approach is redundant for dotMobi domains which should be mobile-friendly by definition.

 

Requirements

Requirements for the 'PDA-mambot' don't practically differ from requirements to Joomla:

• PHP 4.2.x+ (it is necessary to make sure, that used PHP version has in-build support of MySQL, XML, and Zlib).
• MySQL 3.23.x, 4.0.x, 4.1.x.
• Apache 1.13.19+ or MS IIS 5.0+.
• Joomla! (already installed 😉 )

And, if you wish to convert your pages to the UTF-8 codepage, support of iconv library is required also.

Files included

'PDA-mambot' – pda-bot-2.1.2.zip
'PDA' template for your site – pda-template-2.1.2.zip

Information on the latest versions of PDA-mambot can be found at extensions.joomla.org, joomlacode.org, and physicist.phpnet.us.

How does it work?

The algorithm of our mambot is simple enough. The mambot is started each time there is a call to a site (or rather, when the 'OnStart' event is triggered). It is worth noting that in CMS Mambo (which it is now developed independently of Joomla) there is no 'OnStart' event; therefore PDA-mambot will not work in it (although, it can be corrected easily).

In the 'multi-site' approach, after the request, the mambot determines to what domain/subdomain there is a call.

In the case of the 'multi-client' approach, the mambot determines from what device (PC or mobile device) the site is calling. It is implemented by means of following function:

When it is necessary to generate the mobile version of a site, a value true is assigned to global variable $GLOBALS['ispda'] (it is made so that developers of third-party extensions could adapt a display of contents for corresponding form), and the 'pda' template is selected. Joomla has a built-in mechanism of template.

Usage

Installation

First, it is necessary to install 'PDA' template, which will be used for a showing of the information in a simplified kind (for a mobile device). We can install the template using the usual Joomla approach:

1. Login as Administrator
   Click the Administrator link on the front page of your fresh Joomla install.
2. Click the Installers -> Templates – Site
3. Browse to the template zip package on your local harddisk. This will be called pda-template-2.1.zip, or pda-template-2.1.tar.gz
4. Click Upload & Install File

   You should see the following if the template has been installed successfully:

 

Note that you need only install it at this point, but you need not assign it to any menu item, and need not set it as default template (otherwise you will see an error 'Inconsistency between versions of pda-mambot and pda-template').

Next, it is necessary to install 'PDA-mambot' which will make use of the PDA template just installed when a site is visited from a mobile device. This is also achieved using the standard Joomla approach to installing mambots:

1. Click Installers -> Mambots
2. Browse to the mambot package on your local disk. This should be called pda-bot-2.1.2.zip, or pda-bot-2.1.2.tar.gz
3. Click Upload File & Install

   If everything has gone to plan then you should see something like the following:

   

4. Don't forget to publish the mambot:

   Click on Mambots -> Site Mambots -> PDA mambot -> Publish

If you correctly installed 'PDA-mambot' and 'PDA' template, you will see mobile version of your site from mobile device as soon as you publish 'PDA-mambot':

 

Also, if pda.yoursite.com subdomain is an alias to yoursite.com domain (or points to your root joomla directory), that is you can see original site typing pda.yoursite.com when 'PDA-mambot' is unpublished, then you see mobile version of your site on pda.yoursite.com as soon as you publish 'PDA-mambot'.

A step-by-step manual on installation of 'PDA-mambot' can be found on the author's site physicist.phpnet.us.

PDA Mambot Configuration

Let's go to settings page and consider the most important options. To get to the PDA-mambot settings page we click on Mambots -> Site Mambots. You should see a page like this:

 

 

We click on the PDA Mambot link to bring up its settings.

PDA Mambot Settings

Below we list the main PDA mambot settings.

• PDA for PDA-user-agents: This should set to 'Yes' to show the mobile version of a site for mobile devices ('multi-client')
• PDA for subdomain: This should be set to 'Yes' to show the mobile version for subdomain ('multi-site'). Not strictly necessary if you are on a dotMobi domain with the previous option set to 'Yes'.
• Subdomain name: Set a subdomain name (e.g. pda for pda.yourdomain.com)

 

Note: If you intend to use the 'PDA-mambot' to work with a subdomain it is necessary to apply a patch to joomla cache system (click corresponding link in the mambot description on the settings page):

Extended Settings

Below we list the main settings in the Extended Settings section:

• PDA Homepage: Set this page as a homepage
• Pathway on home page: Show pathway (breadcrumb) on home page
• Component on home page: Show component on home page
• Use head: Use standard or simplified (title only) <head>block
• Allow extended editors: Allow to load extended editors (TinyMCE, etc.)

 

Postprocessing Settings

These parameters allow us to filter elements that we may not want to send in the mobile version of the site. It also gives us the option to convert the charset to UTF-8.

Removal of elements

It is possible to remove (optionally) images (<img>) and others html-tags (iframe, object, applet, embed, script) which can be unnecessary and even cause adverse effects in the mobile version. It is useful, for example, if a site has a lot of large images that don't fit into the small screen of mobile device.
Removal of images takes place after generation of page by means of the following regular expression:

Similarly other tags have been removed, e.g. tag:

Convert to UTF-8

Not all international codepages are supported by all mobile devices, but the UTF-8 codepage is supported by the majority of them. In fact the use of the UTF-8 charset is recommended by the W3C Mobile Web Best Practices group, and it is also recommended that dotMobi domains deliver their content in UTF-8. However, there is a limitation with Joomla! 1.0.x which restricts it such that it can work with only one-byte encodings. Therefore Joomla cannot work with UTF-8. This should be fixed in Joomla! 1.5 which will work with the UTF-8 codepage, but for now it is necessary to workaround it.

So, to transform generated pages to the UTF-8 we must use the iconv library. Under the hood, this is achieved using the following code:

$text = iconv( $charset_source, 'UTF-8', $text );

All we need to do as a user of the PDA-mambot is to set the 'Convert to UTF-8' radio button to 'Yes'. Note that you need PHP with iconv library to conversion to UTF-8 work.

It is worth noting that use of options from the 'Postprocessing' section can increase a little processor load, so it is necessary to use them with care.

Professional settings (Tuning)

These settings let us tweak the output of the PDA-mambot. We can tweak things such as the Content-type, DOCTYPE, and whether to use external or embedded stylesheets:

 

 

The parameters are:

• PDA template: Name of PDA template (default is pda)
• Embed CSS: Embed css-style into page. This is useful for devices that do not cache an external stylesheet
• Content-type: This refers to the Content-type header that will be outputted for the page. The possible options are:
  • text/html
  • application/vnd.wap.xhtml+xml
  • application/xhtml+xml
  • text/xhtml

  Note that for dotMobi sites where our markup is XHTML Mobile Profile, then we should specify a Content-type header of application/xhtml+xml

• Use xml-head: This specifies whether we should include the line:
  <?xml version="1.0" encoding="…"?> at the top of our pages. This should be set to 'Yes' for dotMobi sites
• DOCTYPE-head: Specifies which DOCTYPE to use for our pages. The possible values are:
  • No
  • WAPFORUM/XHTML Mobile 1.0
  • W3C/XHTML 1.0 Transitional
  • W3C/XHTML 1.0 Strict

  Note that dotMobi sites should use WAPFORUM/XHTML Mobile 1.0

• xmlns in html-head: Specifies if we should include the xmlns attribute in the html element, so that it will look like this: <html xmlns="http://www.w3.org/1999/xhtml"> instead of <html>. For dotMobi sites this should be set to 'Yes'
• Gzip compress: Some devices cannot display some gzip-compressed pages. To avoid such problems, it is possible to disable the use of gzip-compression completely. On the other hand, mobile contents should be as compact as possible; therefore you may want to enable gzip-compression for the pda-version of a site if you know that your target audience can handle it.

PDA-mambot template settings

The 'PDA' template contains some positions for modules for which we can apply names in the 'Page General Settings' section.

 

 

As a whole, the 'PDA' template has the following structure:

1st module position ('header' by default)

2nd module position

pathway (optionally)

3rd module position

4th module position

the component

5th module position ('footer' by default)

6th module position

Footer with Joomla version and copyright (optionally)

By default the template shows 'header' and 'footer' positions. If these positions already are available in the basic template of a site (and that's quite probable) it is necessary to change these names for others so that there are no collisions. In some cases though, it happens conveniently that the menu (or any other module) is shown in the same position in both templates (see below).

If necessary, it is possible to set new names for positions of modules in the menu

Site -> Template Manager -> Module Positions

Template modularization

The only thing that now remains is to adjust a display of modules.

Now you have at least two templates: the basic template(s) of a site and a 'PDA' template. Each template has positions for modules. And you can make so, that in the basic template you will have one names of positions (e.g. 'top', 'left', 'right', 'bottom'; they depend on the chosen template), and in a 'PDA' template others (e.g. 'left', 'user1', 'user2'; these names can be changed in settings of 'PDA-mambot'). For example, if the menu module is placed in a position 'left' it will be shown in both templates. And if the login module is placed in a position 'right' it will be shown in the basic template only:

 

In most cases, it's better to make a copy of the module, customize it, and place it in suitable position. To make a copy of a module:

• Go to Modules -> Site Modules
• Choose the Module to be copied (e.g. 'Main Menu'), and click on the 'Copy' button
• Now click on the 'Copy of Main Menu', and we can change the name and position of the our new module

Also you can make a copy of a menu in the menu manager, so you can turn off the items that are not useful to the mobile site. Go into "Menu-> Menu Manager". Choose the menu to be copied, and click the "Copy" button. Enter new menu name (e.g. "mobilemenu") and corresponding module name (e.g. "Mobile Menu"). After that it is possible to customize the new menu as you like (go into "Menu -> mobilemenu").
To publish the new menu on the mobile version of a site, go into "Modules-> Site Modules", and set in parameters of created "Mobile Menu" module (click on the module name to view its parameters) one of positions of PDA-mambot/template (e.g. "footer") as value for "Position" parameter.

Then publish corresponding menu module in the one of positions of 'PDA' templates.

As an example, we now demonstrate how to add the 'Search' module to the mobile page.

1. First we click on Modules -> Site Modules
2. We then select the Search module. This will open up the Search module settings
3. Set the Position parameter to 'header'
4. Set the Search Button radio to 'Yes' to display a search button (some devices may not be able to submit a form without a submit button)

   If we check the result it should look something like this:

 

(Some ways of check of the mobile version of a site without use of mobile devices are listed on 'Testing pda-version of a site without PDA'.)

The colour scheme of the mobile template can be change in a css-styles file. This can be done directly from Joomla. Click on Site -> Template Manager -> Site Templates -> pda -> Edit CSS

Tips for using modules in the mobile page

1. For Menu modules it is better to choose style 'Flat List' (to display the menu as the list instead of tables)
2. For the Search module do not forget to add the search button (set 'Search Button: Yes'). Not all devices can submit a form without a button
3. For Newsflash module it is not recommended to use style 'Horizontal'

Possible problems

1. It will not work with almost any cache system which bases on URL only
2. Some intensively using java-scripts components can be displayed incorrectly
3. 'PDA-mambot' produces (almost) wap2.0-compatible pages. But don't forget, that wap2.0/xhtml-mp version and wap1.0/wml version of a site are different things, so it is possible not all phones will display contents of a site. There is currently no content adapation capability in the PDA-mambot – you must decide in advance which mobile template to use. A possible remedy to this would be to define a PDA mambot for each class of device to which you wish to send a different template, and then associate each mambot with the desired template. This is left as an exercise for the reader!

Known Issues

Depending on the content of a site, the markup may not validate.

Conclusion

In this article the way of creation of the mobile version of a joomla-based site with the aid of 'PDA-mambot' has been considered. As a result of the described actions it is possible to work with your site both by means of a usual (desktop) browser, and by means of a mobile device.

References

Joomla! Homepage – http://joomla.org
Joomla! Official User Guide – http://help.joomla.org
Joomla! Extensions Directory – http://extensions.joomla.org
PDA-mambot Homepage – http://physicist.phpnet.us

Author

Denis Ryabov, Southern Federal University, Russia
Email address: dryabov@yandex.ru