Elastic Layout
Der Kerngedanke des Elastic Layout (auch Elastic Design genannt) besteht darin, Websites möglichst immer optimal, also über den gesamten Bildschirm anzuzeigen. Daher werden sowohl die Höhe als auch die Breite in Prozentwerten oder „em“ festgelegt und nicht in zuvor vorgeschriebenen Maßen wie Zentimeter oder Millimeter. Beim Elastic Layout passt sich also das Webdesign an den jeweiligen Browser an. Zur Anwendung kommt Elastic Layout trotz des guten Gedankens dahinter eher selten, denn die Programmierung ist aufwändig und komplex. Gelingt diese nicht richtig, kommt es zu Problemen bei der Anzeige, also etwa in Form von verzerrter Schrift[1].
Allgemeine Informationen zum Thema
Es ist insbesondere die Tatsache, dass wir heute nicht nur mit dem Computer im Internet sind, sondern auch auf zahlreichen mobilen Geräten, die für das Elastic Layout spricht. Durch die Programmierung lassen sich die angezeigten Informationen einer Website theoretisch sowohl unendlich vergrößern als auch verkleinern. Die erwähnte komplexe Umsetzung setzt dem Elastic Layout allerdings gewisse Grenzen, sodass oft ein anderes Layout gewählt wird.
Unterscheidung unterschiedlicher Layouts
Beim Fixed Design wird auf eine bestimmte Auflösung oder sogar einen bestimmten Browser hin geplant. Die Pixel-Angabe führt zu einem starren Gestaltungslayout, das sich wenig anpassungsfähig zeigt und somit nur eingeschränkt verwendbar ist.
Das Fluid Design geht einen Schritt weiter in Richtung Responsive Web-Design. Hier erfolgt die Darstellung auf der Basis von Prozenten, wobei das Layout an eine Mindest- und Maximalbreite reduziert ist. Innerhalb dieser festgelegten Grenzen bleibt das Layout gleich, allerdings werden die angezeigten Inhalte entweder zusammengedrückt oder auseinander gedehnt, was sich auf die Optik des Designs unangenehm auswirken kann.
Das Adaptive Web-Design ist bereits nah dran am Responsive Web-Design. Hier werden unterschiedliche Layouts für verschiedene Viewports verwendet. Wenn das Browser-Fenster verändert wird, passt sich das Design daran an, es wird beispielsweise eine Spalte weniger angezeigt, sodass deutlich wird, dass ein Breakpoint unter- oder überschritten wurde. Anders als andere Designs stehen also beim Adaptive Web-Design mehrere Layouts zur Verfügung, die ein und dieselbe Website für bestimmte Viewport-Größen optimieren. Solange man sich innerhalb dieser Layouts bewegt, wird die Website mit einem vordefinierten und fixen Layout angezeigt.
Anders als das Adaptive Web-Design ist das Responsive Web-Design aufgebaut. Während wie beschrieben das adaptive Design auf starre Layouts setzt, geht das responsive Design einen Schritt weiter. Durch die Kombination aus fluiden Layouts wird die Möglichkeit geschaffen (wenn auch nicht immer erfolgreich umgesetzt), dass das Layout nahezu immer optimal für alle Auflösungen gleichermaßen angewendet werden kann. Für das Responsive Web-Design wie auch für das Adaptive Web-Design gilt, dass in beiden Fällen unterschiedliche relevante Informationsblöcke einzeln gestaltet werden können[2].
Trends bei Layouts
Wenngleich die Grundidee des Elastic Layouts gut ist, stößt sie doch an die beschriebenen Grenzen, da die Programmierung komplex ist und viel Aufwand bedeutet. Ein Blick auf weitere Trends beim Web-Design zeigt, dass Elastic Design dauerhaft keine optimale Lösung darstellt.
Das Fullscreen Video war lange Zeit nicht sehr beliebt, doch diese Tendenz hat sich gewandelt. Der Hauptgrund ist sicherlich der Zeitfaktor, denn viele Menschen haben weder die Zeit noch die Lust, längere Texte zu lesen, sie sehen sich stattdessen lieber Videos an. Mit dem Fullscreen Video können sich Nutzer voll und ganz auf den Film oder Clip konzentrieren, ohne durch weitere, womöglich störende Inhalte auf dem Bildschirm abgelenkt zu werden.
Ein weiterer Trend ist eine größere Typografie. Größere Headlines und Texte fallen leichter auf und wecken auch beim Besucher, der nur wenig Zeit mitbringt, eher Interesse als kleine Schriften und Überschriften. Was lange Zeit ein No-Go war, erfreut sich wachsender Beliebtheit: dynamische Farben. Sie galten – wie auch die größere Typografie – lange als unbeliebt und „out“, haben sich jedoch inzwischen insofern beliebter gemacht, als dass die Einsicht eingekehrt ist, dass eine intensive Farbgestaltung Aufmerksamkeit weckt, der man sich kaum entziehen kann[3].
Gegenüberstellung der Vor- und Nachteile beim Elastic Design
Folgende wesentliche Vorteile lassen sich zum Elastic Layout benennen:
- Die entweder in Prozenten oder em angegebenen Seitenabschnitte lassen sich proportional beim Skalieren der Website verkleinern oder vergrößern.
- Die Skalierungen bei elastischen Layouts lassen sich praktisch grenzenlos fortführen.
Dem stehen folgende Nachteile gegenüber:
- Wird die Layoutvergrößerung zu deutlich, erscheinen auf der Seite horizontale Scrollbalken.
- Im Falle des Zoomens verlieren Bilder und Grafiken an Qualität, sofern sie nicht mit höheren Auflösungen eingebunden sind.
- Beim Rechnen – sowohl in Prozenten als auch in em – kann es zu Problemen kommen, weil beim exakten Umrechnen häufig krumme Kommawerte entstehen[4].
Bedeutung für das Usability
Das Elastic Layout ist in den meisten Fällen nicht die erste Wahl, stattdessen wird die Entscheidung in den letzten Jahren vermehrt für das Responsive Design gefällt. In beiden Fällen liegt zwar ein nicht zu unterschätzender Aufwand hinsichtlich der Programmierung vor. Doch da die Möglichkeiten und die Flexibilität des Responsive Designs gegenüber dem Elastic Layout deutlich überwiegen, wird in der Regel mit der responsiven Variante gearbeitet. Dennoch lassen sich gegebenenfalls auch die anderen genannten Designs in Einzelfällen gut anwenden.
Einzelnachweise
- ↑ Elastic Layout onlinemarketing-praxis.de. Abgerufen am 29.06.2018
- ↑ Nicht alles was sich Responsive nennt ist es auch cms-typo3.at. Abgerufen am 29.06.2018
- ↑ Website Layout oxidian.ch. Abgerufen am 29.06.2018
- ↑ Levenko Viktoria edoc.sub.uni-hamburg.de. Abgerufen am 29.06.2018