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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…