So aktivieren Sie die Smartphone-Funktion auf Websites

Die Nutzung des Internets durch mobile Geräte hat seit dem Start des Apple iPhone zugenommen. Aufgrund der unterschiedlichen Bildschirmgrößen mobiler Geräte und ihrer Touchscreen-Oberfläche werden Websites auf einem mobilen Gerät nicht auf dieselbe Weise angezeigt oder funktionieren, wie sie auf einem Computerbildschirm erscheinen oder funktionieren. Um die Leserschaft beizubehalten, erstellen Sie eine Smartphone-Version Ihrer Website mithilfe von Cascading Stylesheets.

Einschränkungen beim Smartphone-Browsing

Smartphone-Browsing unterscheidet sich in zwei wesentlichen Punkten vom computergestützten Browsing. Erstens ist die verfügbare Bildschirmgröße auf einem Smartphone viel kleiner als auf einem Computer. Dies bedeutet, dass einige Websites auf einem Smartphone unübersichtlich oder in manchen Fällen unlesbar erscheinen. Ein Smartphone-Benutzer muss nach unten scrollen oder eine Website vergrößern, die für die Anzeige auf dem Computer optimiert ist. Zweitens: Smartphones reagieren auf Mausklicks statt auf Cursorbewegung. Daher können Website-Elemente, die sich aufgrund der Cursorbewegung ändern, auf einem Smartphone problematisch sein. Zum Beispiel verhalten sich Elemente, die sich ändern, wenn sich der Cursor darüber befindet, auf einem Smartphone nicht wie gewünscht, da das Schweben auf einem Smartphone nichts bewirkt. Außerdem können Dropdown-Menüs für einige Smartphone-Benutzer problematisch sein.

CSS relative Größen

Wenn Sie die Größe bestimmter Elemente auf Ihrer Website ändern, müssen Sie nur die CSS-Datei für Ihre Website ändern. Ändern Sie für die Lesbarkeit des Smartphones Ihre CSS-Abmessungen und Schriftgrößen in relative Einheiten anstelle von absoluten Einheiten. Beispielsweise sollten die Breite und Höhe bestimmter Elemente in Prozent anstelle von Pixeln angegeben werden. Dadurch werden Elemente auf der Basis eines Prozentsatzes des Browserfensters oder des übergeordneten Elements bemessen. Verwenden Sie für Schriftgrößen Ems anstelle von Pixeln. Ein Em entspricht der aktuellen Schriftgröße in Pixel. Daher ist zwei Ems doppelt so groß wie die aktuelle Schriftgröße und so weiter. Diese Änderungen sollten in einer separaten CSS-Datei gespeichert werden.

CSS-Anzeigeeigenschaften

Um ein Element vollständig aus Ihrer Site auszublenden, fügen Sie dem CSS-Stil dieses Elements die Eigenschaft "display: none" hinzu. Die Eigenschaft "display: none" blendet ein Element vollständig aus, sodass es keinen Platz im Fenster beansprucht. Verwenden Sie dies für Elemente wie Dropdown-Menüs oder Bilder, die zu viel Platz auf dem Bildschirm beanspruchen. Dadurch können sich die anderen Elemente Ihrer Website im Fenster so anordnen, als ob das verborgene Element noch nie dort gewesen wäre. Wenn Sie diese Änderung verwenden, stellen Sie sicher, dass wichtige Informationen aus dem ausgeblendeten Element an anderer Stelle auf Ihrer Seite sichtbar sind.

Umleitung des Browsers

Wenn ein Gerät auf eine Website zugreift, liest es zuerst den Abschnitt des HTML-Dokuments. Sie können eine Verknüpfung zu mehreren CSS-Stylesheets im Dokumentabschnitt erstellen. Wenn ein mobiles Gerät Ihre Website lädt, lädt der Browser anstelle des Standard-Stylesheets das durch das Attribut media = "handheld" angegebene Stylesheet. Sie können den Browser auch abhängig von der Bildschirmgröße auf andere Stylesheets umleiten. Dies kann nützlich sein, wenn Sie Ihre Website für verschiedene mobile Geräte unterschiedlich gestalten möchten. Unter Ressourcen finden Sie eine Liste mit gebräuchlichen Abmessungen des Smartphone-Bildschirms.

Alternatives HTML

Wenn Sie die Organisation und das Layout Ihrer Website über eine neue CSS-Datei hinaus drastisch ändern, möchten Sie möglicherweise eine neue HTML-Datei mit den gewünschten Änderungen erstellen. Wenn Sie eine andere HTML-Datei erstellen, müssen Sie den Browser zur neuen HTML-Datei umleiten, wenn der Benutzer die Website auf einem Smartphone anzeigt. Zusätzlich zum Erkennen des mobilen Browsers müssen Sie das Skript so ändern, dass es zu Ihrer alternativen HTML-Seite weiterleitet. Siehe Ressourcen für einen Link zu Skripts zum Erkennen eines mobilen Browsers.