Webseiten für Handy & Co.CSS macht mobil

Mobiles Web

Webseiten für Handy & Co.

Internet immer und überall – das scheiterte bisher an den hohen Kosten für die mobilen Verbindungen. Mit ein Grund, warum WAP sich auf breiter Basis nicht so richtig durchsetzte. Spätestens seit der Einführung der UMTS-Flatrate werden Handys und PDAs für die breite Masse als Fenster zum Internet interessant. Wer ein Stück vom großen Mobilkuchen abhaben will, tut als Anbieter gut daran, seine Website auf diese Anforderungen einzurichten. Dabei sind allerdings nicht nur formale, sondern auch inhaltliche Aspekte zu beachten. Dieser Workshop zeigt anhand einer kleinen Beispielseite, wie Sie Ihren Web-Auftritt mit CSS und PHP mobil machen.

CSS auslagern

Webseiten für Handy & Co.

Die Grundvoraussetzung dafür ist eine saubere Trennung von Form und Inhalt. Das bedeutet: die Formatierungs- und Positionierungsinformationen müssen in einer separaten CSS-Datei vorliegen. Damit der Browser weiß, wo er die Formate findet, muss folgender Eintrag in der Header-Sektion der HTML-Datei vorgenommen werden:

In diesem Fall wird nur ein Stylesheet gezogen – unabhängig vom Ausgabegerät.

Medienspezifische Formatierung

Webseiten für Handy & Co.

Seit CSS 2.0 gibt es die Möglichkeit, mit Hilfe der Angabe “media=” nach Ausgabemedium zu differenzieren. Das könnte dann so aussehen:

In diesem Fall wird beim Drucken das Stylesheet printer.css gezogen. Hier bietet es sich beispielsweise an, den Hintergrund weiß und den Text schwarz zu formatieren und eine andere, druckerfreundliche Schriftgröße festzulegen oder Textcontainer breiter zu machen. Die meisten Browser interpretieren diese Anweisung richtig und ziehen beim Ausdruck selbsttätig das Printer-Stylesheet.

Natürlich gibt es auch für mobile Endgeräte den passenden Medientyp, nämlich media=”handheld”:

Wird diese Zeile in die HTML-Datei eingetragen, zieht der Browser im mobilen Endgerät automatisch die Style-Datei mobil.css.
Alternativ ist auch die Notierung in CSS-Syntax mit @import möglich, ebenfalls im Header-Bereich der HTML-Datei:



@import url(screen.css) screen;
@import url(printer.css) print;
@import url(mobil.css) handheld;

Anpassungen im Detail

Webseiten für Handy & Co.

Welche Möglichkeiten der Anpassung sind nun für das mobile Endgerät sinnvoll? Grundsätzlich empfiehlt sich zunächst einmal eine kleinere Schrift als in der normalen Bildschirmdarstellung, um aus dem winzigen Display mehr herauszuholen. Text sollte einspaltig dargestellt werden und mit geringerem Textabstand angezeigt werden. Außerdem müssen Ränder, Leerräume und Rahmen verkleinert werden. Im Folgenden sehen Sie ein kleines Beispiel.

Screen-Version:


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
color: Gray;
line-height : 130%;
background-color: White;
}


Mobile-Version:


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color:black;
line-height : 110%;
}


Hier wurde die Schriftfarbe der besseren Lesbarkeit halber auf Schwarz eingestellt. Außerdem ist die Schriftgröße um 10 Prozent kleiner als in der Screen-Version, und die Zeilenhöhe ist 20 Prozent niedriger.

Positionierung optimieren

Webseiten für Handy & Co.

Auch die Positionierung und die Abmessungen der Container werden verändert.

Screen-Version:


div#content {
position: absolute;
top: 100px;
left: 50px;
width: 300px;
background-color: White;
}

div#navigation {
position: absolute;
top: 110px;
left: 400px;
width: 200px;
}


Mobile-Version:


div#content {
position: absolute;
top: 40px;
left: 50px;
width: 150px;
background-color: White;
}

div#navigation {
position: absolute;
top: 10px;
left: 50px;
width: 150px;
}


