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

Image for post
Image for post

Für das Surfen im Internet gibt es keinen vordefinierten Zugangskontext mehr. Der User kann unterschiedlichste Devices nutzen. Egal wie groß das Display des Zugangsgerätes, das im Moment genutzt wird, ist: Der Anspruch muss immer sein, dass die bestmögliche Funktionalität der Webseite und die Darstellung des entsprechenden Inhalts vollständig gewährleistet ist. Da wir also keinerlei Aussagen über die Nutzung unserer Website machen können, soll diese sich möglichst optimal an den zur Verfügung stehenden Kontext des Nutzers anpassen. Die Seiten sollen also responsive (= reaktionsfähig) sein.

“It is not the strongest species that survive nor the most intelligent, but the ones most responsive to change.” — Charles Darwin

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.

„Responsive web design offers us a way forward, finally allowing us to design for the ebb and flow of things.“ — Ethan Marcotte

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.

Written by

Innovation Explorer. Design Consultants. User Experience Experts.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store