dotMobimobiThinkingmobiForgemobiReadyDeviceAtlasgoMobi
background image

Mobile Sites with Joomla! CMS

Section Feature Image
Posted by dryabov - 06 Jan 2008
Twitter share icon Facebook share icon Google Plus share icon

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.

PDA-mambotThe 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:

function CheckAgent() {
 
    $pdas=array(
    'acer',         'alcatel',      'audiovox',     'avantgo',      'blackberry',
    'blazer',       'cdm',          'digital paths','elaine',       'epoc',
    'ericsson',     'handspring',   'iemobile',     'kyocera',      'lg',
    'midp',         'mmp',          'mobile',       'motorola',     'nec',
    'nokia',        'o2',           'openwave',     'opera mini',   'operamini',
    'opwv',         'palm',         'panasonic',    'pda',          'phone',
    'playstation portable','pocket','psp',          'qci',          'sagem',
    'sanyo',        'samsung',      'sec',          'sendo',        'sharp',
    'smartphone',   'sonyericsson', 'symbian',      'telit',        'tsm',
    'up-browser',   'up.browser',   'up.link',      'vodafone',     'wap',
    'windows ce',   'xiino'
    );
    $accept=isset($_SERVER['HTTP_ACCEPT'])?strtolower($_SERVER['HTTP_ACCEPT']):'';
    if(((strpos($accept,'text/vnd.wap.wml')>0)||
        (strpos($accept,'application/vnd.wap.xhtml+xml')>0))||
        isset($_SERVER['HTTP_X_WAP_PROFILE'])||
        isset($_SERVER['HTTP_PROFILE'])||
        isset($_SERVER['X-OperaMini-Features'])||
        isset($_SERVER['UA-pixels']) )
        return true;
    if(isset($_SERVER['HTTP_USER_AGENT']))
 
        $agent=strtolower($_SERVER['HTTP_USER_AGENT']);
        foreach($pdas as $browser)
            if(false!==strpos($agent,$browser))
                return true;
 
    return false;
}


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:

Install template menu
  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:

 

Install template success

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:Install mambot menu

  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:

    Successful mambot install

  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':

 

Mobile site


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:

 

Mambot manager

 

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)

 

PDA_mambot settings


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):
Apply patch to Joomla cache

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.)

 

Extended settings

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.

Postprocessing

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:

 
$text = preg_replace( '|<img\s[^>]+>|is', '', $text );


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

$text = preg_replace( '|<iframe\s[^>]+ />|is', '', $text );
$text = preg_replace( '|<iframe\s.+</iframe>|is', '', $text );


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:

 

Professional options

 

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.

 

Joomla Page General Settings

 

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:

 

Modules scheme



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:
Mobile site

 

(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

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

 

AttachmentSize
pda-bot-2.1.2.zip6.78 KB
pda-template-2.1.2.zip8.83 KB

Posted by dryabov - 06 Jan 2008

dryabov's picture

Denis Ryabov is in the field of nonlinear dynamics at the Southern Federal University (Russia, Rostov-on-Don). Since 2005 he has been the head of the "Student's Academy of Sciences" at the University. As a CMS for a site of this organization he has chosen Joomla!

Posted by dryabov 6 years ago

I would like to add that new version of PDA-mambot (Mobile Joomla 3.0.alpha) is relesed (http://physicist.phpnet.us/2007/12/21/mobile-joomla-30alpha/). I recommend you to use it instead of PDA-mambot because it allows you score up to 5.00 at ready.mobi test.

PS. "Alpha" in version means it is under development (recently wml-template has been released, and I'm going to release imode-template soon), and really this version is quite stable.

Posted by .pH 6 years ago

Using the physicist's template and mambot, I have created several joomla based .mobi sites.

I am not a Joomla expert.

But I have taken what I know and what I have learned and created a very in-depth illustrated tutorial on creating .mobi (mobile) sites using joomla.

iJoom.net was put together to help those that know nothing about nothing, so to speak.

iJoom.net is a very basic and simple approach and non-intimidating introduction to Joomla.

Mobility.mobi is a great hang out for mobi enthusiasts but many were at a lose where to begin the actual site building process.

With my little past usage of Joomla and the Physicist's tools, I have been able to knock mobile sites out in short time.

iJoom.net is free to use and try by anyone.

In time I hope that I will be able to add advanced tips, have guest contributors, other alternative, and a gallery.

I have a Joomla .mobi site design gallery in the works at MobiOptics.com.

In the meantime, feel free to jump on into mobile web design using Joomla at iJoom.net

Posted by jason 6 years ago

Hi all,

You can find more detailed information about how to use joomla/mambo for mobile. Its a little out dated but still very informative.

http://mummola.cs.tut.fi/files/mobile_friendly_web_services-thesis.pdf

Jason

Posted by dryabov 6 years ago

Now physicist.phpnet.us doesn't work. All the posts and files are moved to http://joomup.com/blog/.

Posted by mikett 5 years ago

Joomla is my favorite CMS system over the last 8 years i've used a number of scripts both commercial and open source and am very happy with it and it's ease of use i just found ready made joomla sites pre packed with the best addons.

Posted by jimmyruben 5 years ago

I have a Joomla site in a sub site. How can I use the plugin? My URL is
www.jrstudios.nl/joomla/

Posted by romaniamac 4 years ago

Thank you, the plugin works just fine for me.

Andrew

Posted by dryabov 4 years ago

Soon the component Kuneri Mobile Joomla will be released. The component is essentially better than all my previous PDA-plugins. So, I strongly recommend anyone to use of Mobile Joomla instead of PDA plugin described in the article.

Posted by desis 4 years ago

For Mobile bookmarking Joomla Contents and virtuemart Product Joomla Extensions For Mobile Bookmarking

http://joomla-extensions.yourdada.com

Posted by amaliefranz 4 years ago

I wish I had come across this last year when I still had joomla as my cms. The lack of easily implemented plugins and addons finally forced me to move to a more adaptable cms (wordpress). I suppose I should consider looking again at joomla but to be honest the whole experience left me drained, and I have been quite happy since abandoning this and moving the site.
no deposit poker

title='Oyun'

Posted by Oyunyolu 4 years ago

U have tested and the plugin works fine

*************************************************************

Emanuel Oyunlar,
Visuel Interaction Designer
w: Oyunlar

******************************************************

Posted by mpszyman 4 years ago

Hi!
After installing the plugin (joomla 1.0.15) I receive error:
Parse error: syntax error, unexpected $end in /portal/templates/pda/index.php on line 197

Actually, it's last line of the template index file. Any idea how to solve the problem?.

Posted by rickey 3 years ago

Good article. This is such a great resource that you are providing and you give it away for free. I love seeing websites that understand the value of providing a quality resource for free.

Posted by josephmorris90 3 years ago

Fantastic resource... I don't get any problems, I am soo happy!
JoeyD

Posted by mike88 3 years ago

sitll updated informatio, thanks
Mike Samsson
Graphic Director
Web: sajoo