Folge dem weißen Kanninchen::/, Nützliches/Adaptive, Responsive, Fluid und Static Webdesign – wo liegen die Unterschiede? Eine dynamische Beispielseite lädt zum Ausprobieren ein!

Adaptive, Responsive, Fluid und Static Webdesign – wo liegen die Unterschiede? Eine dynamische Beispielseite lädt zum Ausprobieren ein!

Unbenannt-1

Früher wurden Webseiten hauptsächlich auf den Monitoren von Desktop-Computern dargestellt. Die hatten eine mehr oder minder ähnliche Auflösung bei fixer dpi-Zahl (72 dpi) und wenn man für verschiedene Geräteklassen ein Webdesign gestaltete, war man gezwungen, entweder für die kleinste Bildschirmbreite zu layouten oder ein Webdesign in regelmäßigen Abständen an die neuen und am weitesten verbreiteten Geräteklassen und gängigen Bildschirme anzupassen.

Mit einigen Mobiltelefonen hielt eine “abgespeckte Version” für Mobiltelefone Einzug, die aber mit dem Erscheinen des iPhone praktisch obsolet wurde, weil es das erste Smartphone war, das in der Lage war, im Browser Webseiten komplett wie für einen Desktop zu rendern. Trotzdem gab es noch speziell für diese Geräteklassen angepasste Webseiten und Layouts, um die zu übertragenden Datenmengen und somit die Ladezeiten gering zu halten.

Heute tummeln sich im Bereich der mobilen und stationären Geräte, die Websieten rendern können, eine Vielzahl verschiedener Geräte mit unterschiedlichen Auflösungen und Pixeldichten – iPhone, windows Phone, Blackberry, Androids, Tablet PCs, iPads im Hoch- und Querformat mit hochauflösenden Retina oder anderen Techniken mit Pixeldichten von 200, 300 oder mehr ppi (pixel pro Zoll).

Man kann nicht für alle möglichen Bildschirmgrößen, Auflösungen, Pixeldichten, Browser und dpi/ppi-Zahlen ein eigenes statisches Layout für eine Webseite gestalten, daher ist man dazu übergegangen, Webseiten sich dynamisch an das Ausgabegerät des Anwenders anpassen zu lassen. Dazu gibt es verschiedene Möglichkeiten.

Schlagworte wie adaptiv, responsive, fluid (oder liquid) machen die Runde und werden wie selbstverständlich synonym benutzt. Aber es gibt Unterschiede, die sich leichter zeigen, als erklären lassen. Auf der Website www.liquidapsive.com kann man sich die Auswirkungen für die verschiedenen Herangehensweisen an die Layouts ansehen, indem man den Rahmen des Browsers größer oder kleiner macht. Viel Spaß!

Danke an Nicholas Davison der die Seite www.liquidapsive.com für Digitaria erstellt und online gestellt hat.

2017-09-13T09:53:48+00:00 12. Februar 2014|Allgemein, Nützliches|1 Comment