Neues Webdesign: Responsive Design

Ein Layoutreise von 800×600 Pixeln – und zurück.

Es war einmal vor langer Zeit, da stand man als Webdesigner vor der Herausforderung eine Website mit 800 x 600 Pixel zu designen – oder vielleicht doch lieber mit 800 × 600 Pixeln. Diese willkommene Berechenbarkeit eines Layouts und seiner absehbaren Auswirkungen in freier Wildbahn änderte sich drastisch, als schlagartig die Monitore wuchsen. plötzlich wurde ein 17 Zoll Monitor erschwinglich. Dann sogar eine unglaublich grosse Kiste mit sagenhaften 19 Zoll. Auf einmal musste man überlegen, ob eine Grafik bei 800 × 600 Pixel noch ihren Zweck erfüllt, gut aussieht und auch bei 1024 × 768 Pixeln nicht so viel Qualität verloren hat, dass ein Design wie PacMan 2.0 aussieht.

Der Schock saß tief, als ein Nachbar mit seinem 15″ Flatscreen prahlte und kurz darauf quasi im Monatstakt neue Monitore mit immer höheren Auflösungen und detailreicheren Farbtiefen auf den Markt geschwemmt und fortan bei den Entwürfen einer Website berücksichtigt werden mussten. Ein willkommene Strategie, dass ein Entwurf sowohl bei geringer als auch bei hoher Auflösung gut aussieht, war das aus der Fotografie bekannter Passepartout. So orientierte man sich für den wichtigen Content an die kleinste Auflösung und baute in dem Bereich drum herum einfach eine schöne Landschaft aus Hintergrund, Texturen oder Bildern, die für die Seite nicht wichtig – bei hoher Auflösung aber sehenswert waren.

Aber damit nicht genug! Wahrscheinlich allein um uns Designer zu ärgern, hatte die Industrie einen weiteren fiesen Plan in der Tasche. Es reichte nicht länger aus, dass die Monitore immer und immer größer wurden – nein, auch das Seitenverhältnis sollte sich jetzt ändern. Aus dem guten alten 4 zu 3 wurde ein 16 zu 10, ein 16 zu 9 – und heute gibt es so viele verschiedene Seitenverhältnisse und Auflösungen, dass man eigentlich gar nicht mehr abschätzen kann, wie die Website auf welchem Monitor aussieht.

Also wie konnte man auch diesem Problem weitgehend Herr werden. Vielleicht konnte auch hier die Grundidee des Passepartouts weiterhelfen? Allerdings war es nun nahezu unmöglich, eine Seite so zu gestalten, dass sie sinnvoll auf den Bildschirm zentriert erscheint. Also beschlossen wir Designer, einfach von einer minimalen Höhe/Breite auszugehen. Links und rechts der eigentlichen Seite sollte dann unser bekanntes Passepartout erscheinen. In die Länge jedoch, könnte die Seite endlos wachsen. Hier war die Grundidee des Blogs ein guter Ansatzpunkt. Zunehmend wurde der erste Eindruck einer Seite im Kopfbereich als im Imagebereich benutzt. Zum Beispiel für Slider, nette Intros oder die wesentliche Werbeaussage. Alternativ bestand auch die Möglichkeit, eine Webseite einfach als Fullscreen zu entwerfen. Dies ging mit Flash noch ganz gut. Jedoch machte uns hier rasch Apple einen Strich durch die Rechnung, indem es Flash schlicht boykottierte. Trotzdem fanden sich Möglichkeiten, eine Seite als Vollbild darzustellen.

Doch hatte man sich gerade an die neuen Konzepte der Gestaltung gewöhnt, tauchten die ersten Netbooks im Markt auf. Kurz darauf folgten auch schon die Tablets. Und spätestens seitdem eine Website nicht nur auf einem 27″ Monitor, einem 11″ Netbook, 9,4″ Tablet, sondern auch auf einem Handy-Minidisplay funktionieren soll, werden alle bisherigen Konzepte stark auf die Probe gestellt.

Eine Lösung könnte Liquid-Design (auch Fluid genannt) sein, bei dem die Auflöung keine Rolle spielt, da sich die Seitenelemente dynamisch der Größe anpassen.Bilder werden entsprechend der Größe der Auflösung skaliert, Texte fließen halt etwas langer und damit es nich tzu dumm aussieht, werden die Schriften immer größer.

Eine Alternativ wird das ‚Responsive Design‚ oder auch ‚Mobile-First‘-Design sein. Bei diesem Ansatz gibt es keine ‚Einheitslösung‘ für das Aussehen der Website. Vielmehr setzt sich eine Website aus vielen Einzelteilen zusammen, die sich je nach Auflösung unterschiedlich zusammenschieben.

Klassische Auflösungen sind:

– Monitor von 1024 px bis 1280 px (wobei bereits ab einer Fläche von 980 px ein 4-Gridsystem genutzt wird),

– Tabeltauflösung von 768 bis 980 px

– Smartphoneauflösung von 320 px bis 480 px bis 768/980 px

Eine gute Auflistung vieler Endgeräte findest du hier: http://www.responsive-webdesign.mobi/was-ist-responsive-webdesign/

Natürlich macht es keinen Sinn für jedes Endgerät eine eigene Website zu entwerfen. In Anbetracht der wachsenden Bedeutung der mobilen Endgeräte wird man künftig aber wohl drei Layouts aus dem hut zaubern müssen.

Wie sinnvoll dieses Konzept ist, ob es Zukunft hat oder die Zukunft sein wird bleibt abzuwarten. Auf jeden Fall kommen wir wieder in die Genugtuung, uns ein Design zu überlegen, welches in etwa auf 800 x600 Pixeln funktionieren muss.