Mobilizing joomla sites with Jtouch

Last Updated on December 1, 2019 by Christopher G Mendla

updated 8 24 2012 – Changes are highlighted in yellow
updated 8 25 2012 – Changes are highlighted in pink

Most Joomla sites can be read on mobile devices. However, Joomla sits are not necessarily optimized for mobile devices.

There is a non commercial Joomla extension called JTouch which will allow you to optimize your site for mobile devices. It is relatively easy to install and seems to work very well. You can even integrate adsense banners.

Jtouch can be found at http://extensions.joomla.org/extensions/mobile/mobile-display/19123

The process is fairly straightforward.

1. Your site should be upgraded to at least Joomla 2.x. There is a version of JTouch that will work with Joomla 1.5   Given the advantages of Joomla 2.x, it would be a good idea to upgrade Joomla.
2. The package has to be unzipped prior to uploading.
3. Upload two of the files in the unzipped folder. They should look like plugin-jtouchmobile.zip and template-jtouch25.zip.
4. Go to the template manager and open the jtouch25 template.
   1. Set the colors for the template
   2. Set the status to enabled.
   3. In many cases, such as running adsense or fabrik forms, you will need to set “Only Jtouch Scripts” under for Jtouch 25 to “no”. 
   4. You should FTP a ‘main banner’ for your site and change the file name under ‘Look and Feel’ appropriately.
   5. If you run google adsense, you can add in your publisher ID and Slot number. You can go into adsense and create a new ad unit for the mobile size. The id and slot number will be in the code. As with any extension that interacts with adsense, it is a good idea to keep track of your ad performance. Also, it is too easy to click accidentally if you set a top ad. I just set a bottom ad.
   6. If you have Virtuemart or Kunena, you can configure that in the template as well.
5. If you need your mobile menu to be different from your desktop site, you will need to create a menu for the mobile version. There are two issues with this (1) The menu has to be re-created every time you change the menu for the regular site and (2) When you copy the menu, the resulting menu will have a (2) after each of the first level items.  NOTE – I checked a site that had been mobilized with this duplicate menu and found that clicking on a ‘READ MORE’ button from a desktop browser resulted in showing a mobile page. I deleted the mobile menu I had created and simply used the same menu as the desktop. I also had to change the template to point to the original menu. My guess is that this could be remedied by selecting which articles display a particular menu. However, in this case, there was no need for a different menu for the mobile site so I chose the easy fix. 
   1. Create a new menu and name it something like mobile menu
   2. Open your old main menu. At the bottom of the menu, there are options to copy the menu.
   3. After you copy the menu, you will need to remove the (2)s from the first level menu items.
6. If you want to use the existing menu you can. This will make maintenance easier when you change the menu items.
   1. Go to module manager
   2. Create a new menu item.
   3. Make sure that “Show sub-menu items” is set to yes.
7. Go to the plugin manager and open the jtouch plugin.
   1. Change the status to “Enabled”
   2. Under “For Jtouch25 Only”, Set the “Only JTouch Scripts” if you are running extensions such as Fabrik Forma. (Your mileage may vary)
8. You can preview your mobile version by going to the Jtouch25 template and choose “View site in mobile version” under “Look and Feel”