Die Praxis, Webseiten für eine bestimmte Mindest-Bildschirmgröße zu gestalten, findet bald ihr Ende an der gelebten Realität. Moderne Endgeräte wie iPhone, iPad und Google TV, aber auch der Boom an hochauflösenden TFT-Monitoren setzen die Zeichen für neue Standards im Web-Design.

Cross-Platform Web-Design für Handy, PC und TV - Mrotzeck Agentur für Werbung

Web-Design für alle Gewässer.

Die über Jahre hinweg kultivierte Praxis, Webseiten für eine bestimmte Mindest-Bildschirmgröße zu gestalten, findet bald ihr Ende an der gelebten Realität. Der gängige Standard - eine Bildschirmbreite von 1024 Pixeln bei einer Höhe von 600-768 pixeln, abzüglich Steuerungselementen von System und Browser - feiert bald runden Geburtstag, hat jedoch mit der Praxis nicht mehr viel zu tun.

Auf der einen Seite haben wir mit einer Reihe von mobilen Endgeräten einen Trend zur Miniaturisierung. Während die Netbook-Generation der Mindest-Voraussetzung noch weitestgehend entspricht, erleben wir auf dem Tablet die Wiedergeburt des Hochformates - und auf gängigen Smartphones eine Verkleinerung der Pixelbreite um mehr als die Hälfte.

Gleichzeitig hat uns der FullHD-Boom eine quasi-Verdopplung der Bildschirmfläche bei stationären Computern beschert. Auf satten 1920 Pixeln im Vollbild stehen klassische 1024er-Designs bestenfalls noch zentriert inmitten der schier endlos weiten Leere. Google's neuer Vorstoß, das Internet auch auf den heimischen TV-Monitor zu bringen, wird diesen Trend ebenso wenig bremsen wie der laufende Preisverfall im TFT-Segment.

Flexibles Layout

Der wohl einfachste Weg zu Web-Layouts, die sich der Anzeigebreite des Browsers anpassen, sind flexible Breiten in der Formatierung. Mit einer prozentualen Aufteilung der verfügbaren Fläche entsteht ein ausgewogenes Bild.

Aus Sicht des Designers sind solche Layouts kritisch zu sehen, da Proportionen hier oft unkontrolliert auseinander laufen. Gleichzeitig sind flexible Designs zwar für einen gewissen Toleranzbereich gut geeignet, versagen jedoch bei extrem breiten Auflösungen oder auf Handy-Displays.

Elastische Layouts

Einen Ansatz zum Umgang mit unterschiedlichen Bildschirmauflösungen bieten sogenannte elastische Layouts. Diese unterscheiden sich von statischen Layouts im Wesentlichen durch ihre Art der Programmierung - da alle Abmessungen variabel gehalten sind, kann eine elastisch angelegte Seite proportional auf eine beliebige Größe skaliert werden.

Was in der Theorie gut klingt, birgt in der Praxis eine Reihe von Schwierigkeiten. So leidet in einem elastischen Layout oft die Darstellung eingebundener Grafikdateien; AJAX-gesteuerte Animationen sind ebenso problematisch wie die Darstellungs-sichere Einbindung von Multimedia Inhalten.

Geräteabhängige Formatierung

Mit CSS3 besteht erstmals die Möglichkeit, ein Layout von Geräteeigenschaften wie Farbtiefe oder Bildschirmgröße abhängig zu machen. So kann bsp. abhängig von der Bildschirmgröße ein Text mehrspaltig oder fortlaufend untereinander dargestellt werden; eine Marginalspalte kann auf kleinen Displays als Absatz eingeschoben oder ganz ausgeblendet werden.