Browsing on a desktop/laptop is a quite different experience than browsing on a mobile device. First of all, mobile devices can have significant limitations (small screen size, limited text-input capabilities, limited JS capabilities, ...). On the other hand, these devices also offer new opportunities (location-awareness, touch-based interaction, ...). 

The combination of these two facets is part of a project I'm currently working on. The goal is to optimize the presentation of Joomla! components based on the capabilities of the requesting device. As Joomla! components are (or at least should be :p) designed based on the Model-View-Controller (MVC) pattern, there is already a nice separation of concerns which makes a great starting point for this project.

I've looked at Progressive Enhancement (PE) and it seems an ideal approach in this context: As you design your Joomla! component, you should think in "layers". Start by making sure your component renders and works correctly on the lowest capable browser (= lowest common denominator). Next, for the more capable/recent browsers, you gradually improve functionality and presentation by adding layers of CSS and/or JS. This approach ensures an optimal experience for a broad range of devices.

You can create all sorts of enhancement layers for your component: Basic and andvanced CSS layers to enhance the style of your component. JavaScript layers to eg perform form-validation.

An other interesting option is to create layers which make use of specific device characteristics. These layers are selected based on the capabilities of the requesting device, so in addition, your component will need to perform device detection (eg WURFL), to be able to select the correct enhancement layers. Some examples: A JavaScript layer to hide optional form-fields on devices without a hardware keyboard, or one to detect the user's geolocation and mark the nearest store in a product catalog.

I've set up a small demonstration site, using the QuickCart product catalog component. For testing, the different enhancement layers are selected based on URL-parameters, but it can also be done using information from device capability detection.  

Lowest Common Denominator

A very simplistic view: no complex HTML, no CSS, no scripting. This will render correctly on any device. The following layers can be placed on top of this view. All layers are independent and can randomly be combined according to the characteristics of the requesting device.

CSS Layer

CSS + Geolocation Layers

The geolocation layer calculates the distance from your current location to the different stores. Also the nearest store is marked as such. For this demo: if your device does not support geolocation, Ghent will be chosen as your current location. 

JQuery Layer 

JQuery + CSS Layers

JQuery + CSS + Geolocation Layers

JQuery + CSS + Orientation Layers

The  orientation layer adapts CSS based on the current screen orientation. In landscape mode, the screen is wide enough to place the item description next to its image. 

iUI Layer

iUI + Geolocation Layer

iUI + Orientation Layer