Geschrieben von Christian Schnettelker

Schlagwörter: ,

Elastisches, fluides Design

Im Gegensatz zu einem DIN A4-Blatt, welches genormte Ausmaße hat, weiß man als Webdesigner nie, mit welchem Bildschirm- bzw. Fensterformat das Werk später angesehen wird. Es kann auf einem Smartphone mit vergleichsweise winzigen Display, am Tablet oder aber zuhause am PC mit großem 27″ Monitor betrachtet werden.

Auch weiß man nicht, ob der Besucher das Browserfenster überhaupt maximiert, also auf volle Bildschirmgröße gebracht hat, denn es gibt nach meinen Erfahrungen zwei Nutzertypen:

Fullscreener und Überlapper

Ein „Fullscreener“ betreibt sämtliche Programme in der maximalen Auflösung, also zu Neudeutsch „im Fullscreen“. Ganz gleich, ob Browser, Mailprogramm oder Textverarbeitung – es wird immer die vollständige Bildschirmfläche genutzt, er möchte offenbar vom Hintergrund oder anderen Programmen nicht abgelenkt werden.

Das Gegenteil vom Fullscreener ist der „Überlapper“, er arbeite nur in Ausnahmefällen im Fullscreen, es überlappen sich alle mögliche Fenster und ein Teil des Desktops ist oft auch noch zu sehen. Ich selbst bin übrigens bekennender Überlapper, u.a. deswegen kann ich mit den bildschirmfüllenden „APPs“ von Windows 8 auch nichts anfangen, siehe meinen Artikel vom 27.Oktober 2012.

Elastizität ist gefragt

Ziel der Webseite sollte natürlich sein, möglichst auf allen Geräten und in den Fenstern aller Benutzertypen gut auszusehen. Erstes Mittel dazu ist die Zentrierung des Inhalts, dieser „quetscht“ sich so nicht an den Rand eines 27″ Bildschirmes, sondern steht immer in der Mitte. Eine weitere Gestaltungsmöglichkeit bietet der Hintergrund, er kann, gewusst wie, so eingestellt werden, dass der Browser ihn automatisch an die aktuelle Größe des Fensters anpasst.

16:9 - Bildschirm 4:3 - Bildschirm
Oben ein Beispiel aus der Praxis, der Hintergrund ist so angelegt, dass er bei größerer Auflösung passend gestreckt wird, er trotzdem aber zum zentrierten Inhalt der Seite passt. Der rote Balken des Hintergrundbildes oben wirkt also als elastische, optische Verlängerung der Skyline im Hauptinhalt.

Maximale Breite des Inhalts

Auch die maximale Breite des Inhalts sollte gut überlegt sein damit dieser möglichst überall gut zu lesen ist. Da die laut www.webhits.de am häufigsten vorkommende Bildschirmauflösung zur Zeit 1024 * 768 Pixel ist wähle ich, als Kompromiss zwischen Inhalt und Rand, üblicherweise eine maximale Breite des Inhalts von ca. 910 Pixeln, um noch etwas Abstand zum Hintergrund zu lassen. Bekannt ist auch das sogenannte „960er Grid“, ich lasse aber gerne noch etwas mehr Platz zum Rand, deshalb 910 oder auch mal 930 Pixel.

Mit dieser Beschränkung wird versucht, allen Bildschirmen und Nutzertypen gerecht zu werden, dem Fullscreener ebenso wie dem Überlapper am PC-Bildschirm und dem Smartphone-Surfer. Irgendwann ist dann natürlich auch einmal Schluss, wird das Fenster zu klein oder ist die Auflösung zu gering setzt ein vertikales Scrolling ein.

Nachtrag vom 21. Juli 2013

Wie ein unflexibles, nicht fluides Layout aussehen kann und welche Probleme dies macht, lesen Sie in meinem Artikel „Webdesign-Fehler, Folge 1: Unflexibles Layout“.

Nachtrag vom 22. Oktober 2015

Dieser Artikel ist nicht so veraltet, wie es zuerst aussehen mag. Denn: den Trick mit dem flexiblen Bildschirm-Hintergrund verwende ich, wenn eine responsive, an mobile Geräte angepasste Webseite auf einem großen PC-Bildschirm angezeigt wird, auch weiterhin.

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn

Kommentare

Kommentare

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen und Einzeilern. Eine korrekte Rechtschreibung wird erwartet.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Die Kommentare werden moderiert, offensichtliche SEO-Kommentare nicht veröffentlicht.