In der Mobile-Version ist der Content-Container nur noch 150 Pixel breit, außerdem befindet sich die Navigation nun gleich als erstes Element oben auf der Seite statt rechts vom Content-Container, um horizontales Scrollen am mobilen Endgerät zu vermeiden.

Überflüssiges ausblenden

Webseiten für Handy & Co.

Dann gibt es die Möglichkeit, einzelne Container in der mobilen Darstellung auszublenden. Dies geschieht unter Nutzung der Anweisung display:


div#illu {
position: absolute;
top: 40px;
left: 0px;
display: none;
}


In diesem Fall wird ein Container definiert, der eine Illustration enthält, die aber in der mobilen Version nicht angezeigt wird. In den anderen CSS-Dateien fehlt der Eintrag display:none, so dass der Besucher das Bild dort sehen kann. Das funktioniert unabhängig vom Inhalt des Containers. Sie können auf diesem Weg also auch ganze Textblöcke von der Anzeige ausschließen.

Das wäre so weit auch sehr schön, wenn die mobilen Endgeräte sich ordnungsgemäß identifizieren würden. Leider tun sie das in der Praxis häufig nicht und melden sich lieber als screen und ziehen damit das falsche Stylesheet.

David Griffith hat sich in seinem Blog diesem Thema intensiv gewidmet und eine Testseite aufgebaut, mit der Sie prüfen können, wie sich das eigene Gerät meldet. In den Kommentaren gibt es bereits einen umfangreichen Geräteüberblick: www.htmldog.com/ptg/archives/000055.php.

Ein weiterer Nachteil besteht darin, dass zwar mit display:none bezeichnete Elemente ausgeblendet, aber trotzdem geladen werden, was gerade bei mobilen Endgeräten, wo oft nach übertragenem Traffic abgerechnet wird, unerwünscht ist.

Weiche mit PHP

Webseiten für Handy & Co.

Eine Lösung dieses Problems besteht darin, die Variable User Agent abzufragen und abhängig von dieser Variable das Design der Seite aufzubauen. Dies lässt sich beispielsweise mit PHP lösen. Dazu schreiben Sie eine Funktion, die sinnvollerweise in einer eigenen PHP-Datei liegt und per include eingebunden wird:


<?php
function check_mobile() {
$agents = array('Windows CE', 'Pocket', 'Mobile', 'Portable', 'Smartphone', 'SDA', 'PDA', 'Handheld', 'Symbian', 'WAP', 'Palm', 'Avantgo', 'cHTML', 'BlackBerry', 'Opera Mini', 'Nokia');

// Prüfen der Browserkennung
for ($i=0; $i<count($agents); $i++) {
if(isset($_SERVER["HTTP_USER_AGENT"]) && strpos($_SERVER["HTTP_USER_AGENT"], $agents[$i]) !== false)
return true;
}
return false;
}
?>


Diese Funktion liest die – erweiterbare – Liste von mobilen Endgeräten in ein Array ein und vergleicht dann den Inhalt des Arrays mit der vom Endgerät gemeldeten Browserkennung. Fällt der Vergleich positiv aus, wird das Handheld-CSS gezogen.

Weiche einbinden

Webseiten für Handy & Co.

Damit auf diese Funktion zugegriffen werden kann, müssen Sie sie an den Anfang jeder Webseite einbinden:


<?php
require('check_mobile.php');
$style = '';
if(check_mobile()) $style = 'handheld';
?>


Weitere Erläuterungen zu dieser Funktion vom Autor Dirk Schürjohann sind auf Selfhtml.org zu finden: aktuell.de.selfhtml.org/artikel/css/mobile-endgeraete

Auf das Beispiel übertragen, muss dann an den Anfang der Datei beispiel.php die Funktion check_mobile.php eingebunden werden:


<?php
require('check_mobile.php');
$style = '';
if(check_mobile()) $style = 'handheld';
?>




Verschiedenen Bilder …

Webseiten für Handy & Co.

Nun soll die Funktion genutzt werden, um für mobile Endgeräte ein kleineres und andersfarbiges Header-Bild anzuzeigen als für normale Browser. Dafür wird an dem Ort, an dem das Bild angezeigt werden soll, folgender PHP-Code notiert:

