Mobile Platforms

In JYAML 4.x a mobile template is already predefined. This based currently on jQuery Mobile. Since it is very difficult to build a special layout for all Mobile devices. Therefore, only the most important elements as the main content and main navigation are integrated. Here, only the mobile detector is at the forefront of this matter allows.

The predefined mobile template is only for an example and must be very probably to be adjusted to your needs. There are no official support for the development of mobile templates. As an alternative to jQuery Mobile I still recommend the site Mobile Boilerplate.

Responsive Design

Probably not many need a special mobile template, like jQuery Mobile. But the layout should be optimized for Smartphones and Tablets.

Responsive Design is a technique using CSS Media Queries to read dynamically certain properties of a device. For example you can get the maximum width of the screen or the current width of the browser and then determine specific CSS definitions. This also works in all modern browsers on an ordinary PC.

For this you can find in the template directory a CSS-File (screen.responsive.css) prepared with a few simple Media Query examples. This CSS file is loaded automatically.

Not everyone of course has all the possible devices lying around at home. But there are some tools, such as Mobilizer, with which one you can simulate the most popular mobile devices.

Mobile Detector

When enabled, the mobile detector does try to detect the Mobile-Device. If this is the case, an appropriate mobile template automatically loaded.

Is not needed, if the layout is adjusted only by with Responsive Design.

Force an Template-Style for Mobile Devices

This option is available if a other Template-Style will be used for Mobile templates. So you can use JYAML, e.g. for Mobile templates only. If this option is enabled and a mobile device is detected, all other assignments of Joomla! Template-Styles are ignored.

Creating of Mobile-Templates

In principle, the same directories are in use described in the Layout Options (HTML-Templates). The only difference being now is, a additional sub-directory /mobile/ will be searched of an corresponding file (e.g. /html/index/mobile/).

You can find the predefined jQuery Mobile Template in /html/index/mobile/default.php.

The file default.php is loaded on any detected Mobile device. But are able to load different templates for special devices (e.g. iPhone, Android or Palm Handy), if you create these in the corresponding directory /mobile/.

Following a list of supported devices are can be differentiated in addition to file names:

• All recognizable Mobile Devices (default.php)
• Android Platform (android.php)
• Blackbarry (blackbarry.php)
• iPhone / iPod (iphone.php)
• iPad (ipad.php)
• Opera Mobile (opera.php)
• Palm (palm.php)
• Windows Mobile (windows.php)
• Generic: Means for example: WAP-Supported Phones, Kindle and other Internet-enabled Mobile Devices. (generic.php)
  Note: Generic Mobile devices usually can only display plain text properly.

Depending on the case, you must now also adjust the template of extensions (modules and components), especially for the mobile view. This can already be realized with Template Output-Overrides (if it supports the extension).

In order to build an additional switch for this purpose you are able to use method 'getMobile()'. Following is an example PHP-Code:

<?php

$jyaml = JYAML::getDocument(); // jyaml document object
$mobile = $jyaml->getMobile(); // returns boolean
$mobileDevice = $mobile->getCurrentMobileDevice(); // result is equal the file names 

if( $mobileDevice == 'iphone' ) 
{
  echo 'output for iphone';
} 
elseif( $mobileDevice == 'android' ) 
{
  echo 'output for android';
} 
elseif($mobile->isMobile()) 
{
  echo 'output for all(other) mobile devices';
} 
else {
  echo 'default output (non mobile)';
}

?>

Mobile/Desktop Switcher

You already know it from mobile optimized pages (e.g. Google) - below in the footer is a link to the normal (non-mobile) variant. There are also a template in JYAML for this. The file is located in the html directory of the template and is called mobileSwitcher.php. If necessary the file is already loaded in the index templates.