Responsives Webdesign lässt Gestalter konzeptionell umdenken

14.01.14, 9:19

Die neue Flexibilität

Was ist der Unterschied zwischen Printdesign und Webdesign? Die Antwort könnte vielfältig ausfallen aber ein ganz selbstverständlicher und zugleich wesentlicher Unterschied ist das Format: Bei der manifesten Drucksache ist das Format festgelegt und unverrückbar, weil es gedruckt ist und sich deshalb nicht mehr ändern lässt. Beim Screendesign sind das Format und sogar das Seitenverhältnis inzwischen Verhandlungssache. Webdesign der Stunde hat flexibel zu sein. Diese Eigenschaft ist ganz neu, zugleich aber auch ganz alt.

Eine Webseite im WordPress-Theme „Yoko“ von Elmastudio.

Oben: Eine Webseite im WordPress-Theme „Yoko“ von Elmastudio, das von Haus aus hochgradig responsive ist. Hier zu sehen die volle Desktopgröße im Format 1.152×864 Pixel. In den nachfolgenden Screenshots zeigen wir, wie sie sich schmaleren Bildschirmen anpasst.

Responsives Webdesign: Die Kunst der Anpassung

Dass sich Webseiten nämlich flexibel gezeigt haben und sich beim Kleinerschieben des Browserfensters anders umbrechen, ist nichts Neues. Das gibt es schon seit den Anfängen des Webdesigns. Dass allerdings Webseiten sich hochgradig flexibel den unterschiedlichsten Bildschirmgrößen automatisch anpassen und was dabei passiert, das ist neu und heißt „Responsive Webseiten-Programmierung“ oder „Responsive Webdesign“.

Die schmale „Archiv“-Spalte ist hier weggefallen.

Oben: Dadurch, dass der Bildschirm in der Breite weniger Platz bietet, ist die schmale „Archiv“-Spalte, die im vorherigen Bild rechts noch zu sehen war, hier weggefallen. Außerdem ist die Navigation ganz oben zweizeilig geworden.

Große und kleine Bildschirme mit neuen Rekorden

„Responsive“ bedeutet, dass das Design der Webseite auf verschiedene Bildschirmgrößen „reagiert“. Immer neue Nahrung erhält das Thema auch deshalb, weil es ständig weitere Bildschirmgrößen gibt. Die Smartwatches von Samsung und Sony, Google Glass oder Sony zeigen, dass sogar nach unten hin, kaum eine Grenze der Verkleinerung gegeben ist. Nach oben hin haben Daten-Projektionen mit Beamern oder Großbildfernseher gezeigt, dass auch Größe immer wieder neu definiert werden muss.

Nur noch die Hauptspalte mit den wesentlichen Inhalten ist zu sehen.

Oben: Ein noch schmalerer Bildschirm führt dazu, dass alle rechten Randspalten nicht mehr zu sehen sind, nur noch die Hauptspalte mit den wesentlichen Inhalten. Man setzt in der Programmierung sogenannte „Breakpoints“ ein, die definieren, ab welcher Bildschirmbreite sich das Webseiten-Layout wie verändert.

Responsive Webseiten-Konzeption vor neuen Herausforderungen

