So findet man im Extensiopn Repository nur 5 Suchergebnisse zum Thema “Mobile” (http://typo3.org/extensions/repository/?tx_terfe_pi1[view]=search&no_cache=1&tx_terfe_pi1[sword]=mobile), während man z.B. auf der WordPress Seite ganze 383 Plugins zu diesem Thema findet (http://wordpress.org/extend/plugins/search.php?q=mobile&sort=). Bei Drupal sieht es ähnlich aus.

WordPress bietet diverse Mobile Helferlein wie z.B. fertige Templates, Integration von  jQuery Mobile, diverse mobile detections usw. Auch gibt es bereits Apps für WordPress http://wordpress.org/extend/mobile/.

Die zwei Systeme sind sicherlich keine richtige Konkurrenz zu TYPO3 , aber man merkt, wie andere Systeme Gas geben und mit zusätzlichen Features immer wieder punkten können.

Dies beruht auf der Annahme, dass die mobilen Browser alle neuen Features unterstützen.

Da dies jedoch nicht immer der Fall ist kann diese Tabelle von Maximiliano Firtman sehr nützlich sein.

http://mobilehtml5.org/

Es gibt aber auch Beispiele von älteren CSS Eigenschaften, die nur noch teilweise verwendet werden können.

Ein gutes Beispiel ist hier die Eigenschaft “Position: fixed”, die in fast allen mobilen Browsern deaktiviert wurde.

1. Als erstes auf einer neuen Seite eine neues Seitentemplate einstellen (CSS-Styled-Content einbinden):

#genug breite
styles.content.imgtext.maxW = 100000
tt_content.image.20.maxW = 100000
page = PAGE
#jquery muss am Platz sein
page.includeJS.file1 = fileadmin/template/js/jquery-1.4.min.js
#folgende Dateien werden weiter unten im Artikel beschrieben
page.includeCSS.file1 = fileadmin/template/css/mobile_slider.css
page.includeJS.file2 = fileadmin/template/js/mobile_slider.js
page.5 = TEXT
page.5.value=<div id="slider"><div id="mask">
page.10 < styles.content.get
page.15 = TEXT
page.15.value=</div></div>

Warum die ganze Div-Parade notwendig ist:

Die Logik ist geliehen von: http://css-tricks.com/create-a-slick-iphonemobile-interface-from-any-rss-feed/

2. Dann ein Image-Element in der Mittleren Spalte platzieren mit mehreren Bildern füllen, eine Reihe je Bild:

3. Dann jQuery einbinden

4. Dann die Datei mobile_slider.js:

$(document).ready(function(){
	$('img:not(:last)').click(function() {
		$("#mask").animate({left: "-=320px"});
	});
	$('img:last').click(function() {
		$("#mask").animate({left: "0px"});
	});
});

Dann die Datei mobile_slider.css:

* {margin: 0 !important;}
#slider { width: 320px; overflow: hidden; position: relative; }
#mask { width: 1280px; position: relative; left: 0px;}
.csc-textpic-image { width: 320px; float: left; overflow: hidden;}

Und fertig!

Leider sind die Bildhöhen und Größen noch nicht perfekt justiert, da gebe ich ein Update, wenn wir weiter sind.

Wenn allerdings niemand diese Templates findet – ergo – nutzt, ist mit einem cleveren Routing geholfen:

#####Mobile devices routing#######
#Mobile devices routing
RewriteCond %{HTTP_HOST} www\.domain\.de$ [NC]
RewriteCond %{HTTP_ACCEPT} ^.*html.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} (HTC|Ericsson|BlackBerry|Nokia|iPhone|Mobile) [NC]
RewriteRule ^(.*)$ http://m.domain.de/$1 [L,R=301]

#m.domain.de nur für mobile clients erlauben
RewriteCond %{HTTP_HOST} m\.domain\.de$ [NC]
RewriteCond %{HTTP_ACCEPT} ^.*html.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !(HTC|Ericsson|BlackBerry|Nokia|iPhone|Mobile) [NC]
RewriteRule ^(.*)$ http://www.domain.de/$1 [L,R=301]