About the author

While I have been programming for a living for many many years, I am relatively new to Joomla and PHP. My approach to this issue is not the only way to do it, but it worked for me so I am sharing.

The first thing you must accept is that you cannot display a full 3 column 1024x768 screen on a tiny mobile device screen. The approach I take is to place the main menu (left column) followed by the body. I drop the right column entirely.

This means some planning when laying out your content. Decide what is important to the mobile visitor and keep it in the center or left column.

As you will see this is easy to change if you want to include the right column also.

While I call this a template, it is more like 2 templates, one for mobile and one not, with some code that detects a mobile device and decides which type of template to use.

A quick Google for "php detect mobile device" reveals many ways to do this.

• http://forums.macrumors.com/archive/index.php/t-205417.html
• http://www.andymoore.info/php-to-detect-mobile-phones/
• http://phpclasses.goodphp.com/browse/file/7912.html

I choice the first one because.. well I found it first.

On your template, leave the Joomla header stuff as is.

Where the body starts I insert the php code to detect a mobile device. If I find one I use the 'mobile' template, otherwise I use the non-mobile layout.

Pretty simple.

This works best on text only screens. If you have a large graphic it will not look good on the mobile device.

This is a template modification that can be added to most templates.

The mobile template may not work with all components.

http://www.ccmssdemo.svhost2.com
(view with a mobile device to see the mobile template in action, view with a PC to see non-mobile version)