Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Flexibel

Sonnenseiten: Flexibel

Benutzerfreundlich sind klassische Webseiten im Smartphone meist nicht, auch wenn sich die Inhalte skalieren lassen. Renate Hermanns zeigt ein Beispiel für ein Webseiten-Layout, das sich nicht nur an unterschiedliche Bildschirmbreiten anpasst, sondern auch noch gut aussieht.

Es soll Webdesigner geben, die lieben fixe Layouts mit fest positionierten Seitenelementen und nicht skalierbaren Schriften. Kleine Bildschirme erfordern neue Konzepte. Webseiten müssen heute flexibel sein, um auch auf dem Smartphone eine gute Figur machen.

Neuer Ansatz

Diese moderne Art der Webseiten-Architektur nennt sich »responsive«. Die flexible Anpassung an die Breite des Ausgabemediums erreichen Webworker mit einer in der Spezifikation für CSS3 enthaltenen Technik, genannt »Media Queries«. Mit ihnen lässt sich ohne Javascript die Breite des Browserfensters abfragen und ein dafür angepasstes Stylesheet laden.

Flexibles Design

Ein Beispiel, das mir gut gefällt, ist der Webauftritt von »Elmastudio«. Im großen Bildschirm sieht der Nutzer übersichtlich nebeneinander angeordnete Bereiche im Blog-Design. Das flexible Konzept erschließt sich erst, wenn man das Browserfenster verkleinert. Die Seitenbereiche ordnen sich je nach Fenstergröße neu an. Was auf großen Bildschirmen dreispaltig nebeneinander steht, erscheint in der verkleinerten Ansicht nur noch einspaltig untereinander. Für Netbooks und Tabletts gibt es Zwischenstufen mit zwei Spalten nebeneinander und der dritten darunter.

Screenshot: Elmastudio

Neues Konzept

Die Seite ist dennoch benutzerfreundlich und weitgehend intuitiv zu bedienen. Die beiden Designer von »Elmastudio« haben sich dazu genau überlegt, welche Teile der Seite nach unten wandern oder gar weggelassen werden können. Das zeigt sich beispielsweise in der Navigation, die in der vollen Breite Haupt- und Unterpunkte enthält. Auf dem Smartphone sind nur noch die Hauptkategorien sichtbar. Was vorher einfache Links waren, sind in der schmalen Ansicht Buttons in brauchbarer Größe für einen Touchscreen. Die Schmuckbilder der Blogübersicht sind für das Smartphone ersatzlos gestrichen.

Alles, was ein Blog braucht

Den Nutzergewohnheiten entsprechend stehen die Beiträge oben, direkt hinter der Hauptnavigation. Aber auf Kategorienübersicht und Kommentare müssen Besucher nicht verzichten und die Formulare sind gut benutzbar. Trotzdem bleibt das Design in allen Breiten ansprechend.

Übrigens handelt es sich hier um ein WordPress Theme, das es unter dem Namen »Yoko« auch zum kostenfreien Download gibt. Wer mit responsive Design experimentieren will, findet hier eine gute Grundlage.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Kommentare

Peter
am 07.08.2011 - 00:14

Diese Seite zeigt schön, was man mittels Responsive Webdesign aus Websites machen kann.

Permanenter Link

Die Kommentare sind geschlossen.