Tel +49 34223 43211

Der Unterschied zwischen adaptive und responsive Webdesign. Teil 1.

Die Begriffe „adaptive Webdesign“ und „responsive Webdesign“ finden eine breite Anwendung. Hinsichtlich der Unterschiede zwischen diesen zwei Ansätze sind die Webdesigner und Web-Entwickler nicht komplett einig. Einige sind davon überzeugt, dass adaptiv und responsiv ein Synonyme sind. Andere haben die Meinung, dass diese Fachbegriffe sehr unterschiedliche Sinne haben. Die Inkonsistenzen in der Web-Terminologie folgt dafür, dass viele Fachbegriffe irrtümlich benutzt werden.

Dieser Artikel folgt dem Zweck in der bestehenden Undeutlichkeit zurechtzufinden. Es wird der Unterschied zwischen den Arten von Layouts und Ansätze für die Web-Entwicklung erklärt.

Welche Arten von HTML-Site-Layouts gibt es?

Eine kleine Bemerkung: im diesen Artikel geht es um die dynamischen HTML-Modelle und nicht um die statischen Entwurf -Modelle, die gewöhnlich über Sketch, Photoshop & InDesign gemacht werden.

Im ersten Teil dieses Artikels werden folgende Arten von Layouts betrachtet:

  1. feste Layouts
  2. flüssige Layouts
  3. adaptive Layouts
  4. responsive Layouts
  5. gemischte Layouts

Im zweiten Teil werden wir folgende Begriffe präzisieren:

  1. responsive Website Design,
  2. der Ansatz „Mobile First“,
  3. adaptive Website Design. 

1. Festes Seitenlayout (static, fixed page layout)

Ein festes HTML-Layout hat eine strenge in Pixel festgelegten und fixierten Seiteninhalt. Die Breite des Seiteninhalts ist statisch und ändert sich nicht bei Änderung der Browserfenstergröße.

Die Breite der Webseiten wird durch die Auflösung der populären Bildschirmgrößen bestimmt. Z.B.: 800×600, 1024×768, 1200×800 und so weiter. Obwohl solche Layouts 2018 extrem überholt sind, kann man die immer noch in der Verwendung oft finden.

2. Flüssiges Seitenlayout (liquid page layout)

Flüssiges Seitenlayout passt sich an jeder Bildschirmauflösung des Benutzers an. Die Lösung: die Werte der Strukturelemente der Website werden nicht in den absoluten Zahlen (Pixel) dargestellt werden, sondern in den relativen Zahlen definiert werden (Prozent). Zum Beispiel: Zellenbreite wird im CSS Code nicht mit 560px definiert, sondern wird als 50% geschrieben.

Dieser Typ des Layouts von HTML-Seiten ist auch veraltet, weil er die aktuellen Anforderungen an das UX/UI Designs nicht entspricht. Flüssiges Seitenlayout sieht auf großen Desktops sowie auf kleinen Bildschirmen des Smartphons gleich aus.

3. Adaptives Seitenlayout (adaptiv page layout)

Achtung! Verwechseln Sie nicht mit adaptivem Webdesign. Der Unterschied wird später erklärt.

Adaptives Layout basiert auf der Verwendung von Medienanfragen CSS (cascading style sheets media queries). Der Inhalt passt sich so an verschiedene Bildschirme an. Die Lösung: wenn sich die Bildschirmbreite des Benutzergeräts ändert, „springt“ das adaptive Layout entlang der Kontrollpunkte (auch Steuerpunkte). Der Inhalt wird jedes Mal verschoben, verkleinert oder vergrößert.  Da ist nicht die Bildschirmgröße ein Prüfungskriterium, sondern die nächstliegenden Kontrollpunkte.

Mehrere Kontrollpunkte geben eine feste Position und Inhaltsgrößen auf verschiedenen Bildschirmen an. Das heißt, dass adaptive Layout mit dem Webseite-Inhalt passt sich an die Bildschirmgrößen an.

Der Nachteil solcher adaptiven Layouts besteht darin, dass die Inhaltsart und Layout von allen existierenden Endgeräten nicht berücksichtigt werden kann.

4. Responsives Seitenlayout (responsiv page layout)

Responsives Layout basiert sich auch auf der Verwendung von CSS – Medienanfragen (cascading style sheets media queries). Zum Unterschied vom adaptiven Seitenlayout erfolgt die Anpassung des Webseiteninhalts an die Kontrollpunkte beim responsiven Layout nicht absolut (in Pixel), sondern relativ (prozentual). Deswegen wechselt sich responsives Layout zwischen den Kontrollpunkten fließend.

5. Gemischtes Seitenlayout (adaptiv + responsiv page layout)

Gemischtes Seitenlayout ist eine Kombination von adaptiven und responsiven Layouts. Gemischtes Layout überprüft die Darstellung des Seiteninhalts auf den Gerätebildschirmen für alle Kontrollpunkte. Die Anzahl der Kontrollpunkte erhöht sich. Um den Wert der Elemente einzustellen, werden nach Bedarf die Pixel- oder Prozentsätze verwendet.

Manchmal wird dieser Ansatz verwendet, um das vorhandene Layout für mobile Geräte anzupassen und zu optimieren. In diesem Fall heißt es „Mobile Last“.

Überblick und Vergleich in einer Tabelle:

Das war ein kurzer Überblick über die Layouts von Webseiten. Das Layout ist kein Design.

Das Design ist ein komplexes Konzept, das unter anderem den Ansatz der Webentwicklung und deren Methodologie umfasst und die Probleme der Benutzerinteraktion mit der Website auf verschiedenen Geräten löst (UX/UI Design).

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from - Youtube
Vimeo
Consent to display content from - Vimeo
Google Maps
Consent to display content from - Google
Spotify
Consent to display content from - Spotify
Sound Cloud
Consent to display content from - Sound
Tel +49 34223 43211