Konzeptionell haben die zahlreichen unterschiedlichen Ausgabemedien Folgen. Man könnte den Werdegang einer normalen Webseite, wie es sie bisher gab, wie folgt beschreiben:

  • Phase 1, die starre Desktop-Webseite: Eine nicht-responsive Webseite wird gestaltet
  • Phase 2, erster Schritt zur responsiven Webseite: Sie wird in einem ersten Schritt responsive umprogrammiert, damit sie sich automatisch an verschiedene Bildschirmformate anpasst. Natürlich ist die Basis dieser Überarbeitung aber die bisherige Desktopvariante mit all ihren Textlängen und Fotoinhalten.
  • Phase 3, die ergonomisch nicht optimale Webseite: Die Webseite ist, was ihre Benutzerführung über das User-Interface anbelangt, noch nicht optimal. Es gibt verschiedene Probleme, zum Beispiel neue Bildschirmgrößen, mit denen sie nicht immer gut zurechtkommt, zu lange Texte bzw. zu lange Introtexte oder zu datenintensive Bilder, die die Webseite auf mobilen Geräten zu langsam darstellt. Auch die Gestaltung, die rein funktional ausgerichtet ist, mag Wünsche offen lassen.
  • Phase 4, die zum zweiten Mal überarbeitete Webseite: Die Webseite wird in einem zweiten Schritt überarbeitet, um diese Probleme und Einschränkungen zu beseitigen.
  • Phase 5, die Kompromiss-Webseite: Nicht alles konnte zufriedenstellend geändert werden. Responsive-Webdesign wird als Kompromiss empfunden, der nicht immer zu guten Ergebnissen führt. Das kann die Interpretation des ursprünglichen Designs auf kleinen Bildschirmen betreffen oder die Navigation, die zu wenig das wiedergibt, was bei der Desktopvariante realisiert wurde.
  • Phase 6, die mobile Webseite: Die Webseite wird völlig neu aufgesetzt. Man geht nun nicht von der inhaltlichen und gestalterischen Fülle der Desktopvariante aus, sondern kreiert eine abgespeckte, reduziertere Mobil-Version der Seite, von der man die Darstellung der Desktopvariante ableitet.

Die Navigation ganz oben ist mehrzeilig geworden.

Oben: Bei der schmalen Dimensionierung der Bildschirmbreite ist die Navigation ganz oben mehrzeilig geworden und der Text des Hauptartikels steht nicht mehr rechts vom Bild. Die einzelnen Seiten-Elemente werden jetzt prinzipiell untereinander angezeigt.

Mehr Übersichtlichkeit im mobilen Webdesign

Dieser Ablauf mag veranschaulichen, wie sich das Webdesign gewandelt hat. Da immer mehr Menschen mit mobilen Geräten ins Internet gehen und dabei relativ kleine Bildschirme verwenden, wird die Darstellung auf kleinen Devices immer mehr die Ausgangsbasis für die Gestaltung der Webauftritte. Das hat durchaus gute Aspekte. Denn viele Webseiten haben in ihrem jahrelangen Bestehen Inhalt auf Inhalt gehäuft, immer neue Themenfelder und Medien integriert und dabei die Übersichtlichkeit und Handhabbarkeit der Informationen zum Teil vernachlässigt.

Reduktion als gestalterischer Ansatz für mobile und Desktop-Webseiten

Die Aufgabe der Darstellung von Inhalten auf kleinen Bildschirmgrößen ist eine Rückbesinnung auf die Essenz der Informationen und eine übersichtliche Struktur. Von daher ist der konzeptionelle Ansatz, Webseiten auf kleinen Bildschirmgrößen basieren zu lassen und von dort aus zu schauen, wie sie auf Größeren dargestellt werden, ein Vorgang der Verschlankung und Reduktion. Dies bezieht sich sowohl auf Inhalte als auch auf die Form und Gestaltung des Webdesigns.

Von Desktop-Großmonitoren zu mobilen Smartphone-Monitoren

Interessant ist, dass die Tendenz der letzten Jahre dahin ging, dass auf den Schreibtischen im Büro und Zuhause immer größere Monitore standen, von 15 Zoll, über 17 Zoll ging das zu 21/22 Zoll, 24 Zoll und 27 Zoll. Die mobile Revolution der technischen Kommunikation hat zum Gegenteil geführt: zu kleineren Handy-Bildschirmen und mittelgroßen Smartphone-Bildschirmen – im Fall des Apple iPhone beispielsweise zu 3,5/4-Zoll-Displays, über 5 Zoll- bis zu 5,7/6-Zoll-Screens bei Phablets/Smartlets wie dem Samsung Galaxy Note 3 oder noch größeren Devices.

Tablet-Monitore schließen zu Laptopgrößen auf

