Weniger ist mehr

Teil 3: Mobiles Webdesign

  1. Mobiles Webdesign
  2. Teil 2: Mobiles Webdesign
  3. Teil 3: Mobiles Webdesign

Umgang mit Bildern

Die Einbindung eines eigenen Logos auf Ihre Seite ist problemlos möglich. Bei der Integration eines Bildes über das img-Tag sollten Sie beachten, dass Sie für das Bild sowohl die Höhe als auch die Breite angeben sollten - auch wenn die Grafik bereits in der richtigen Größe vorliegt. Nur so stellen Sie sicher, dass bei der Ausgabe keine falsche Skalierung der Bildgröße stattfindet.

<div id="header"><h1><img src="mein_logo.gif"
width="75" height="50" alt="Mein Logo" /></h1></div>

Testen und emulieren

Nachdem Sie Ihre Webseiten gebaut haben, sollten Sie noch einige Prüfungen durchführen. Nur so können Sie sicherstellen, dass die Ausgabe auch Ihren Erwartungen entspricht. Die Prüfung müssen Sie in zwei Schritten durchführen:

1. Als Erstes untersuchen Sie mithilfe eines XHTML-Validators, ob die Seite korrekt aufgebaut ist und die Syntax fehlerfrei ist. Dazu stehen Ihnen unterschiedliche Online-Prüfungen zur Verfügung, wie beispielsweise unter W3C () oder Validome (). 2. Nachdem Sie sichergestellt haben, dass der Code korrekt ist, prüfen Sie als Nächstes die korrekte Darstellung auf unterschiedlichen mobilen Geräten. Dazu gibt es eine Vielzahl von Online- und Offline-Emulatoren. Eine Übersicht haben wir im Kasten "Handy-Emulatoren" zusammengestellt.

Mehrere Empfänger

Möchten Sie für den ersten Schritt in Richtung mobile Website nicht zu viel Aufwand betreiben und nur eine Website sowohl für mobile Geräte als auch für den Desktop anbieten, dann gibt Ihnen WCSS die passenden Werkzeuge an die Hand. Sie können damit automatisiert anhand des Browsers entscheiden, ob es sich bei dem jeweiligen Webseiten-Besucher um ein mobiles Gerät handelt oder einen normalen PC.

Der Schlüssel zum Erfolg liefert http, welches Ihnen in der Variable user-agent die gewünschte Information verrät.

<%
String uaheader = request.
getHeader("user-agent");
if (uaheader.indexOf("Nokia") !=
-1){
%><link href="nokia.css"
rel="stylesheet" type="text/css"/><%
}
else if (uaheader.indexOf("iPhone")
!= -1){
%><link href="iphone.css"
rel="stylesheet" type="text/css"/><%
}
else if (uaheader.
indexOf("Mozilla") != -1){
%><link href="webbrowser.css"
rel="stylesheet" type="text/css"/><%
}
%>

Somit haben Sie die Möglichkeit, gleich zu Beginn anhand des benutzten Mobilfunkgeräts zu entscheiden, welches Stylesheet genutzt wird.

Handy-Eemulatoren

Zur Prüfung des Codings Ihrer Website und zur korrekten Darstellung finden Sie verschiedene Tools:

Alternative Stylesheets

Einen genaueren Weg, Seiten auf individuelle Browser und Geräte anzupassen sind alternative Stylesheets. Diese können Sie entweder durch den Benutzer zuweisen oder im Fall von mobilen Endgeräten automatisch durch Javascript setzen lassen.

Dieser Weg macht vor allem dann Sinn, wenn Sie an mehreren Stellen in Ihrer Webseite unterschiedliche Aufrufe für Stylesheets eingebaut haben, beispielsweise um unterschiedliche Formatierungen für das gleiche Element durch kaskadierende Regeln zu erreichen.

In diesem Fall geht das Skript alle Link-Zuweisungen durch und ändert an den entsprechenden Stellen das Stylesheet. Voraussetzung ist allerdings eine korrekte Definition des link-Tags:

Das Standard-Stylesheet, welches beim Laden aktiviert werden soll, muss wie folgt definiert werden:

<link rel="stylesheet"
type="text/css" href="normal.css" title="standard" />

Das Stylesheet für die mobile Seite wird als alternate stylesheet markiert und kann alternativ geladen werden:

<link rel="alternate stylesheet"
type="text/css" href="mobile.css" title="mobile" />

Mit einem einfachen Skript können Sie anschließend zwischen den Stylesheets wechseln und so die Inhalte für die entsprechende Zielgruppe anzeigen:

function wechselStyleSheet(titel) {
var zaehler, zeiger;
for(zaehler=0; (zeiger = document.
getElementsByTagName("link")[zaehler]); zaehler++) {
if(zeiger.getAttribute("rel").
indexOf("style") != -1 && zeiger.getAttribute("titel"))
{
zeiger.disabled = true;
if(zeiger.getAttribute("titel")
== titel) zeiger.disabled = false;
}
}
}

Geben Sie beim Aufruf der Funktion wechselStyleSheet den Titel des neuen Style-sheets mit, auf das Sie wechseln möchten, also laut der vorherigen Definition wechsel StyleSheet(mobile).

Website von der Stange

Ist Ihnen der Aufwand zu groß, Ihre eigene mobile Website manuell zu erzeugen, dann sollten Sie einen Blick auf den Konfigurator von Dotmobi (site.mobi) werfen. Mithilfe des Site Builders erstellen Sie auch ohne Programmierkenntnisse Ihre eigene mobile Website oder nutzen den Assistenten dazu, eine Vorlage für Ihre Präsenz zu schaffen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".