<?php
if ($style == 'handheld')
{
echo '';
}
else
{
echo '';
}
?>

PHP prüft, ob die Variable $style mit dem Wert handheld gefüllt ist, der durch die Funktion check_php ermittelt wurde. Ist das der Fall, wird die Datei header_mob.gif angezeigt, ansonsten die Datei header.gif.

… und Texte

Webseiten für Handy & Co.

Genauso können Sie verfahren, um für Mobilgerät und Bildschirm unterschiedliche Texte anzuzeigen. Hier wird ebenfalls mit echo gearbeitet:

In diesem Fall wird nun für den Bildschirm der Langtext ausgegeben und für den Handheld nur die kurze Zusammenfassung.

Test ohne Mobilgerät

Webseiten für Handy & Co.

Wer über gar keine oder unkooperative mobile Endgeräte verfügt, kann den Erfolg der Abfrage testen, indem er eine PC-Browser-Kennung, zum Beispiel für Opera, in die Abfrage mit einbaut:


function check_mobile() {
$agents = array(
'Windows CE', 'Pocket', 'Mobile',
'Portable', 'Smartphone', 'SDA', 'PDA', 'Handheld', 'Symbian', 'WAP', 'Palm', 'Avantgo', 'cHTML', 'BlackBerry',
'Opera Mini', 'Nokia', 'Opera'
);


In diesem Fall spielt Opera dann die Rolle des mobilen Endgeräts – was er nebenbei recht gut beherrscht, da er seit Version 7 über eine Mobil-Simulation verfügt: Über den Menüpunkt View, Small Screen oder die Tastenkombination [Shift F11] kann man sich die Ausgabe eines Mobilgeräts simulieren. In diesem Fall wird übrigens auch die für den Medientyp handheld vorgesehene CSS-Datei gezogen.

Mobiles Content-Design

Webseiten für Handy & Co.

Alle bisher vorgestellten Ansätze beschränken sich auf eine abweichende Präsentation des Inhalts, ohne auf den Inhalt selbst einzugehen. Echtes mobiles Design unterscheidet sich aber von der Standard-Website genauso wie die Website von der Drucksache: Zum einen unterliegt das mobile Endgerät formalen Beschränkungen wie einem kleinen Bildschirm, wenig RAM oder auch einer geringeren Bandbreite bei der Datenübertragung, kombiniert mit weniger Komfort bei der Dateneingabe – vor allem wenn es sich um ein Handy handelt und nicht um ein Gerät mit QWERTZ-Tastatur wie etwa das Sidekick. Hinzu kommen Beschränkungen, die sich durch die mobile Nutzung an sich ergeben, etwa wenig Zeit für die Informationsaufnahme und keine Möglichkeit, die Information zu speichern.

Das bedeutet, dass mobile Information sich noch kürzer fassen muss, noch stärker auf den Punkt kommen muss. Darüber hinaus müssen mobile Webseiten kleiner sein, nicht zuletzt wegen der Speicherbeschränkung: Statt einer längeren Seite sind also mehrere kurze anzulegen. Vor diesem Hintergrund ist es auch sinnvoll, eine mobile Version einer Website zur Verfügung zu stellen, die durch einen eigenen URL erreichbar ist und dort auch nur ausgewählte Informationen zur Verfügung stellt. Ein Beispiel für eine solche Anwendung ist die Mobilversion von Flickr: www.flickr.com/mob. Dort erübrigt sich dann auch die Browserabfrage.

Doppelte Datenhaltung ist dennoch nicht notwendig, wenn man die Website modular aufgebaut hat und beispielsweise grundsätzlich mit PHP-Includes arbeitet. In der mobilen Version werden dann andere Includes gezogen als in der Standardversion, oder auch nur ein Teil der Includes.

In dem Zusammenhang dürfte auch die neue Top Level Domain (TLD) .mobi interessant werden, die bereits Mitte letzten Jahres genehmigt wurde und speziell für mobile Web-Angebote vorgesehen ist.