Webseiten für Mobilgeräte erstellen

Spezielles CSS für mobile Browser

von - 20.02.2012
Mobile Seiten mit Wirenode: Hier erstellen Sie eine mobile Website und statten diese mit Funktionen wie einer Google Map aus (Bild B).
Mobile Seiten mit Wirenode: Hier erstellen Sie eine mobile Website und statten diese mit Funktionen wie einer Google Map aus
Beim Einsatz von CSS zur Seitengestaltung lassen sich für unterschiedliche Medientypen verschiedene Stylesheets hinterlegen. Manche Webseiten halten so beispielsweise unterschiedliche Formatierungen für die Bildschirmausgabe und den Druck bereit.
Auch die Ausgabe auf Smartphones und Tablets lässt sich mit einem Medientyp vorgeben. Dabei erstellen Sie für den Computer und Mobilgeräte jeweils eine eigene CSS-Datei und fügen anschließend folgende Zeilen in den -Bereich Ihrer HTML-Seite ein:
<link rel="stylesheet" type="text/css" media="screen" href="pc.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="phone.css" />
Mit CSS3 können Sie die Anzeige auch an der Bildschirmauflösung festmachen. Folgende Zeile sorgt dafür, dass bei einer Bildschirmbreite von maximal 480 Pixeln ein eigenes Stylesheet „klein.css“ verwendet wird:
<link rel="stylesheet" type= "text/css" media="only screen and (max-device-width: 480px)" href="klein.css" />
Vorschau im Smartphone: Bei Onbile bauen Sie per Klick eine Mobilseite. Der kostenlose Dienst erfordert nur eine Anmeldung (Bild C).
Vorschau im Smartphone: Bei Onbile bauen Sie per Klick eine Mobilseite. Der kostenlose Dienst erfordert nur eine Anmeldung
In diesem Stylesheet können Sie dann das Seitenlayout ebenso anpassen wie die Schriften. Bei Bildern sollten Sie nur die Darstellungsgröße ändern und nicht ein kleineres Bild verwenden. Alternativ greifen Sie zu einem Trick: Wenn Sie Bilder als Hintergrund von <div>-Elementen verwenden, können Sie über das CSS-Attribut background-image:url(bild.png) auch eine andere Bilddatei einblenden.

Online-Dienst: Schneller zum Ziel

Das Umstellen der Website mit CSS hat seine Grenzen. Manche Seiten sind zu umfangreich, als dass sich aus Ihnen per CSS eine stress- und frustfrei durchsuchbare Webseite machen lässt. In diesem Fall sollten Sie eine Webseite speziell für mobile Geräte anbieten. Dafür eignet sich beispielsweise Maqetta, ein Editor für mobile Benutzeroberflächen.
Browserweiche mit Javascript: Dieses kleine Script prüft allerdings nur, ob es sich um ein iPhone handelt (Bild D).
Browserweiche mit Javascript: Dieses kleine Script prüft allerdings nur, ob es sich um ein iPhone handelt
Möchten Sie möglichst schnell eine kleine, mobile Webseite bauen, greifen Sie am besten auf einen Online-Dienst zurückgreifen. Zum Beispiel lassen sich mit den kostenlosen Angeboten von Wirenode oder Onbile im Handumdrehen kleine Mobil-Webseiten zusammenstellen.

Browserweiche mit Javascript

Wollen Sie Seitenbesuchern automatisch eine geeignete Seite anzeigen, müssen Sie feststellen, welchen Browser oder Gerät sie benutzen. Mit Javascript lassen sich Fenstergröße, Browser oder das Betriebssystem herausfinden. Die Methode hat aber zwei entscheidende Nachteile: Im Browser des Benutzers muss Javascript aktiviert sein, und Sie müssen eine lange Liste der verschiedenen Browser und Geräte anfertigen, die zur Entscheidung führt, welche Seite angezeigt werden soll.
Verwandte Themen