My CMS testing website

Joomla 3.0.2
http://iambenz.6te.net

Drupal
http://iambenz.drupalgardens.com/

Web Development for Android / iPhone Devices: Mobile Joomla!

While many developers are actively working on an Android app for their client or business, others are going the web app route by creating websites that look and act like apps when viewed on mobile clients. If you're already using the Joomla! CMS, the Mobile Joomla extension will do most of the work for you, as we will show you in this tutorial.

Mobile Joomla is a free extension that works like this: if you visit a Mobile Joomla-ready website using your desktop web browser, you will see the site like you always do--a normal, standard Joomla! site. If, however, you are using an Android or WAP device, iPhone or iPad, you will see the same website appropriately displayed for your device. It allows you to redirect mobile users to a specific subdomain, or it can use a specific theme for each device. That allows Android users to see one thing, iPhone users another, and Windows Phone 7 users to see something altogether.

You can see it in action by checking out my own test site which I created as I wrote this article,AndroidWho. View it in as many devices as you have access to, and you will see an immediate difference (or, if you are using an Android device running the Dolphin HD browser, you can change the user agent to Android, Desktop, iPhone or iPad, and check it out that way).

Setting Up My Test Site: AndroidWho.com

For this tutorial, I created a site from scratch. I bought the domain name AndroidWho.com, and set it up with my webhost, 1and1.com. Once I had pointed the DNS records to 1and1.com, and created a home directory for the new domain, I created a new MySQL database to use with a fresh Joomla! 1.6 installation.

I won't bore you with the Joomla! installation details, as we have already covered the topic in detail here on HTMLGoodies. Suffice it to say, once you have created the MySQL database, it's pretty much plug and play (or fill in the blanks, more precisely). Here's what my fresh Joomla! installation looked like when it was installed on my host (and yes, I did install the sample data that's included):

Since I am not the type of person who can just leave things in their default status, I looked around and found a Joomla! theme that looked more like something an Android nut like myself would like. It's called Modern Design and was available for both Joomla! 1.5 and 1.6, so I was set.

Again, we have already discussed how to install a Joomla! theme, so I won't go over the details, but once I was done installing the theme (and assigning modules to positions within that theme, etc.), the site looked a bit better:

Now we get to the installation of Mobile Joomla itself. Mobile Joomla is free to download, and the Mobile Joomla website includes ample documentation:

As I mentioned before, I installed Joomla! 1.6, rather than the 1.7 release candidate, because the folks at Mobile Joomla are still working out the issues of upgrading to support the new Joomla! release. They have their own release candidate coming out with support for 1.7, but we'll leave that for a future article.

Mobile Joomla Installation

Before you begin the installation, make sure that your webhost has the following features or configurations:

• PHP 5.0 (but you need PHP 5.2.4 or higher to run Joomla! 1.6)
• MySQL 5.0
• Joomla! 1.5 or 1.6
• GD2, a PHP image library for image scaling
• Zip PHP extension
• bzip2 (PHP bz extension for TeraWURFL device database, explained below)
• mysqli (also for TeraWURFL)
• 100 MB of database disk space
• at least a 64 MB PHP memory limit

Also, one part of Mobile Joomla, TeraWURFL, takes up around 25Mb in the MySQL database, so you'll need enough space for it to be installed. TeraWURFL is where the information (the user agent data from just about every mobile device out there) is stored, and it's required for Mobile Joomla to function.

While Mobile Joomla works on most web hosts, GoDaddy is known to have issues, so be forewarned. Now, let's begin.

Once you've downloaded the Mobile Joomla file itself, you just need to un-compress it (the actual file you'll be using is a .tar file), and Joomla! enables you to simply upload it as is by using the Extension Manager, as shown here:

Once it's installed, you can either leave it as it is, or further customize it. Here's how that same page we showed you above appears now when viewed by someone using an iPhone:

And here it is on a WAP device, such as a Nokia 6630:

Here's what it looks like on a 7 inch Android tablet, through the default browser:

Changing the Mobile Joomla Configuration

To really dig into the Mobile Joomla settings, just to to the Joomla! Administration page, Components, Mobile Joomla!, Settings, as shown below:

Once you're in the Mobile Joomla! settings, you will see an interface with 5 tabs: Global settings, Smartphone (XHTML), iPhone, WAP and iMode. On the General settings tab, you can enable or disable caching, browser caching, and subdomain support (you can point each type of mobile device to a device specific subdomain, such as iphone.androidwho.com). On the iPhone tab, you can choose to select iPad support, image scaling, and the modules that are used for the iPhone display. You can see the iPhone tab below:

There are too many options to list in this article, but suffice it to say, you can style the display for each device however you want, and completely customize your website's appearance by changing the settings. By default it works very, very well, and I am looking forward to seeing the next version of Mobile Joomla!, as it promises to support the Joomla! 1.7, with updated mobile functionality.

5 mobile solutions about Joomla templates and plug-ins

Mobile solutions for Joomla websites

In the mobile age which we are living in, more and more users access websites via smart mobile devices such as the iPhone, Android-based or Windows-based mobiles. It brings a new challenge to website developers - Providing the look-and-feel of a mobile device's user interface effectively.

Joomla CMS is not an exception. Joomla developers provide some mobile solutions for your websites. Take the phone out of your pocket and check out yours website with the mobile Joomla products below.

A general review

