Mobile Plattformen

In JYAML 4.x ist bereits ein Mobile Template vorbereitet. Dieses basiert zur Zeit auf jQuery Mobile. Da es sehr schwer ist ein spezielles Mobile Layout für alle Eventualitäten zu gestallten, sind nur die wichtigsten Elemente wie Hauptinhalt und Hauptnavigation integriert. Spalten (also die Module) werden nicht angezeigt. Hier steht lediglich der Mobile Detektor im Vordergrund der diese Sache ermöglicht.

Das vorbereitete Template soll nur als Beispiel dienen und muss sehr wahrscheinlich auf die eigenen Bedürfnisse angepasst werden. Für die Entwicklung von Mobilen Template gibt es auch keinen offiziellen Support. Als alternative zu jQuery Mobile empfehle ich noch die Seite Mobile Boilerplate.

Responsive Design

Wahrscheinlich werden viele kein spezielles Mobile Template, wie jQuery Mobile, benötigen. Das Layout soll aber trotzdem für Smartphones und Tablets optimiert werden.

Responsive Design ist eine Technik mit der man mittels CSS Media Queries bestimmte Eigenschaften eines Gerätes dynamisch auslesen kann. Man kann z.B. die maximale Breite des Bildschirms, die aktuelle Breite des Browsers, etc.  auslesen und dafür spezielle CSS Definitionen festlegen. Dies funktioniert übrigens auch in allen modernen Browsern auf einem gewöhnlichen PC.

Im Template Verzeichnis ist hierfür bereits eine CSS-Datei (screen.responsive.css) mit einigen einfachen Media Query Beispielen vorbereitet. Diese CSS-Datei wird automatisch geladen.

Natürlich hat nicht jeder alle Möglichen Geräte Zuhause rumliegen. Es gibt aber einige Tools, wie den Mobilizer, mit deren Hilfe man die meist genutzten Mobilen Geräte simulieren kann.

Mobile Detektor

Wenn aktiviert, versucht der Mobile Detektor das Endgerät als Mobile-Device zu erkennen. Wenn dies der Fall ist wird automatich ein entsprechendes Mobile Template geladen.

Wird nicht benötigt, wenn das Layout ausschließlich mittels Responsive Design angepasst wird.

Template-Style für Mobile Endgeräte erzwingen

Diese Option steht zu Verfügung, wenn ein andere Template-Style als Mobile Template verwendet werden soll. Damit können Sie JYAML z.B. auch nur für Mobile Templates verweden. Wenn diese Option aktiviert ist und ein Mobiles Endgerät erkannt wird werden alle anderen Template Zuweisungen von Joomla ignoriert. Das laden wird somit unabhängig von anderen Template-Zuweisungen erzwungen.

Erstellen von Mobile-Templates

Vom Prinzip sind die gleichen Verzeichnisse zu beachten wie in den Layout Optionen (HTML-Templates) beschrieben. Nur mit dem Unterschied das nun ausgehend vom Verzeichnis der Unterordner /mobile/ nach einer entsprechenden Datei gesucht wird (z.B. /html/index/mobile).

Das vorbereitete jQuery Mobile Template befindet sich in /html/index/mobile/default.php.

Die Datei default.php wird für jedes erkannte Mobile Endgerät geladen. Sie können aber z.B. für ein iPhone, Android und Palm Handy unterschiedliche Templates laden lassen, wenn Sie eine entsprechende Datei im /mobile/ Ordner anlegen. Folgend eine Liste von unterstützten Endgeräten die zusätzlich mit Dateinamen differenziert werden können:

• Alle erkennbaren Mobilen Endgeräte (default.php)
• Android Plattform (android.php)
• Blackbarry (blackbarry.php)
• iPhone / iPod (iphone.php)
• iPad (ipad.php)
• Opera Mobile (opera.php)
• Palm (palm.php)
• Windows Mobile (windows.php)
• Generic: Dazu zählen z.B. WAP-Fähige Handys, Kindle und sonstige Internetfähige Mobile Endgeräte. (generic.php)
  Hinweis: Generische Mobile Endgeräte können meist nur reinen Text richtig darstellen.

Je nach Fall müssen nun auch noch die Templates der Erweiterungen (Module und Komponenten), speziell für die Mobile ansicht, angepasst werden. Dies kann man ja bereits mit den sogenannten Template-Overrides für die normale Anwendung mit Joomla! sehr schön realisieren (soweit es die Erweiterung unterstützt).

Um eine zusätzliche Weiche für diesen Zweck zu bauen gibt es in JYAML die Methode 'getMobile()'. Folgend ein Beispiel 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

Man kennt es von bereits Mobile optimierten Seiten (z.B. bei Google) - unten im Footer ist ein Link um auf die normale (nicht Mobile) Variante umzuschalten. Hierfür gibt es in JYAML ebenfalls eine Vorlage. Die Datei befindet sich im html Verzeichnis des Templates und nennt sich mobileSwitcher.php. In den Index-Templates wird diese Datei, wenn notwendig, bereits mit eingebunden.