An den Nutzer & Kontext angepasst – eine Retrospektive hin zum Responsive Webdesign und darüber hinaus

Die Layout-Entwicklung im Web – wie geht es weiter

Um besser nachvollziehen zu können, warum aktuell verschiedene Ansätze in der Web-Entwicklung heiß diskutiert werden, gehen wir erstmal einen Schritt zurück und werfen einen Blick auf die Evolution der wichtigsten Layouts.

Static oder Fixed Layout (Demo: https://codepen.io/nickpettit/full/AyaGb)

Bei diesem Layout ist die Breite und Höhe einer Webseite fest vorgegeben und in Pixeln definiert. Die Inhalte bleiben dadurch immer gleichgroß und die nicht ersichtlichen Teile können nur mithilfe von horizontalem und/oder vertikalem Scrollen erreicht werden. Durch die moderne Gerätevielfalt und Displaygrößen gilt das Fixed Layout, welches meist ausschließlich für Desktop oder gar bestimmte Browser erstellt wurde, als veraltet.

Liquid oder Fluid Layout (Demo: https://codepen.io/nickpettit/full/htviL)

Das Liquid Layout verfügt über ein flüssiges Gestaltungsraster und findet im modernen Webdesign weiterhin in speziellen Einsatzbereichen Anwendung. Das Layout nutzt ausschließlich relative Einheiten wie % oder em und die einzelnenen Inhaltselemente verhalten sich immer proportional zu diesen vordefinierten Werten. Dadurch passt sich der Inhalt geräteunabhängig immer der gesamten Breite an, ohne die Schrift zu verzerren.

Adaptive Layout (Demo: https://codepen.io/nickpettit/full/dFgop)

Bei der Adaptiven Umsetzung handelt es sich nicht um ein flexibles, sondern um ein „springendes Layout“. Hierbei werden für unterschiedliche Devices Breakpoints (Umbrüche) definiert, die mit Media Queries gesteuert werden. Für jeden Breakpoint entsteht so ein statisches Layout, welches entsprechend dem jeweiligen Device konzipiert wurde. Wenn also die Browserfenstergröße verändert wird, folgt der Sprung in ein passendes Fixed Layout.

Responsive Layout (Demo: https://codepen.io/nickpettit/full/rLlaF)

Das Responsive Layout vereint fluide Grids, flexible Bilder und Media-Dateien, die mit Media Queries definiert werden. Durch diese Kombination aus fluiden Elementen und Media Queries kann der zur Verfügung stehende Raum auflösungsunabhängig immer bestmöglich genutzt werden. Es entsteht ein fließendes Layout, das optimal auf unterschiedlichste Bildschrimgrößen reagiert und nicht von harten Breakpoints vorgegeben ist.

Kontextsensitive Ausspielung

Das Konzept der individualisierten, auf den Kontext eines Anwenders abgestimmten Leistungen entstand aufgrund der Entwicklung des Marketing vom Massenmarkt weg hin zum Individuum als Zielgruppe, auf dessen individuelle Präferenzen und Bedürfnisse zugeschnittene Leistungen den größten Kundennutzen generieren können. Dieser Kundennutzen wiederum sorgt über direkte und indirekte Einflussgrößen, wie z. B. gestiegenen Umsatz durch höhere Zahlungsbereitschaft und höheren Absatz oder gestiegene Kundenbindung und -loyalität, für den Erfolg eines Unternehmens.

Einer für alle – Eine Frage der Sichtweise

Graceful Degradation: Bei dieser „würdevollen Herabstufung“ handelt es sich um die weitverbreitetste Vorgehensweise bei der Umrüstung einer bestehenden Webseite auf Responsive Design. Das Layout wird hierbei von Beginn an mit viel Platz und Inhalt für moderne Browser und große Bildschirme entworfen.

Dadurch orientiert man sich zwar an den neuesten Technologien, aber Besitzer von kleinen Displays oder älteren Systemen müssen mit einer abgespeckten Version der Webseite leben, die oftmals nur noch die Kernfunktionen beinhaltet. Dies widerspricht der Grundidee des Internets, für jeden vollumfänglich nutzbar zu sein – egal wie würdevoll der Titel.

Progressive Enhancement: Bei dieser modernen Methode steht nicht das Layout, sondern Inhalt und Struktur im Vordergrund. Dadurch hält sich diese Sichtweise an die Denkansätze Content First sowie Mobile First. Es werden zunächst die wichtigsten Inhalte und Funktionen für kleine Endgeräte geplant, um diese Kernversion dann progressiv zu erweitern.

Dies bedeutet aber nicht, dass sich hierbei die Relevanz der Informationen verändert. Die Mobile First optimierten Inhalte gelten selbstverständlich für alle Geräteklassen und auch die Desktop-Version profitiert von dem prägnanten Content und der klaren Funktionalität der Smartphone-Ansicht.

Unsere Einschätzung

Den Fokus auf die Erwartungen der Nutzer legen: Websites sind nur dann erfolgreich, wenn man das Augenmerk auf den Besucher und dessen Umgebung, Bedürfnisse sowie Nutzungskontexte richtet.Nutzer erlernen gerade durch Websites „Patterns“ – also Muster welche sich wiederholen und erwarten somit bestimmte Nutzungssysteme. Berücksichtigen wir also diese Erwartungen beim Konzipieren und Gestalten von Websites, erleichtern wir den Besuchern sich mit dem wirklich wichtigen Informationen zu beschäftigen – also dem Inhalt und ermöglichen somit aktiv die Realisierung des Business-Cases.

Für uns als Gestalter sowie Entwickler-Kollegen heißt dies, dass es nicht mehr darum geht, ein Design pixelgenau umzusetzen. Es geht vielmehr um den Kerngedanken des Internets: Inhalte zielgruppengerecht in jedem zur Verfügung stehenden Medium optimal zu transportieren und somit Webseiten nach dem Inclusive Design Konzept zu gestalten, sodass sie für so viele Menschen wie möglich – ohne Anpassung oder Spezialisierung – nutzbar sind.

Hierfür bedarf es jedoch einem Umdenken auf allen Ebenen und für alle Rollen: vom Management über den Vertrieb, vom Designer über den Entwickler, bis hin zum wichtigsten Gut: dem Anwender des Systems und Produktes/Services.