The idea of the mobile site is a simple concept. Basically, if your website detects a mobile device it will switch to a different layout to accomodate the device. In your template you can choose to turn on the iphone and adroid detection which will allow your site to do this. Before you turn this on it will take a little bit of planning and setting up your mobile layout.
First, in many cases it won’t be prudent to have the entire main menu available for a mobile device. I would recommend creating a separate mobile menu and determining the content that you think would be most useful to a mobile user. For example, you will probably want your calendar to be available and also your main landing pages but if you have lots of drop downs items this will complicate the menu on a small device.
Second, you willl want to pre-determine your mobile positions and the content that will be shown for a mobile device. The mobile positions are the following:
mobile-drawer
mobile-top
mobile-header
mobile-navigation
mobile-showcase
mobile-feature
mobile-bottom
mobile-footer
mobile-copyright
You will notice from the names of these positions they really just represent a stripped down version of your sites regular template positions. The good thing is that you don’t have to create separate content for your site’s mobile site unless you want to. Using your template manager you can redirect the mobile position to display content from other positions on your site. Just choose the position you want the mobile position to direct to from the drop down on the right.
Finally, you will want to set the min width and percentage of your site images. What this does is define the minimum size that an image can be. If the image exceeds this width then the image will be automatically resized to the defined percentage. This means that if I set a 100px minimum width and the image is larger than this then the image will be proportionally resized by the percentage I defined. This would be a percentage of the width of the images parent element. Here is a great article defining how percentages work in CSS http://www.impressivewebs.com/width-100-percent-css/
Now its time to test your site. Take out your handy iphone or android and navigate your site. Post a link below to let us see the results of your work.
As always feel free to comment and ask any questions that you might have.
This article concludes our 5 part series on the Joomla! template system. I hope you learned something useful.
Thanks for reading!