Liquides und adaptives Design

ViewportsEine Website ist in der Regel ein Kommunikationskanal einer größer angelegten Strategie.  Dabei bedient ein Internetauftritt an sich bereits verschiedene Medien wie Smartphone, Tablet, Phablet oder eben einen PC. Die Aufbereitung bzw. das Design des Internetauftritts muss daher auf verschiedenen Geräten funktionieren. Das heißt die Inhalte müssen auf unterschiedlich großen Screens gleichermaßen gut transportiert werden. Bei der Anpassung der Website an unterschiedliche Ausgabegeräte spricht man in der Regel von Responsivem Design.  Die Umsetzung kann dabei auf verschiedene Art erfolgen.

Adaptives Design

Die aus gestalterischer Sicht kompromisslose Variante ist das sogenannte adaptive Design. Dabei werden für unterschiedliche Ausgabegrößen auch eigene Auftritte gestaltet und umgesetzt. Diese werden jeweils durch eine Weiche (MediaQueries)  aufgerufen. Der Vorteil ist, dass das Design exakt für die jeweilige Ausgabegröße (Viewports) optimiert werden kann. Durch das jeweilige statische Layout können in der Konzeption Wireframes und Mockups 1:1 umgesetzt werden. Ein festes Gestaltungsraster ermöglicht viel Freiraum bei der Gestaltung. Dafür müssen jedoch auch mehrere Auftritte gestaltet und programmiert werden, was einen deutlichen Mehraufwand mit sich bringt. Zu dem kommt es heute oftmals zu Darstellungsfehlern, da es eine Großzahl von Screengrößen gibt, die nicht alle durch ein separates Design umgesetzt werden können.

Liquides Design

Heute werden responsive Sites  meistes durch ein liquides (flüssiges) Design umgesetzt. Das heißt, dass Design ist nicht statisch sondern wird innerhalb eines veränderbaren Gestaltungsrasters an bestimmten Grenzwerten, sogenannten Breakpoints an den jeweiligen Viewport angepasst. Dies ermöglicht eine Anpassung an eine Vielzahl von Ausgabegrößen, schränkt dadurch aber die gestalterische Umsetzung ein. Wichtig ist, dass bei dieser Herangehensweise ausschließlich mit relativen Größen gearbeitet wird. Bildgrößen werden in Prozent, Schriftgrößen in em angegeben. (1 em enstpricht im konventionellen Schriftsatz einem Geviert. Das wiederum entspricht ungefähr der Breite der Versalie M.  Im Webdesign entspricht eine Schriftgröße von 2 em eine Verdoppelung der definierten Grundgröße). Mit welcher Größe bei der Umsetzung der Site begonnen wird, ist wohl nach wie vor abhängig von dem Nutzerverhalten meiner Zielgruppe und kann nicht absolut beantwortet werden. Für die Raumaufteilung eines responiven Designs gibt es verschiedene Variationen. Im Vordergrund stehen dabei die zu transportierenden Inhalte und das Verhalten einzelner Bereiche beim überschreiten der angelegten Breakpoints. Die folgende Abbildung zeigt unterschiedliche Raumaufteilungen in der jeweiligen Anpassung an unterschiedliche Devices. Eine tabellarische Auflistung gängiger Devices und deren Größe, Auflösung und Verbreitung findet ihr auf…screensiz.es!

Responsive Design

 

 

Print Friendly, PDF & Email