LimeSoda Blog ☰ Zeige Kategorien

Mobile version einer Website mit Typo 3 und JQuery mobile

Immer mehr Internet-Nutzer surfen mobil, weswegen auch eine Optimierung für mobile Browser und Geräte für die Web Entwicklung immer wichtiger wird. Eine Seite die nicht für mobile Geräte optimiert wird ist häufig umständlich zu bedienen, da der User die meiste Zeit mit zoomen verbringen muss. Von vielen Fehlern und elendig langen Ladezeiten ganz einmal abgesehen. Mobile Geräete erreichen weder die Leistung noch die Geschwindigkeit von gewöhnlichen Rechnern.

Als mir vor knapp einer Woche nahegelegt wurde, die mobile Version für eine Website (http://www.lac.coop/) umzusetzen, die bereits mit Typo 3 fertiggestellt worden war, sah ich mich zunächst einmal mit einer Menge von Problemen konfrontiert, die es zu lösen galt. Ich möchte in diesem Tutorial gerne den Workflow und die Lösungsansätze dokumentieren, um zumindest einige Lösungsansätze festzuhalten. Da ich selbst auch kein Mobile-Web oder Typo 3 Guru bin, sind Verbesserungsvorschläge durchaus willkommen.

Standardbrowser VersionOriginal
Mobiles Gerät

 

Grundsätzliches

Mobile Browser haben häufig Probleme mit größeren Javascript-Konstrukten für Desktop Browser. Dafür entwickelt sich das mobile Internet viel schneller, weswegen im mobilen Bereich durchaus HTML 5 und CSS 3 schon gebrauchsüblich sind, was neuere Geräte betrifft. Da der mobile Markt boomt und es unglaublich viele Geräte gibt, muss eine mobile Website immer ein Kompromiss zwischen optischer/funktionaler Qualität und Abwärtskompatibilität sein. Oder man entwickelt mehrere Versionen. Eine wirklich gute Einführung in die Entwicklung für mobile Geräte ist die Safari Developer Library, in der es detailierte Erläuterungen zu dem Thema gibt und die man auch „Nicht-Apple-Freunden“ durchaus ans Herz legen kann.

JQuery: Mobile Framework

Ein bekanntes Javascript-Framework für mobile Geräte zu verwenden empfiehlt sich: Es nimmt einem eine Menge Arbeit ab, hat meistens recht schöne Effekte, wird gewartet und hilft außerdem mit dem Kompatibilitätsproblem: Es wird ja versucht, es für soviele Geräte wie möglich zu optimieren. In diesem Artikel wird JQuery Mobile verwendet. Es scheint recht populär zu sein, ist leicht zu lernen und schien mir für diese Aufgabe einfach gut geeignet (Weitere Beispiele für mobile Frameworks).

Das Template

Eine mobile Website unterscheidet sich in der Regel wesentlich von der Standard-Version einer Website. Wenn diese einen tatsächlichen Vorteil bieten soll, wird daher sowohl auf die Verwendung des Original-Templates in Typo 3 als auch auf die Verwendung sämtlicher Plugins der Hauptseite verzichtet, die sich mit der Optik oder Javascript Effekten beschäftigen. Zumindest in meinem Fall führten diese nämlich auf den Testgeräten zu Abstürzen und vielen Fehlern. Mit Der Typoscript Anweisung

config.disableAllHeaderCode = 1

in einer Condition lassen sich sämtliche Header-Informationen der Hauptseite für mobile Geräte ausblenden.

Dafür wird ein eigener Header erstellt. Es gibt eine Reihe von Meta-Tags speziell für Mobile Geräte und teilweise noch spezieller für das iPhone, deren Verwendung im Header empfehlenswert ist:

<meta name=“viewport“ content=“width=320,user-scalable=false“ /> – störendes Scroll-Verhalten für die speziell angepasste Seite deaktivieren
<meta name=“apple-mobile-web-app-capable“ content=“yes“ /> – Versetzt die Anwendung auf Apple Geräten in den Vollbild-Modus
<meta name=“apple-touch-fullscreen“ content=“yes“ /> – lässt die Status-Bar bei Apple-Geräten verschwinden

Die Aufteilung der Seiten in JQuery mobile ist in interne Seiten, die über die id-verlinkt werden (schnelles Laden) und externe Seiten (langsames Laden) unterteilt, welche jeweils über Ajax nachgeladen werden. Es empfiehlt sich also innerhalb einer Seite möglichst viele interne Verlinkungen zu verwenden. So lassen sich beispielsweise eine Navigation und eine Inhaltsseite nach folgendem Schema gestalten, während auf weniger wichtige Inhalte komplett verzichtet wird:

<div data-role=“page“ id=“navigation“>

<!– ###NAVIGATION### –>
<!– ###NAVIGATION### –>

</div>
<div data-role=“page“ id=“content“>

<!– ###CONTENT### –>
<!– ###CONTENT### –>

</div>

Alle Bilder sollten mittels Javascript proportional auf Handy-Größe verkleinert werden z.B. :

// skaliert sämtliche Bilder auf eine annehmbare Größe, mit Ausnahme des Header Image
function scaleImages() {
maxh = 150;
maxw = 150;

var imgs = document.getElementsByTagName(„img“);

for(i=0;i var ratio = maxh/maxw;
var img = imgs[i];

if(img.getAttribute(„id“) != „lac_head_img“) {
if (img.height/img.width > ratio){
// height is the problem
if (img.height > maxh){
img.width = Math.round(img.width*(maxh/img.height));
img.height = maxh;
}
} else {
// width is the problem
if (img.width > maxh){
img.height = Math.round(img.height*(maxw/img.width));
img.width = maxw;
}
}
}
img.setAttribute(„class“,“ready“);
}
}

Nicht interne Links erhalten das Attribut rel=“external“ per Javascript, um zu funktionieren:

// jeder Link der nicht unmittelbar auf eine id verweist, bekommt das Attribut rel="external"
function makeLinksExternal() {
var atags = document.getElementsByTagName("a");

for(i=0;i

var temp = atags[i].getAttribute(„id“);
if(!temp) {
temp = „“;
}
if(temp[0] != „#“) {
atags[i].setAttribute(„rel“,“external“);
}
}
}

Die Typoscript Konfiguration

Da die mobile Version eine andere, abgespecktere Struktur hat, sind in der Typoscript Konfiguration einige Änderungen nötig, die nur für mobile Geräte gelten. Es gibt die Möglichkeit die Condition

[device = wap,pda]
... mobiles codes ...
[global]

zu verwenden, die auf der Typoscript Extension mobile device detection basiert. Empfehlenswert ist aber auch eine eigene Funktion, falls die vorhergehende Lösung nicht ausreicht:

[userFunc = user_match(checkMobileBrowser)]
... mobiles codes ...
[global]

Die function user_match($cmd) { … } wird in die localconf.php gecoded und kann nach Belieben weiter verfeinert werden. Man kann sich bei der Mobile Device Detection dabei an der Lösung von detectmobilebrowsers.mobi orientieren. Um nicht nur Browser-Namen, sondern auch Browser-Versionen zu gegenzuchecken (das ist zum Beispiel der Fall, wenn es noch eine simplere Version ganz ohne JQueryMobile geben soll), kann man z.B. die Browscap-Klasse nutzen.

Jetzt werden unter Verwendung dieser oder mehrere Condition mit dem &&-Operator, sämtliche Menüs und Konfigurationen für die mobile Lösung angepasst.

Tipp: Wer keine Lust hat beim entwickeln die ganze Zeit auf dem Handy herumzufummeln, kann auch ein Firefox Addon wie User Agent Switcher verwenden. Dort braucht man dann nur die benötigten Mobile User Agents anlegen.

Hinterlasse einen Fingerabdruck für die Ewigkeit: Ein Kommentar bei LimeSoda!

(*) Pflichtfeld

Bewirb dich bei uns!

LimeSoda.
Digitalagentur in Wien.

Bewirb dich jetzt!
Rudolf Rohaczek

Verpasse nicht den nächsten Blog-Post von Rudolf!

Jetzt zum LimeSoda-Newsletter anmelden