Knapp darüber fängt mit 7 Zoll Bildschirmdiagonale das kleinste Tablet an und geht zur Standardgröße von ca. 10 Zoll hoch, was etwa der Bildschirmdiagonale eines Netbooks als kleinstem Laptop entspricht. Dabei sind aber nicht nur die Bildschirmgrößen wichtig, sondern deren Auflösung und Brillanz entscheidet mit darüber, wie viel und wie gut etwas auf dem Bildschirm zu erkennen ist. Gängige Bildschirmauflösungen sind zum Beispiel:

  • Bei Handys/Smartphones: 320×480 Pixel
  • Bei Smartphones/Tablets: 768×1.024 Pixel
  • Computer-Desktop: 1.024 Pixel und darüber hinaus, zum Beispiel 1.920×1.200 Pixel

Konzeption für responsive Webseiteninhalte

Wie man konzeptionell auf die Herausforderung der flexiblen Darstellung von Webseiteninhalten und ihrer Formensprache reagiert, bleibt die Frage. Responsive Design wird der Standard der Zukunft für die meisten Webseiten. Möglichkeiten für die bildschirmübergreifende Darstellung von Webinhalten gibt es aber verschiedene:

  • Zwei Webseiten: Ein geläufiges Modell ist es, zwei verschiedene Webseiten zu programmieren. Der Nachteil ist hier ein erhöhter Pflegeaufwand, da zwei verschiedene Seiten aktualisiert werden müssen.
  • Responsive Webseite: Eine Webseite, die sich allen Bildschirmgrößen anpasst. Vorteil: Ein Pflegeaufwand nur für eine Seite nötig. Nachteil: Man muss größere redaktionelle und gestalterische Kompromisse eingehen als bei der Lösung der zwei getrennten Webseiten.
  • Responsivität hinzufügen: Zum Teil kann man über Zusatzmodule und PlugIns die nicht-responsive Webseite responsive machen
  • Apps entwickeln: Zur Webseite wird eine App realisiert, die die Inhalte der Webseite auf Android, iOS oder Windows Mobile/Windows Phone bereitstellt. Vorteil: Die Lösung ist hochgradig Device-spezifisch und damit eine sehr anpassungsfähige und individuelle Lösung. Es ist so eine spezifische Optimierung auf die Belange des jeweiligen Betriebssystems möglich, die die anderen Lösungen nicht bieten. Nachteile: Ein zusätzlicher hoher Aufwand ist nötig, der u.U. über den für eine zweite Webseite hinausgeht.
  • Keine responsive Webseite: Es gibt sehr einfach aufgebaute Webseiten im 16:9-Format, die sich aufgrund ihrer geringen Größe und einfachen Struktur auch so gut an einen mobilen Bildschirm anpassen.

Hier das Beispiel einer nicht responsiven Webseite.

Oben: Hier das Beispiel einer nicht responsiven Webseite, die eine starre Seitengröße hat. Zu sehen ist, wie sie im Browserfenster steht. Diese Webseite hat kurze Texte und nur wenige Seitenelemente.

Auf dem „iPad mini“ sieht die Webseite so aus.

Oben: Auf dem „iPad mini“ sieht die Webseite so aus. Obwohl sie nicht responsive und wenig anpassungsfähig ist, fügt sie sich aufgrund ihres reduktionistischen Designs gut in die Seite im Safari-Browser ein.

Auch die Darstellung auf dem Groß-Smartphone Samsung „Galaxy Note3“ ist sehr zufriedenstellend.

Oben: Auch die Darstellung auf dem Groß-Smartphone Samsung „Galaxy Note3“ ist sehr zufriedenstellend. Hier spielt auch die geringe Höhe der Webseite eine Rolle.

Fazit: Responsive Design setzt neue Impulse für das Web-Design

Das Thema „Responsives Design von Webseiten bzw. Multimedialen Inhalten“ kann dazu führen, dass sich Web-Konzeptioner, Web-Redakteure und -Texter sowie Web-Programmierer und Web-Designer neue Gedanken über ein „Weniger ist mehr“ machen werden. Denn sich dem Web von der mobilen Seite zu nähern, heißt, alles Unnötige wegzulassen und mehr Klarheit und eine bessere Strukturierung von Inhalten einzusetzen.

2 Antworten zu “Responsives Webdesign lässt Gestalter konzeptionell umdenken”

Kommentar hinzufügen

Mit der Nutzung dieses Formulars erklärst du dich mit der Speicherung und Verarbeitung deiner Daten durch diese Website einverstanden.