Teil 3: Mobiles Webdesign
- Mobiles Webdesign
- Teil 2: Mobiles Webdesign
- 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...
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.
