Darstellung von Webseiten

In Zeiten des Web 2.0 wird das mobile Webdesign immer wichtiger. Es ist wichtig, dem Nutzer die eigene Seite benutzerfreundlich anzuzeigen. Auf mobilen Endgeräten ist es oftmals sehr schwierig, eine normale Webseite anzuzeigen und die gewünschten Informationen zu erhalten. Deshalb ist es essentiell, eine Lösung zu finden. Nur so gewinnt man User langfristig. In diesem Artikel erläutere ich verschiedene mobile Lösungen. Die dargestellte Höhe und Breite von Webseiten ist abhängig vom Viewport, d. h. sie variiert je nach Monitorgröße, Monitorauflösung, verwendetem Browser und Browserfenster. Die Ausmaße werden weiterhin durch die Einblendung von Scrollbalken, Seiten- oder Werkzeugleisten beeinflusst.

Layouttypen im Web
Für die Anordnung verschiedener Bereiche und Inhalte einer Webseite in unterschiedlich großen Viewports unterscheidet man verschiedene Grundtypen. Aber was ist ein Viewport? Der Viewport ist dafür zuständig, dass das Bild an einem beliebigen Zielbereich des Bildschirms richtig ausgegeben wird. Der Viewport enthält sechs Werte: Höhe und Breite des Fensters in Pixeln, die linke, obere Ecke des Fensters in Fensterkoordinaten und die Minimum- und Maximumwerte. Die Grundtypen sind:
– Fixes Layout
– Elastisches Layout
– Fluides Layout

Fixes Layout
Ein fixes Layout ist unabhängig vom jeweiligen Viewport des Besuchers. Das Layout basiert auf absoluten Pixel-Angaben für die Elemente einer Webseite und deren gesamter Ausbreitung.
Vorteile:
– Leichter zu gestalten und umzusetzen
– Elemente bleiben in ihrer Anordnung und in ihren Maßen gleich
– Seite kann mit Seitenzoom ohne Probleme vergrößert werden
Nachteile:
– Ein pixelgenaues Layout kann sich unterschiedlichen Endgeräten mit ihren unterschiedlichen Viewportgrößen nicht anpassen.

Elastisches Layout
Ein elastisches Layout verhält sich grundsätzlich wie ein fixes Layout. Einzige Ausnahme: es ist in Bezug auf Höhe, Breite, Abstände und Text skalierbar. Wird die Schriftgröße durch zoomen geändert, verändert sich das gesamte Layout proportional.
Vorteile:
– Erhöhte Zugänglichkeit (Accessibility) für ältere Browser: Wenn der Anwender im Browser die Schriftgröße ändert, verändert sich das gesamte Layout abhängig von dieser Schriftgrößenanpassung. Das Verhalten ist besonders bei älteren Browsern relevant, moderne Browser machen das automatisch.
Nachteile:
– Aufwändiger als die Umsetzung eines pixelgenauen Layouts, da sich die zu verwendenden Werte der Elemente vererben und somit auch Rundungsfehler auftreten können.

Fluides Layout
Fluide Layouts können mittels relativer CSS-Angaben eine Flexibilität aufweisen und sich dem Viewport des Betrachters anpassen.
Vorteile:
– Passt sich dem Viewport des Ausgabemediums an
– Horizontales Scrollen kann vermieden werden
Nachteile:
– Kann zu Darstellungsproblemen führen: Die Texte können zu breit oder schmal laufen und sind nicht mehr lesbar.
– Pixelgenaues Ausrichten von Elementen ist aufgrund der unterschiedlichen Viewports der Endgeräte nicht möglich.
In der Praxis werden häufig Mischformen verwendet. Als Beispiel eignet sich hierfür die Webseite von Amazon: die linke Navigations-Spalte und die rechte Spalte sind fix, die Inhalte hingegen sind fluide und passen sich an.

Bild:
Bildquelle: ©emptyglass @http://www.freedigitalphotos.net/