Developing Mobile Skins for Joomla
The rapid proliferation of smart phones with full browser capability has unveiled a strange problem for website and content providers. On one hand it is desirable to be able to show a website in it's full glory and many new smart phones will do that, but on the other there is something to be said about a fast loading, easy to read version of a website that is both friendly on the smart phone screen real estate as well as a visitors mobile data package. Many website will therefore offer to provide two versions of the site, one optimized for mobile browsing and one for regular browsers. CNN.com is a great example where if you visit it from a smart phone, it will most likely take you to http://m.cnn.com, a mobile equivalent of their content. Now clearly, CNN has the resources to build a mobile version of their site with it's own template. Joomla users could do the same, install another instance of the Joomla software package, apply one of many mobile skins, and redirect all mobile users to that site. But that seems redundant to have to install another skin, or even just another instance of Joomla, including a mobile sub-domain name (m.cnn.com). In the following paragraphs we will explore the ways of building a simple component to produce great mobile skins of your site on the fly.
One great component that works in a similar vein is the JoomlaFish component that substitutes content from one language into another. It does this very simply and with a great URL structure. For example an English version of an article would be: http://myexample.com/en/my-content while a German version might be: http://myexample.com/de/my-content. The only thing that has changed in the URL is the language identifier from en -> de. In a similar vein would it not be great if a regular link on your site could be: http://myexample.com/my-content changed just to http://myexample.com/m/my-content with the exact same content just with an m inserted to signify a mobile layout? Not only would most of the link structure stay intact but you could translate all content into mobile compatible content by just inserting one addition element into the URL.
One could ask you is this better than any plugin that detects a mobile browser and loads up an alternative template? Well it give the user a choice between a mobile version of a site and a normal version. In addition the link URL is slightly separate so certain incompatible elements like flash can be removed right from the start. In addition writing this into a component allows different mobile skins to be applied. If the mobile skin component detects an iPhone, it applies an Apple skin. If it detects an Android phone, a android styled skin. The same for a phone with basic WAP capabilities. Each phone has different capabilities so it would be useful to manage skins from one central spot vs. designing many skins using the Joomla template function.
We have been actively developing this component and are ready to show a very early version to demo what we are trying to achieve. In this demo you can add /mobile/ after our domain name to see an iPhone optimized skin displaying content. We did not change any content at all, just installed our component. Please note that there are some bugs and that some functionality is missing in this version, but that it is an adequate demo of what we are trying to achieve:
Ex:
Our Blog:
http://vergegraphics.com/blog/
becomes:
http://vergegraphics.com/mobile/blog/
Feel free to try it on any other content link in the Blog and Our Works sections, as these are the only ones we have enabled. Also note that plugins are not executed in this version, so some code may show up n the sites.