A mobile's screen is smaller than a computer's screen. That is, on a mobile, only the main content should be displayed. You can create a website layout for mobiles by using plug-ins or templates.

I picked the most popular Joomla templates and plug-ins mobile devices and tested them out on the iPhone and iPad:

Product name	Joomla version	Mobile support	PROs	CONs
PLUG-INS
Mobile Joomla	1.5, 1.7, 2.5	- iPhone - Android - Blackberry - Nokia - All other phones	- Free - Quite comprehensive settings - Four 3rd-party extensions supported. - Support various mobile phone types	- Sophisticated settings - Limited mobile themes
J Admin Mobile	1.5, 1.7	- iPhone	- Easy to use	- No support for other mobile phone types - Still buggy
TEMPLATES
Templates based on Gantry framework	1.5, 1.7, 2.5	- iPhone - Android	- Comprehensive settings	- No support for other mobile phone types - No additional 3rd-party extensions support
Templates based on JSN Framework	1.5, 1.7, 2.5	- iPhone - Android - Mobiles based on Windows OS	- Easy to use - Fast	- No additional 3rd-party extensions support
Templates based on Warp Framework	1.5, 1.7	- iPhone - Android	- Easy to use - Fast & smooth	- No support for other mobile phone types - Limited module positions

Detailed reviews

Joomla Plug-ins

Mobile Joomla

Front-end and Back-end of Mobile Joomla

If you ask about mobile solutions on forums, Mobile Joomla might be one of the first plug-ins recommendations. In general, Mobile Joomla is quite flexible to customize the mobile website as you wish.

This plug-in permits you to present your website on various mobile device types: iPhone, Android, Blackberry, Nokia and other phones. You can customize the mobile layout with 9 module positions; custom templates, menu and homepage for each device category. You don't need to worry about images presentation since it allows you choose to remove or re-size images on the mobile as well. Beside this, it comes with 4 additional extensions: Remove Support Ads, Youtube Mobile, Login Mobile and Google Analytics Mobile.

However, personally, I think that it is quite complex to use. There are too many parameters to set up; and, many parameter names are not self-explanatory.

Download (Registration required) - Documentation

J Admin Mobile

J Admin Mobile shows the content on your website

If you have to edit content on your website from your iPhone, you may consider choosing J Admin Mobile (JAM). It allows you to manage some core sections such as Articles, Sections, Categories, etc in the back-end of site remotely.

There are 2 editions of J Admin Mobile:

• Free Edition: You can use it on only one website. You get full permissions in the Articles section, but just get the view permission in the other sections. Besides this, there is an advertisement displayed on your website.
• Premium Edition: You can use it on unlimited websites. You get full permissions in all sections that J Admin Mobile supports and there is no advertisement displayed on your website.

J Admin Mobile sounds promising. So I took a test of its Free Edition first. However, it is just suitable with simple work, not serious work. In the Articles section, there is no the built-in Tiny MCE editor and you need to edit the article in the html code. You will be limited if you want to edit the all of the content. Moreover, I couldn't re-size images to insert them into an article.

Download / Buy (an iTunes account is required) - Documentation

Joomla Templates

Some Joomla templates come with built-in versions for mobile devices. The settings can be configured in the back-end of the templates.

Templates based on RT Gantry framework

The mobile version and PC version of RT Gantry framework

If you have used Joomla, Rockettheme is definitely not an unfamiliar provider to you. This is a leading vendor with nice templates and extensions.

You won't be disappointed with the mobile version of their templates which are based on the RT Gantry framework. It is quite flexible since it allows you to organize your content in 7 module positions and customize 9 menu animations. You can also set Scalable content to enabled or disabled to allow your users to zoom your content. Big images will be automatically re-sized to suit your website.

Last but not least, detailed on-site guidelines can help you use it easily.

Download / Buy - Documentation

Templates based on JSN framework

The mobile version and PC version of JSN framework

Simple, easy to use, and highly effective are the criteria which Joomlashine used to create their Joomla templates on PC, and it is also true of the mobile version. Compact and lightweight, with a fast loading speed - it has an original look like the desktop version.

9 module positions allow you to display the main content quite comfortably. All child menu items are presented as a tree in a collapsible panel. And you can still keep your favorite features such as rich icons and icon on menus in this version.

You don't need to recreate or copy modules and menus with JSN Tendo. You just need to configure (map) the modules from their regular positions to mobile positions. As a result, the template will be displayed as you wish on mobile.

Download / Buy - Documentation

Templates based on Warp framework

The mobile version and PC version of Warp framework

Using templates based on Warp Framework is a comfortable experience. It is clean and neat with 5 available positions which help readers focus on the main content. Besides this, a drop down menu, a search and a login section are grouped in the toolbar in the top right. To guarantee fast and smooth animations of the layout, JavaScript effects are eliminated.

There are no complex settings with the mobile version of Warp Framework. It is very easy to understand and easy to configure the mobile version with 8 parameters in the back-end. And you don't need to worry about its quality -it is stable.

Buy - Documentation

In conclusion

Template support for mobile devices is still not so popular. Besides the mobile solutions mentioned above, you can also use the plugin Auto Template Switcher or other Joomla templates such as the JA T3 framework based templates of Joomlart, the Morph framework based templates of JoomlaJunkie, the Zen Grid 2 based templates ofJoomlabamboo, etc.